diff --git a/.github/images/chili-peppers.jpg b/.github/images/chili-peppers.jpg
new file mode 100644
index 000000000..4645d4e04
Binary files /dev/null and b/.github/images/chili-peppers.jpg differ
diff --git a/.github/images/crustacean.jpg b/.github/images/crustacean.jpg
new file mode 100644
index 000000000..121835e5a
Binary files /dev/null and b/.github/images/crustacean.jpg differ
diff --git a/.github/images/dried-legume.jpg b/.github/images/dried-legume.jpg
new file mode 100644
index 000000000..9e2889b05
Binary files /dev/null and b/.github/images/dried-legume.jpg differ
diff --git a/.github/images/fruit.jpg b/.github/images/fruit.jpg
new file mode 100644
index 000000000..a487e83b5
Binary files /dev/null and b/.github/images/fruit.jpg differ
diff --git a/.github/images/green-leaf.jpg b/.github/images/green-leaf.jpg
new file mode 100644
index 000000000..0b96fbfcf
Binary files /dev/null and b/.github/images/green-leaf.jpg differ
diff --git a/.github/workflows/auto-publish.yml b/.github/workflows/auto-publish.yml
new file mode 100644
index 000000000..72a284cc6
--- /dev/null
+++ b/.github/workflows/auto-publish.yml
@@ -0,0 +1,39 @@
+name: auto-publish
+run-name: Automatically publish snippets
+on:
+  schedule:
+    - cron: '15 10 * * TUE'
+    - cron: '15 10 * * THU'
+jobs:
+  auto-publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    defaults:
+      run:
+        shell: bash
+        working-directory: ./
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Check out main
+        run: |
+          echo "Checking out main branch"
+          git config user.name github-actions
+          git config user.email github-actions@github.com
+          git checkout main
+      - name: Check out prod
+        run: |
+          echo "Checking out prod branch"
+          git checkout prod
+      - name: Merge from main into prod
+        run: |
+          echo "Merging from main to prod"
+          git merge main
+      - name: Push changes
+        run: |
+          echo "Pushing changes to prod branch"
+          git push origin prod
+
diff --git a/.gitignore b/.gitignore
index a133b9391..2d2f29ea5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -64,4 +64,6 @@ npm-debug.log*
 ~$*
 
 # Used to ignore "playlists", but having those checked-in for diffing purposes is very useful, so undoing the ignore:
-# playlists/**
\ No newline at end of file
+# playlists/**
+
+package-lock.json
\ No newline at end of file
diff --git a/README.md b/README.md
index 07ac86706..0fe20ada1 100644
--- a/README.md
+++ b/README.md
@@ -13,8 +13,7 @@ A collection of code snippets built with [Script Lab](//github.com/OfficeDev/scr
 1. [Fork](https://help.github.com/articles/about-forks/) this project into your GitHub account.
 1. Clone your fork to your development computer.
 1. Ensure that you have Node, version 6.10+, installed. (To check the version run the command `node -v`.)
-1. Install `yarn` as a global package `npm install yarn --global`.
-1. Be sure your CLI is in the root of the office-js-snippets repo and run `yarn install`. (It is similar to `npm install`.)
+1. Be sure your CLI is in the root of the office-js-snippets repo and run `npm install` to install all dependencies.
 1. Set up the original \OfficeDev\office-js-snippets as the upstream repo for your local repo by following the steps in [Configuring a remote for a fork](https://help.github.com/articles/configuring-a-remote-for-a-fork/).
 1. If you'll be using Visual Studio Code as your editor, install the [TSLint](https://marketplace.visualstudio.com/items?itemName=eg2.tslint) extension for Visual Studio Code.
 
@@ -22,7 +21,7 @@ A collection of code snippets built with [Script Lab](//github.com/OfficeDev/scr
 
 > For the git tasks in this procedure, the instructions assume that you're using a CLI. You are welcome to use a GUI git client. Consult the client's help to learn how to carry out the same tasks.
 
-1. Create a snippet using [Script Lab](https://github.com/OfficeDev/script-lab/blob/master/README.md#what-is).  Ensure that the name and description are what you want to be shown publicly. Use standard TypeScript indentation. Improper indentation can cause a failure of the build that you run in a later step. See also the [**Style guidelines**](#style-guidelines) section below.
+1. Create a snippet using [Script Lab](https://github.com/OfficeDev/script-lab/blob/master/README.md#what-is). Ensure that the name and description are what you want to be shown publicly. Make sure to keep your snippet small. Use standard TypeScript indentation. Improper indentation can cause a failure of the build that you run in a later step. See also the [**Style guidelines**](#style-guidelines) and [**Size restrictions**](#size-restrictions) sections below.
 1. Choose the Share icon, and then choose **Copy to Clipboard**.
 1. Paste the contents into a text editor.
 1. Near the top of the file, you will see the line `api_set: {}`. This needs to be changed to specify the host API version of the most recently added API that is used in your snippet. For example, if the snippet is for Excel and it uses some APIs that were introduced in Excel API 1.3, some in 1.4, and some in 1.5, then you need to specify `ExcelApi 1.5` as the value of the `api_set` property. Put a line break and four spaces before the value and no {} characters. To continue the example, when you're done the property would look like this:
@@ -46,11 +45,11 @@ A collection of code snippets built with [Script Lab](//github.com/OfficeDev/scr
 
 1. Open one of the `.yaml` files already in the group folder. If it has an `order` property near the top, then the snippets in the group folder are ordered in a particular sequence in Script Lab. Add an `order` property to the top of your `.yaml` file and give it a number that is between the order numbers of the snippets between which you want it to appear.
 1. Copy your `.yaml` file to the chosen group folder.
-1. Run `yarn start`. If there are no problems, the output will end with a `Done!`. If there are errors, review the output to check what caused the build validation to fail, and fix as needed. See [**Known errors and fixes**](#known-errors-and-fixes-in-the-build-tool) for more information.
+1. Run `npm start`. If there are no problems, the output will end with a `Done!`. If there are errors, review the output to check what caused the build validation to fail, and fix as needed. See [**Known errors and fixes**](#known-errors-and-fixes-in-the-build-tool) for more information.
 
-    > **Note**: The `yarn start` command adds an `id` property to the top of the file.
+    > **Note**: The `npm start` command adds an `id` property to the top of the file.
 
-1. Re-run `yarn start`, and fix errors, until the build succeeds.
+1. Re-run `npm start`, and fix errors, until the build succeeds.
 1. Run `git status`. You should see that, in addition to your new `.yaml` file (or possibly new folder), a `playlist\{host}.yaml` file (where `{host}` is `excel`, `word`, etc.) has also been changed. This is expected. The build tool you just ran added a reference to your new snippet to this file.
 1. Run the following two commands. The commit message should be a brief description of what the snippet demonstrates; for example, `"shows how to use getWhatever method"`.
 
@@ -130,6 +129,14 @@ A few style rules to observe:
 - Don't forget the semicolons.
 - `Libraries` in snippets must have a specific version. Eg. `jquery@3.1.1`.
 
+## Size restrictions
+
+Script Lab is designed for you to play with small code samples. Generally, a snippet should be at most a few hundred lines and a few thousand characters.
+
+Your snippet can use hard-coded data. A small amount of data (say, a few hundred characters) is OK to hard code in Script Lab. However, for larger pieces of data, we recommend that you store those externally then load them at runtime with a command like `fetch`.
+
+Keep your snippets and hard-coded data small since storing several large snippets could exceed Script Lab's storage and cause issues when loading Script Lab.
+
 ## Debugging the build script
 
 - The scripts for building/validating the snippets are under the `config` folder -- in particular, under `build.ts`.
diff --git a/config/build.documentation.ts b/config/build.documentation.ts
index 72eb9099b..ee9d8f653 100644
--- a/config/build.documentation.ts
+++ b/config/build.documentation.ts
@@ -36,7 +36,7 @@ export async function buildReferenceDocSnippetExtracts(
     await rmRf('snippet-extractor-output');
     await mkDir('snippet-extractor-output');
 
-    const contents = snippetExtractsPerHost.map(extracts => jsyaml.safeDump(extracts)).join('');
+    const contents = snippetExtractsPerHost.map(extracts => jsyaml.dump(extracts)).join('');
     await writeFile(path.resolve(`snippet-extractor-output/snippets.yaml`), contents);
 }
 
@@ -119,7 +119,7 @@ function getExtractedDataFromSnippet(
     const filename = snippetIdsToFilenames[row.snippetId];
     if (filename) {
         try {
-            const script = (jsyaml.safeLoad(fs.readFileSync(filename).toString()) as ISnippet).script.content;
+            const script = (jsyaml.load(fs.readFileSync(filename).toString()) as ISnippet).script.content;
 
             const fullSnippetTextArray = script.split('\n')
                 .map(line => line.replace(/\r/, ''));
diff --git a/config/build.ts b/config/build.ts
index 059400106..042846a8e 100644
--- a/config/build.ts
+++ b/config/build.ts
@@ -2,7 +2,8 @@
 
 import * as path from 'path';
 import { isNil, isString, isArray, isEmpty, sortBy, cloneDeep } from 'lodash';
-import * as chalk from 'chalk';
+import chalk from 'chalk';
+import escapeStringRegexp from 'escape-string-regexp';
 import { status } from './status';
 import {
     SnippetFileInput, SnippetProcessedData,
@@ -14,7 +15,6 @@ import { getShareableYaml } from './snippet.helpers';
 import { processLibraries } from './libraries.processor';
 import { startCase, groupBy, map } from 'lodash';
 import * as jsyaml from 'js-yaml';
-import escapeStringRegexp = require('escape-string-regexp');
 import * as fsx from 'fs-extra';
 
 
@@ -84,7 +84,7 @@ async function processSnippets(processedSnippets: Dictionary<SnippetProcessedDat
 
             const fullPath = path.resolve(dir, file.relativePath);
             const originalFileContents = fsx.readFileSync(fullPath).toString().trim();
-            let snippet = jsyaml.safeLoad(originalFileContents) as ISnippet;
+            let snippet = jsyaml.load(originalFileContents) as ISnippet;
 
             // Do validations & auto-corrections
             validateStringFieldNotEmptyOrThrow(snippet, 'name');
@@ -103,7 +103,11 @@ async function processSnippets(processedSnippets: Dictionary<SnippetProcessedDat
             const additionalFields: ISnippet = <any>{};
             additionalFields.id = snippet.id;
             additionalFields.api_set = snippet.api_set;
-            additionalFields.author = snippet.author;
+
+            // Only set author field if it has a value
+            if (snippet.author) {
+                additionalFields.author = snippet.author;
+            }
 
             if ((typeof (snippet as any).order) !== 'undefined') {
                 // # for ordering, if present (used for samples only)
@@ -130,11 +134,12 @@ async function processSnippets(processedSnippets: Dictionary<SnippetProcessedDat
                 accumulatedErrors.push(`One or more critical errors on ${file.relativePath}`);
             }
 
-            // Define dictionary of words in file.group that require special casing
+            // Define dictionary of words in file.group that require special casing or punctuation
             let dictionary = {
                 'Apis': 'APIs',
                 'Pivottable': 'PivotTable',
-                'Xml': 'XML'
+                'Xml': 'XML',
+                'On Premises': 'On-Premises'
             };
 
             let groupName = replaceUsingDictionary(dictionary, startCase(file.group));
@@ -163,6 +168,15 @@ async function processSnippets(processedSnippets: Dictionary<SnippetProcessedDat
 
         function replaceUsingDictionary(dictionary: { [key: string]: string }, originalName: string): string {
             let text = startCase(file.group);
+
+            // First try to replace multi-word phrases
+            for (const [key, value] of Object.entries(dictionary)) {
+                if (key.includes(' ') && text.includes(key)) {
+                    text = text.replace(new RegExp(key, 'g'), value);
+                }
+            }
+
+            // Then replace individual words
             let parts = text.split(' ').map(item => dictionary[item] || item);
             return parts.join(' ');
         }
@@ -220,10 +234,10 @@ async function processSnippets(processedSnippets: Dictionary<SnippetProcessedDat
 
     function validateOfficialOfficeJs(snippet: ISnippet, host: string, group: string, messages: any[]): void {
         const isOfficeSnippet = officeHosts.indexOf(host.toUpperCase()) >= 0;
-        const canonicalOfficeJsReference = 'https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js';
+        const canonicalOfficeJsReference = 'https://appsforoffice.microsoft.com/lib/1/hosted/office.js';
         const betaOfficeJsReference = 'https://appsforoffice.microsoft.com/lib/beta/hosted/office.js';
-        const officeDTS = '@types/office-js';
-        const betaOfficeDTS = '@types/office-js-preview';
+        const officeDTS = 'https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts';
+        const betaOfficeDTS = 'https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js-preview/index.d.ts';
 
         const officeJsReferences =
             snippet.libraries.split('\n')
@@ -233,14 +247,12 @@ async function processSnippets(processedSnippets: Dictionary<SnippetProcessedDat
         const officeDtsReferences =
             snippet.libraries.split('\n')
                 .map(reference => reference.trim())
-                .filter(reference => reference.match(/.*((@types\/office-js(-preview)?)|(office\.d\.ts))$/gi));
+                .filter(reference => reference.match(/.*((@types\/office-js(-preview)?)|((index|office)\.d\.ts))$/gi));
         /* Note: regex matches:
-            - @types/office-js
-            - @types/office-js-preview
-            - https://unpkg.com/etc/office.d.ts
+            - https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+            - https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js-preview/index.d.ts
            But not:
-            - @types/office-jsfake
-            - https://unpkg.com/etc/office.d.ts.ish
+            - https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.tsfake
             - office.d.ts.unrelated
          */
 
@@ -537,7 +549,7 @@ async function generatePlaylists(processedSnippets: Dictionary<SnippetProcessedD
             };
         });
 
-        let contents = jsyaml.safeDump(modifiedItems, {
+        let contents = jsyaml.dump(modifiedItems, {
             skipInvalid: true /* skip "undefined" (e.g., for "order" on some of the snippets) */
         });
 
diff --git a/config/helpers.ts b/config/helpers.ts
index 1306d2ad8..d0798f6bb 100644
--- a/config/helpers.ts
+++ b/config/helpers.ts
@@ -1,10 +1,9 @@
 import * as path from 'path';
 import * as fs from 'fs';
 import * as os from 'os';
-import * as chalk from 'chalk';
+import chalk from 'chalk';
 import * as jsyaml from 'js-yaml';
-import { console } from './status';
-import * as rimraf from 'rimraf';
+import { rimraf } from 'rimraf';
 import { isObject, isNil, isString, isEmpty } from 'lodash';
 
 export interface SnippetFileInput {
@@ -39,7 +38,7 @@ export interface SnippetProcessedData {
  * @param message Message of the banner.
  * @param chalkFunction Chalk color function.
  */
-export const banner = (title: string, message: string = null, chalkFn: chalk.ChalkChain = null) => {
+export const banner = (title: string, message: string = null, chalkFn: any = null) => {
     if (!chalkFn) {
         chalkFn = chalk.bold;
     }
@@ -55,7 +54,7 @@ export const banner = (title: string, message: string = null, chalkFn: chalk.Cha
 };
 
 export function getPrintableDetails(item: any, indent: number) {
-    const details = jsyaml.safeDump(item, {
+    const details = jsyaml.dump(item, {
         indent: 4,
         lineWidth: -1,
         skipInvalid: true
@@ -83,16 +82,11 @@ export const mkDir = (dir: string) =>
 * Deletes a folder.
 * @param dir An absolute path to the directory.
 */
-export const rmRf = (dir: string) =>
-    new Promise<string>((resolve, reject) => {
-        const location = path.resolve(dir);
-        rimraf(location, (err) => {
-            if (err) {
-                return reject(err);
-            }
-            return resolve(location);
-        });
-    });
+export const rmRf = async (dir: string): Promise<string> => {
+    const location = path.resolve(dir);
+    await rimraf(location);
+    return location;
+};
 
 /**
  * Load all the files and folders in a given directory.
diff --git a/config/snippet.helpers.ts b/config/snippet.helpers.ts
index f2574957d..449e40d59 100644
--- a/config/snippet.helpers.ts
+++ b/config/snippet.helpers.ts
@@ -91,7 +91,7 @@ function scrubCarriageReturns(snippet: ISnippet) {
 export function getScrubbedSnippet(snippet: ISnippet, keep: SnippetFieldType): ISnippet {
     let copy = {};
     forIn(snippetFields, (fieldType, fieldName) => {
-        if (fieldType & keep) {
+        if (fieldType & keep && snippet[fieldName] !== undefined) {
             copy[fieldName] = snippet[fieldName];
         }
     });
@@ -103,7 +103,7 @@ export function getShareableYaml(rawSnippet: ISnippet, additionalFields: ISnippe
     const snippet = { ...getScrubbedSnippet(rawSnippet, SnippetFieldType.PUBLIC), ...additionalFields };
     scrubCarriageReturns(snippet);
 
-    return jsyaml.safeDump(snippet, {
+    return jsyaml.dump(snippet, {
         indent: 4,
         lineWidth: -1,
         sortKeys: <any>((a, b) => snippetFieldSortingOrder[a] - snippetFieldSortingOrder[b]),
diff --git a/config/status.ts b/config/status.ts
index 44003309c..2f953ee73 100644
--- a/config/status.ts
+++ b/config/status.ts
@@ -1,6 +1,5 @@
-import * as nodeStatus from 'node-status';
-import * as chalk from 'chalk';
-import { isString, find, isNil, isArray } from 'lodash';
+import chalk from 'chalk';
+import { isString, isNil, isArray } from 'lodash';
 
 interface IStage {
     steps: any[];
@@ -13,16 +12,29 @@ export class Status {
     steps: { [step: string]: boolean } = {};
 
     get console() {
-        return nodeStatus.console();
+        // Return the global console object methods
+        return {
+            log: global.console.log.bind(global.console),
+            error: global.console.error.bind(global.console),
+            warn: global.console.warn.bind(global.console),
+            info: global.console.info.bind(global.console)
+        };
     }
 
     constructor() {
-        /* Initialize the status library */
-        this.stages = nodeStatus.addItem('stages', {
-            steps: []
-        });
+        /* Initialize the simple status system */
+        this.stages = {
+            steps: [],
+            count: 0,
+            doneStep: this.doneStep.bind(this)
+        };
+    }
 
-        nodeStatus.start();
+    private doneStep(completed: boolean, message?: string): void {
+        const symbol = completed ? chalk.green('✓') : chalk.red('✗');
+        if (message) {
+            global.console.log(`${symbol} ${message}`);
+        }
     }
 
     /**
@@ -37,22 +49,18 @@ export class Status {
         success = success && additionalDetails.findIndex(item => item instanceof Error) < 0;
 
         const messageArray = getDetailsArray();
+        const symbol = success ? chalk.green('✓') : chalk.red('✗');
 
-        if (messageArray.length === 0) {
-            this.stages.doneStep(success);
-        } else {
-            // Add a newline before
-            messageArray.splice(0, 0, '');
-            this.stages.doneStep(success, messageArray.join('\n    * ') + '\n');
-            //FIXME `${chalk.bold.red('WARNING: one of the messages above was an error')}`)
-        }
-
-        this.steps[stage] = false;
+        // Log the completion with symbol
+        global.console.log(`${symbol} ${stage}`);
 
-        if (!find(this.steps as any, (item) => item === true)) {
-            nodeStatus.stop();
+        if (messageArray.length > 0) {
+            messageArray.forEach(msg => {
+                global.console.log(`    * ${msg}`);
+            });
         }
 
+        this.steps[stage] = false;
 
         // Helper:
         function getDetailsArray() {
@@ -82,12 +90,13 @@ export class Status {
     }
 
     /**
-     * Add a new stage and complete the previous stage.
+     * Add a new stage and mark it as started.
      * @param stage Name of the stage.
      */
     add(stage: string) {
         this.stages.steps.push(stage);
         this.steps[stage] = true;
+        global.console.log(chalk.cyan(`○ ${stage}`));
     }
 }
 
diff --git a/package.json b/package.json
index 6628cb3e3..457b9471d 100644
--- a/package.json
+++ b/package.json
@@ -23,25 +23,22 @@
   },
   "homepage": "https://github.com/OfficeDev/office-js-snippets#readme",
   "dependencies": {
-    "chalk": "1.1.3",
-    "escape-string-regexp": "^2.0.0",
-    "exceljs": "^4.3.0",
-    "fs-extra": "3.0.1",
-    "js-yaml": "^3.13.1",
+    "chalk": "^4.1.2",
+    "escape-string-regexp": "^4.0.0",
+    "exceljs": "^4.4.0",
+    "fs-extra": "11.3.2",
+    "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
-    "node-status": "^1.0.0",
-    "rimraf": "^3.0.0",
-    "shelljs": "^0.8.5",
-    "yarn": "^1.22.19"
+    "rimraf": "^6.0.1",
+    "shelljs": "^0.10.0"
   },
   "devDependencies": {
-    "@types/chalk": "0.4.31",
-    "@types/fs-extra": "3.0.1",
-    "@types/js-yaml": "^3.12.0",
-    "@types/lodash": "^4.14.175",
-    "@types/node": "^11.10.5",
-    "@types/shelljs": "^0.8.3",
-    "tslint": "^6.1.0",
-    "typescript": "^3.3.3333"
+    "@types/fs-extra": "^11.0.4",
+    "@types/js-yaml": "^4.0.9",
+    "@types/lodash": "^4.17.20",
+    "@types/node": "^24.5.2",
+    "@types/shelljs": "^0.8.17",
+    "tslint": "^6.1.3",
+    "typescript": "^5.9.2"
   }
 }
diff --git a/playlists-prod/excel.yaml b/playlists-prod/excel.yaml
index 9a3f0428b..059d3893b 100644
--- a/playlists-prod/excel.yaml
+++ b/playlists-prod/excel.yaml
@@ -30,7 +30,7 @@
 - id: excel-chart-axis
   name: Axis details
   fileName: chart-axis.yaml
-  description: 'Gets, sets, and removes axis unit, label, and title in a chart.'
+  description: Gets, sets, and removes axis unit, label, and title in a chart.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-axis.yaml
   group: Chart
@@ -162,19 +162,37 @@
 - id: excel-chart-trendlines
   name: Trendlines
   fileName: chart-trendlines.yaml
-  description: 'Adds, gets, and formats trendlines in a chart.'
+  description: Adds, gets, and formats trendlines in a chart.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-trendlines.yaml
   group: Chart
   api_set:
     ExcelApi: '1.7'
+- id: excel-chart-data-labels
+  name: Data labels
+  fileName: chart-data-labels.yaml
+  description: Add and style data labels for your charts.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-labels.yaml
+  group: Chart
+  api_set:
+    ExcelApi: '1.19'
+- id: excel-chart-leader-lines
+  name: Leader lines
+  fileName: chart-leader-lines.yaml
+  description: Show and hide leader lines for chart labels.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-leader-lines.yaml
+  group: Chart
+  api_set:
+    ExcelApi: '1.19'
 - id: excel-comment-basics
   name: Comment basics
   fileName: comment-basics.yaml
-  description: 'Adds, edits, and removes comments.'
+  description: Adds, edits, and removes comments.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-basics.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-basics.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.10'
 - id: excel-comment-mentions
@@ -182,17 +200,17 @@
   fileName: comment-mentions.yaml
   description: Mentions someone in a comment.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-mentions.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-mentions.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.11'
 - id: excel-comment-replies
   name: Comment replies
   fileName: comment-replies.yaml
-  description: 'Adds, edits, and removes comment replies.'
+  description: Adds, edits, and removes comment replies.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-replies.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-replies.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.10'
 - id: excel-comment-resolution
@@ -200,10 +218,19 @@
   fileName: comment-resolution.yaml
   description: Resolves and reopens a comment thread.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-resolution.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-resolution.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.10'
+- id: excel-note-basics
+  name: Notes
+  fileName: excel-note-basics.yaml
+  description: Adds, edits, and removes notes.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/excel-note-basics.yaml
+  group: Comments And Notes
+  api_set:
+    ExcelApi: '1.18'
 - id: excel-range-conditional-formatting-basic
   name: Basic conditional formatting
   fileName: conditional-formatting-basic.yaml
@@ -278,10 +305,21 @@
   group: Custom Functions
   api_set:
     CustomFunctionsRuntime: 1.4
+- id: excel-custom-functions-custom-enum
+  name: Function with custom enums
+  fileName: custom-enum.yaml
+  description: >-
+    Use custom enums as parameters in a custom function that searches for
+    flights.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/16-custom-functions/custom-enum.yaml
+  group: Custom Functions
+  api_set:
+    CustomFunctionsRuntime: 1.5
 - id: excel-custom-xml-parts-create-set-get-and-delete-custom-xml-parts
   name: Using custom XML parts
   fileName: create-set-get-and-delete-custom-xml-parts.yaml
-  description: 'Creates, sets, gets, and deletes a custom XML part.'
+  description: Creates, sets, gets, and deletes a custom XML part.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml
   group: Custom XML Parts
@@ -296,12 +334,12 @@
   group: Custom XML Parts
   api_set:
     ExcelApi: '1.5'
-- id: excel-data-types-formatted-number
+- id: excel-data-types-doubles
   name: 'Data types: Formatted numbers'
   fileName: data-types-formatted-number.yaml
   description: >-
-    This sample shows how to set and get data types using the formatted number
-    properties.
+    This sample shows how to set and get formatted numbers using double data
+    types.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-formatted-number.yaml
   group: Data Types
@@ -374,6 +412,15 @@
   group: Data Types
   api_set:
     ExcelApi: '1.16'
+- id: excel-data-types-basic-types
+  name: Basic types with metadata
+  fileName: data-types-basic-types.yaml
+  description: This sample shows how to work with metadata on basic types.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-basic-types.yaml
+  group: Data Types
+  api_set:
+    ExcelApi: '1.19'
 - id: excel-data-validation
   name: Data validation
   fileName: data-validation.yaml
@@ -578,9 +625,9 @@
   api_set:
     ExcelAPI: '1.14'
 - id: excel-named-item-create-and-remove-named-item
-  name: 'Create, access, and remove'
+  name: Create, access, and remove
   fileName: create-and-remove-named-item.yaml
-  description: 'Creates, accesses, and removes named items in a worksheet.'
+  description: Creates, accesses, and removes named items in a worksheet.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/34-named-item/create-and-remove-named-item.yaml
   group: Named Item
@@ -738,16 +785,16 @@
 - id: excel-range-hyperlink
   name: Hyperlinks
   fileName: range-hyperlink.yaml
-  description: 'Creates, updates, and clears hyperlinks in a range.'
+  description: Creates, updates, and clears hyperlinks in a range.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-hyperlink.yaml
   group: Range
   api_set:
     ExcelApi: '1.7'
 - id: excel-range-insert-delete-and-clear-range
-  name: 'Insert, delete, and clear'
+  name: Insert, delete, and clear
   fileName: insert-delete-clear-range.yaml
-  description: 'Inserts, deletes, and clears a range.'
+  description: Inserts, deletes, and clears a range.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/insert-delete-clear-range.yaml
   group: Range
@@ -896,6 +943,15 @@
   group: Range
   api_set:
     ExcelAPI: '1.15'
+- id: excel-cell-controls
+  name: Checkboxes
+  fileName: range-cell-control.yaml
+  description: This sample shows how to add and remove checkboxes from a table.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-cell-control.yaml
+  group: Range
+  api_set:
+    ExcelApi: '1.18'
 - id: excel-shape-create-and-delete
   name: Create and delete geometric shapes
   fileName: shape-create-and-delete.yaml
@@ -952,6 +1008,15 @@
   group: Shape
   api_set:
     ExcelApi: '1.9'
+- id: excel-shape-get-active
+  name: Get active shape image
+  fileName: shape-get-active.yaml
+  description: Get an image of the active shape in your workbook.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-get-active.yaml
+  group: Shape
+  api_set:
+    ExcelApi: '1.19'
 - id: excel-table-add-rows-and-columns-to-a-table
   name: Add rows and columns
   fileName: add-rows-and-columns-to-a-table.yaml
@@ -1152,9 +1217,9 @@
   api_set:
     ExcelApi: '1.1'
 - id: excel-worksheet-add-delete-rename-move-worksheet
-  name: 'Add, delete, rename, and move worksheet'
+  name: Add, delete, rename, and move worksheet
   fileName: add-delete-rename-move-worksheet.yaml
-  description: 'Adds, deletes, renames, and moves a worksheet.'
+  description: Adds, deletes, renames, and moves a worksheet.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/add-delete-rename-move-worksheet.yaml
   group: Worksheet
diff --git a/playlists-prod/outlook.yaml b/playlists-prod/outlook.yaml
index 3831993f0..3aa483dcd 100644
--- a/playlists-prod/outlook.yaml
+++ b/playlists-prod/outlook.yaml
@@ -1,7 +1,7 @@
 - id: outlook-roaming-settings-roaming-settings
   name: Use add-in settings
   fileName: roaming-settings.yaml
-  description: 'Gets, sets, and saves add-in roaming settings'
+  description: Gets, sets, saves, and removes add-in roaming settings.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/10-roaming-settings/roaming-settings.yaml
   group: Roaming Settings
@@ -273,7 +273,7 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml
   group: Attachments
   api_set:
-    Mailbox: '1.1'
+    Mailbox: '1.8'
 - id: outlook-attachments-get-attachment-content
   name: Get attachment content
   fileName: get-attachment-content.yaml
@@ -295,7 +295,7 @@
 - id: outlook-categories-work-with-categories
   name: Work with item categories
   fileName: work-with-categories.yaml
-  description: 'Gets, adds, and removes categories assigned to the item.'
+  description: Gets, adds, and removes categories assigned to the item.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-categories.yaml
   group: Categories
@@ -304,7 +304,7 @@
 - id: outlook-categories-work-with-master-categories
   name: Work with the categories master list
   fileName: work-with-master-categories.yaml
-  description: 'Gets, adds, and removes categories in the master list for the mailbox.'
+  description: Gets, adds, and removes categories in the master list for the mailbox.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-master-categories.yaml
   group: Categories
@@ -387,7 +387,7 @@
 - id: outlook-display-items-display-reply-with-attachments
   name: Create a reply with attachments
   fileName: display-reply-with-attachments.yaml
-  description: Opens a reply message forms and adds sample attachments.
+  description: Opens a reply or reply-all message form and adds sample attachments.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
   group: Display Items
@@ -425,7 +425,7 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/65-delegates-and-shared-folders/get-shared-properties.yaml
   group: Delegates And Shared Folders
   api_set:
-    Mailbox: '1.8'
+    Mailbox: '1.13'
 - id: outlook-mime-headers-get-internet-headers-message-read
   name: Get internet headers
   fileName: get-internet-headers-message-read.yaml
@@ -447,7 +447,7 @@
   api_set:
     Mailbox: '1.8'
 - id: outlook-regex-matches-contextual
-  name: 'Get regex matches (Item Read, contextual)'
+  name: Get regex matches (Item Read, contextual)
   fileName: contextual.yaml
   description: Gets regex matches when the add-in is opened as a contextual add-in.
   rawUrl: >-
@@ -455,77 +455,96 @@
   group: Regex Matches
   api_set:
     Mailbox: '1.6'
+- id: outlook-events-drag-drop-item
+  name: Drag and drop an item into the task pane
+  fileName: drag-drop-item.yaml
+  description: >-
+    Handles the drag-and-drop event when a user drags and drops messages and
+    file attachments into the add-in task pane.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/80-events/drag-drop-item.yaml
+  group: Events
+  api_set:
+    Mailbox: '1.5'
 - id: outlook-tokens-and-service-calls-ids-and-urls
-  name: Endpoint URLs and item IDs
+  name: Endpoint URLs and item IDs in Exchange on-premises environments
   fileName: ids-and-urls.yaml
   description: >-
-    Retrieves and displays the Exchange Web Services (EWS) endpoint URL and item
-    IDs, and converts item IDs for different protocols.
+    Retrieves the Exchange Web Services (EWS) endpoint URL and item IDs and
+    converts item IDs for different protocols.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml
-  group: Tokens And Service Calls
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/ids-and-urls.yaml
+  group: Tokens For Exchange On-Premises
   api_set:
     Mailbox: '1.5'
 - id: outlook-tokens-and-service-calls-user-identity-token
-  name: Get a user identity token
+  name: Get a user identity token in Exchange on-premises environments
   fileName: user-identity-token.yaml
   description: >-
-    Gets a user identity token to use for authentication flows in an Exchange
+    Gets a user identity token for authentication flows in an Exchange
     on-premises environment.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/user-identity-token.yaml
-  group: Tokens And Service Calls
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/user-identity-token.yaml
+  group: Tokens For Exchange On-Premises
   api_set:
     Mailbox: '1.1'
 - id: outlook-tokens-and-service-calls-user-callback-token
-  name: Get a callback token
+  name: Get a callback token in Exchange on-premises environments
   fileName: user-callback-token.yaml
   description: >-
     Gets a callback token to call Outlook services from an add-in's backend
-    service.
+    service in an Exchange on-premises environment.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/user-callback-token.yaml
-  group: Tokens And Service Calls
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/user-callback-token.yaml
+  group: Tokens For Exchange On-Premises
   api_set:
     Mailbox: '1.1'
 - id: outlook-tokens-and-service-calls-make-ews-request-async
-  name: Get a message using Exchange Web Services (EWS)
+  name: >-
+    Get a message using Exchange Web Services (EWS) in Exchange on-premises
+    environments
   fileName: make-ews-request-async.yaml
-  description: Gets a message using EWS without any back-end code.
+  description: >-
+    Uses EWS in an Exchange on-premises environment to get a message without any
+    backend code.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/make-ews-request-async.yaml
-  group: Tokens And Service Calls
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/make-ews-request-async.yaml
+  group: Tokens For Exchange On-Premises
   api_set:
     Mailbox: '1.1'
 - id: outlook-tokens-and-service-calls-send-message-using-make-ews-request-async
-  name: Send a message using Exchange Web Services (EWS)
+  name: >-
+    Send a message using Exchange Web Services (EWS) in Exchange on-premises
+    environments
   fileName: send-message-using-make-ews-request-async.yaml
-  description: Sends a message using EWS without any back-end code.
+  description: >-
+    Uses EWS in an Exchange on-premises environment to send a message without
+    any backend code.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/send-message-using-make-ews-request-async.yaml
-  group: Tokens And Service Calls
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/send-message-using-make-ews-request-async.yaml
+  group: Tokens For Exchange On-Premises
   api_set:
     Mailbox: '1.1'
 - id: outlook-tokens-and-service-calls-get-icaluid-as-organizer
-  name: Get an appointment's iCalUId as the organizer
+  name: Get an appointment's iCalUId as the organizer (Exchange on-premises only)
   fileName: get-icaluid-as-organizer.yaml
   description: >-
-    Uses Exchange Web Services (EWS) to get an appointment's iCalUId value where
-    the user is the organizer.
+    Uses Exchange Web Services (EWS) in an Exchange on-premises environment to
+    get an appointment's iCalUId value where the user is the organizer.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-organizer.yaml
-  group: Tokens And Service Calls
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/get-icaluid-as-organizer.yaml
+  group: Tokens For Exchange On-Premises
   api_set:
     Mailbox: '1.3'
 - id: outlook-tokens-and-service-calls-get-icaluid-as-attendee
-  name: Get an appointment's iCalUId as an attendee
+  name: Get an appointment's iCalUId as an attendee (Exchange on-premises only)
   fileName: get-icaluid-as-attendee.yaml
   description: >-
-    Uses Exchange Web Services (EWS) to get an appointment's iCalUId value where
-    the user is an attendee.
+    Uses Exchange Web Services (EWS) in an Exchange on-premises environment to
+    get an appointment's iCalUId value where the user is an attendee.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-attendee.yaml
-  group: Tokens And Service Calls
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/get-icaluid-as-attendee.yaml
+  group: Tokens For Exchange On-Premises
   api_set:
     Mailbox: '1.1'
 - id: outlook-other-item-apis-get-subject-read
@@ -639,7 +658,7 @@
 - id: outlook-other-item-apis-get-add-remove-enhancedlocation-appointment
   name: Manage the locations of an appointment
   fileName: get-add-remove-enhancedlocation-appointment.yaml
-  description: 'Gets, adds, and removes locations on an appointment (enhancedLocation API).'
+  description: Gets, adds, and removes locations on an appointment (enhancedLocation API).
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml
   group: Other Item APIs
@@ -704,7 +723,7 @@
 - id: outlook-other-item-apis-session-data-apis
   name: Work with session data APIs (Compose)
   fileName: session-data-apis.yaml
-  description: 'Sets, gets, gets all, removes, and clears session data in Compose mode.'
+  description: Sets, gets, gets all, removes, and clears session data in Compose mode.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/session-data-apis.yaml
   group: Other Item APIs
@@ -720,7 +739,7 @@
   api_set:
     Mailbox: '1.13'
 - id: outlook-other-item-apis-get-message-properties
-  name: 'Get properties of selected messages (Message Compose, Message Read)'
+  name: Get properties of selected messages (Message Compose, Message Read)
   fileName: get-message-properties.yaml
   description: Gets the properties of multiple selected messages.
   rawUrl: >-
@@ -784,6 +803,24 @@
   group: Other Item APIs
   api_set:
     Mailbox: '1.8'
+- id: outlook-send-async
+  name: Send the current message or appointment (Compose)
+  fileName: send-async.yaml
+  description: Sends the current message or appointment.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/send-async.yaml
+  group: Other Item APIs
+  api_set:
+    Mailbox: '1.15'
+- id: outlook-other-item-apis-get-loaded-message-properties
+  name: Get properties of a loaded message (Message Compose, Message Read)
+  fileName: get-loaded-message-properties.yaml
+  description: Gets the properties of the currently loaded message.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-loaded-message-properties.yaml
+  group: Other Item APIs
+  api_set:
+    Mailbox: '1.15'
 - id: outlook-get-set-isalldayevent
   name: Get and set the isAllDayEvent property (Appointment Organizer)
   fileName: get-set-isalldayevent.yaml
@@ -793,6 +830,17 @@
   group: Preview APIs
   api_set:
     Mailbox: preview
+- id: outlook-get-token-status
+  name: Get the status of EWS tokens in an organization
+  fileName: get-token-status.yaml
+  description: >-
+    Gets the status of Exchange Web Services (EWS) callback tokens in an
+    organization.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/99-preview-apis/get-token-status.yaml
+  group: Preview APIs
+  api_set:
+    Mailbox: preview
 - id: outlook-set-displayed-body-subject
   name: Temporarily set the body or subject displayed in a message (Message Read)
   fileName: set-displayed-body-subject.yaml
diff --git a/playlists-prod/powerpoint.yaml b/playlists-prod/powerpoint.yaml
index 543434d41..1864b7799 100644
--- a/playlists-prod/powerpoint.yaml
+++ b/playlists-prod/powerpoint.yaml
@@ -37,7 +37,7 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/document/create-presentation.yaml
   group: Document
   api_set:
-    PowerPoint: '1.1'
+    PowerPointApi: '1.1'
 - id: powerpoint-hyperlinks-manage-hyperlinks
   name: Get hyperlinks
   fileName: manage-hyperlinks.yaml
@@ -71,8 +71,17 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/scenarios/searches-wikipedia-api.yaml
   group: Scenarios
   api_set: {}
+- id: powerpoint-shapes
+  name: Insert shape, line, and text box
+  fileName: shapes.yaml
+  description: Inserts geometric shapes, lines, and text boxes to a slide.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
+  group: Shapes
+  api_set:
+    PowerPointApi: '1.4'
 - id: powerpoint-shapes-get-set-shapes
-  name: 'Get, set, load, and save shapes'
+  name: Get, set, load, and save shapes
   fileName: get-set-shapes.yaml
   description: Get and set one or more selected shapes. Load and save one or more shapes.
   rawUrl: >-
@@ -83,21 +92,39 @@
 - id: powerpoint-shapes-get-shapes-by-type
   name: Select shapes by type
   fileName: get-shapes-by-type.yaml
-  description: 'Gets shapes in a slide based on their type, such as GeometricShape or Line.'
+  description: Gets shapes in a slide based on their type, such as GeometricShape or Line.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
   group: Shapes
   api_set:
     PowerPointApi: '1.4'
-- id: powerpoint-shapes
-  name: 'Insert shape, line, and text box'
-  fileName: shapes.yaml
-  description: 'Inserts geometric shapes, lines, and text boxes to a slide.'
+- id: powerpoint-shapes-add-modify-tables
+  name: Add and modify tables
+  fileName: add-modify-tables.yaml
+  description: Shows how to add and modify tables in a presentation.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
   group: Shapes
   api_set:
-    PowerPointApi: '1.4'
+    PowerPointApi: '1.8'
+- id: powerpoint-shapes-binding-to-shapes
+  name: Binding to shapes
+  fileName: binding-to-shapes.yaml
+  description: Shows how to create binding references for images and work with z-order.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml
+  group: Shapes
+  api_set:
+    PowerPointApi: '1.8'
+- id: powerpoint-shapes-group-ungroup-shapes
+  name: Group and ungroup shapes
+  fileName: group-ungroup-shapes.yaml
+  description: Shows how to create two shapes then group and ungroup them.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/group-ungroup-shapes.yaml
+  group: Shapes
+  api_set:
+    PowerPointApi: '1.8'
 - id: powerpoint-add-slides
   name: Add slides to a presentation
   fileName: add-slides.yaml
@@ -119,13 +146,13 @@
 - id: powerpoint-basics-get-slide-metadata
   name: Get slide metadata
   fileName: get-slide-metadata.yaml
-  description: 'Gets the title, index, and ID of the selected slides.'
+  description: Gets the title, index, and ID of the selected slides.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-slide-metadata.yaml
   group: Slide Management
   api_set: {}
 - id: powerpoint-slide-management-get-set-slides
-  name: 'Get, set, load, and save slides'
+  name: Get, set, load, and save slides
   fileName: get-set-slides.yaml
   description: Get and set one or more selected slides. Load and save one or more slides.
   rawUrl: >-
@@ -133,6 +160,15 @@
   group: Slide Management
   api_set:
     PowerPointApi: '1.5'
+- id: powerpoint-slide-management-export-import-slide
+  name: Export and import slide
+  fileName: export-import-slide.yaml
+  description: Shows how to export and import a slide.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/export-import-slide.yaml
+  group: Slide Management
+  api_set:
+    PowerPointApi: '1.8'
 - id: powerpoint-tags
   name: Work with tags
   fileName: tags.yaml
@@ -145,9 +181,9 @@
 - id: powerpoint-text-get-set-textrange
   name: Work with text range selections
   fileName: get-set-textrange.yaml
-  description: 'Get, set, load, and save text range selections.'
+  description: Get, set, load, and save text range selections.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
   group: Text
   api_set:
-    PowerPointApi: '1.5'
\ No newline at end of file
+    PowerPointApi: '1.8'
\ No newline at end of file
diff --git a/playlists-prod/word.yaml b/playlists-prod/word.yaml
index d5164def8..f55d4a138 100644
--- a/playlists-prod/word.yaml
+++ b/playlists-prod/word.yaml
@@ -30,7 +30,7 @@
 - id: word-content-controls-insert-and-change-content-controls
   name: Content control basics
   fileName: insert-and-change-content-controls.yaml
-  description: 'Inserts, updates, and retrieves content controls.'
+  description: Inserts, updates, and retrieves content controls.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-content-controls.yaml
   group: Content Controls
@@ -105,12 +105,30 @@
 - id: word-content-controls-insert-and-change-checkbox-content-control
   name: Manage checkbox content controls
   fileName: insert-and-change-checkbox-content-control.yaml
-  description: 'Inserts, updates, retrieves, and deletes checkbox content controls.'
+  description: Inserts, updates, retrieves, and deletes checkbox content controls.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
   group: Content Controls
   api_set:
     WordApi: '1.7'
+- id: word-content-controls-insert-and-change-combo-box-content-control
+  name: Manage combo box content controls
+  fileName: insert-and-change-combo-box-content-control.yaml
+  description: Inserts, updates, and deletes combo box content controls.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml
+  group: Content Controls
+  api_set:
+    WordApi: '1.9'
+- id: word-content-controls-insert-and-change-dropdown-list-content-control
+  name: Manage dropdown list content controls
+  fileName: insert-and-change-dropdown-list-content-control.yaml
+  description: Inserts, updates, and deletes dropdown list content controls.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml
+  group: Content Controls
+  api_set:
+    WordApi: '1.9'
 - id: word-content-controls-get-change-tracking-states
   name: Get change tracking states of content controls
   fileName: get-change-tracking-states.yaml
@@ -204,7 +222,7 @@
 - id: word-paragraph-paragraph-properties
   name: Paragraph properties
   fileName: paragraph-properties.yaml
-  description: 'Sets indentation, space between paragraphs, and other paragraph properties.'
+  description: Sets indentation, space between paragraphs, and other paragraph properties.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/paragraph-properties.yaml
   group: Paragraph
@@ -319,6 +337,15 @@
   group: Ranges
   api_set:
     WordApi: '1.3'
+- id: word-ranges-get-pages
+  name: Work with pages, panes, and windows
+  fileName: get-pages.yaml
+  description: Shows how to work with pages, panes, and windows.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
+  group: Ranges
+  api_set:
+    WordApiDesktop: '1.2'
 - id: word-tables-table-cell-access
   name: Create and access a table
   fileName: table-cell-access.yaml
@@ -350,6 +377,42 @@
   group: Tables
   api_set:
     WordApiDesktop: '1.1'
+- id: word-shapes-manage-shapes-text-boxes
+  name: Work with shapes and text boxes
+  fileName: manage-shapes-text-boxes.yaml
+  description: Shows how to work with shapes and text boxes.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
+  group: Shapes
+  api_set:
+    WordApiDesktop: '1.2'
+- id: word-shapes-manage-geometric-shapes
+  name: Manage geometric shapes
+  fileName: manage-geometric-shapes.yaml
+  description: Shows how to work with geometric shapes.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-geometric-shapes.yaml
+  group: Shapes
+  api_set:
+    WordApiDesktop: '1.2'
+- id: word-shapes-group-ungroup
+  name: Group and ungroup shapes
+  fileName: group-ungroup.yaml
+  description: Shows how to group and ungroup shapes.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
+  group: Shapes
+  api_set:
+    WordApiDesktop: '1.2'
+- id: word-shapes-manage-canvases
+  name: Work with canvases
+  fileName: manage-canvases.yaml
+  description: Shows how to work with canvases.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-canvases.yaml
+  group: Shapes
+  api_set:
+    WordApiDesktop: '1.2'
 - id: word-document-manage-body
   name: Manage body
   fileName: manage-body.yaml
@@ -535,33 +598,33 @@
   group: Scenarios
   api_set:
     WordApi: '1.3'
-- id: word-insert-and-change-combo-box-content-control
-  name: Manage combo box content controls
-  fileName: insert-and-change-combo-box-content-control.yaml
-  description: 'Inserts, updates, and deletes combo box content controls.'
+- id: word-scenarios-correlated-objects-pattern
+  name: Correlated objects pattern
+  fileName: correlated-objects-pattern.yaml
+  description: Shows the performance benefits of avoiding `context.sync` calls in a loop.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/correlated-objects-pattern.yaml
+  group: Scenarios
+  api_set:
+    WordApi: '1.4'
+- id: word-close-document-window
+  name: Close document window
+  fileName: close-document-window.yaml
+  description: Shows how to close document window.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/close-document-window.yaml
   group: Preview APIs
   api_set:
-    WordApi: '1.9'
+    WordApi: '1.10'
 - id: word-insert-and-change-content-controls
   name: Content control basics
   fileName: insert-and-change-content-controls.yaml
-  description: 'Inserts, updates, and retrieves content controls.'
+  description: Inserts, updates, and retrieves content controls.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-content-controls.yaml
   group: Preview APIs
   api_set:
-    WordApi: '1.9'
-- id: word-insert-and-change-dropdown-list-content-control
-  name: Manage dropdown list content controls
-  fileName: insert-and-change-dropdown-list-content-control.yaml
-  description: 'Inserts, updates, and deletes dropdown list content controls.'
-  rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml
-  group: Preview APIs
-  api_set:
-    WordApi: '1.9'
+    WordApi: '1.10'
 - id: word-manage-comments
   name: Manage comments
   fileName: manage-comments.yaml
@@ -572,4 +635,4 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
   group: Preview APIs
   api_set:
-    WordApi: '1.9'
\ No newline at end of file
+    WordApi: '1.10'
\ No newline at end of file
diff --git a/playlists/excel.yaml b/playlists/excel.yaml
index b10fa4406..5aa863380 100644
--- a/playlists/excel.yaml
+++ b/playlists/excel.yaml
@@ -30,7 +30,7 @@
 - id: excel-chart-axis
   name: Axis details
   fileName: chart-axis.yaml
-  description: 'Gets, sets, and removes axis unit, label, and title in a chart.'
+  description: Gets, sets, and removes axis unit, label, and title in a chart.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/10-chart/chart-axis.yaml
   group: Chart
@@ -162,19 +162,37 @@
 - id: excel-chart-trendlines
   name: Trendlines
   fileName: chart-trendlines.yaml
-  description: 'Adds, gets, and formats trendlines in a chart.'
+  description: Adds, gets, and formats trendlines in a chart.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/10-chart/chart-trendlines.yaml
   group: Chart
   api_set:
     ExcelApi: '1.7'
+- id: excel-chart-data-labels
+  name: Data labels
+  fileName: chart-data-labels.yaml
+  description: Add and style data labels for your charts.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/10-chart/chart-data-labels.yaml
+  group: Chart
+  api_set:
+    ExcelApi: '1.19'
+- id: excel-chart-leader-lines
+  name: Leader lines
+  fileName: chart-leader-lines.yaml
+  description: Show and hide leader lines for chart labels.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/10-chart/chart-leader-lines.yaml
+  group: Chart
+  api_set:
+    ExcelApi: '1.19'
 - id: excel-comment-basics
   name: Comment basics
   fileName: comment-basics.yaml
-  description: 'Adds, edits, and removes comments.'
+  description: Adds, edits, and removes comments.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comment/comment-basics.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comments-and-notes/comment-basics.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.10'
 - id: excel-comment-mentions
@@ -182,17 +200,17 @@
   fileName: comment-mentions.yaml
   description: Mentions someone in a comment.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comment/comment-mentions.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comments-and-notes/comment-mentions.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.11'
 - id: excel-comment-replies
   name: Comment replies
   fileName: comment-replies.yaml
-  description: 'Adds, edits, and removes comment replies.'
+  description: Adds, edits, and removes comment replies.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comment/comment-replies.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comments-and-notes/comment-replies.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.10'
 - id: excel-comment-resolution
@@ -200,10 +218,19 @@
   fileName: comment-resolution.yaml
   description: Resolves and reopens a comment thread.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comment/comment-resolution.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comments-and-notes/comment-resolution.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.10'
+- id: excel-note-basics
+  name: Notes
+  fileName: excel-note-basics.yaml
+  description: Adds, edits, and removes notes.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comments-and-notes/excel-note-basics.yaml
+  group: Comments And Notes
+  api_set:
+    ExcelApi: '1.18'
 - id: excel-range-conditional-formatting-basic
   name: Basic conditional formatting
   fileName: conditional-formatting-basic.yaml
@@ -278,10 +305,21 @@
   group: Custom Functions
   api_set:
     CustomFunctionsRuntime: 1.4
+- id: excel-custom-functions-custom-enum
+  name: Function with custom enums
+  fileName: custom-enum.yaml
+  description: >-
+    Use custom enums as parameters in a custom function that searches for
+    flights.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/16-custom-functions/custom-enum.yaml
+  group: Custom Functions
+  api_set:
+    CustomFunctionsRuntime: 1.5
 - id: excel-custom-xml-parts-create-set-get-and-delete-custom-xml-parts
   name: Using custom XML parts
   fileName: create-set-get-and-delete-custom-xml-parts.yaml
-  description: 'Creates, sets, gets, and deletes a custom XML part.'
+  description: Creates, sets, gets, and deletes a custom XML part.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml
   group: Custom XML Parts
@@ -296,12 +334,12 @@
   group: Custom XML Parts
   api_set:
     ExcelApi: '1.5'
-- id: excel-data-types-formatted-number
+- id: excel-data-types-doubles
   name: 'Data types: Formatted numbers'
   fileName: data-types-formatted-number.yaml
   description: >-
-    This sample shows how to set and get data types using the formatted number
-    properties.
+    This sample shows how to set and get formatted numbers using double data
+    types.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/20-data-types/data-types-formatted-number.yaml
   group: Data Types
@@ -374,6 +412,15 @@
   group: Data Types
   api_set:
     ExcelApi: '1.16'
+- id: excel-data-types-basic-types
+  name: Basic types with metadata
+  fileName: data-types-basic-types.yaml
+  description: This sample shows how to work with metadata on basic types.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/20-data-types/data-types-basic-types.yaml
+  group: Data Types
+  api_set:
+    ExcelApi: '1.19'
 - id: excel-data-validation
   name: Data validation
   fileName: data-validation.yaml
@@ -578,9 +625,9 @@
   api_set:
     ExcelAPI: '1.14'
 - id: excel-named-item-create-and-remove-named-item
-  name: 'Create, access, and remove'
+  name: Create, access, and remove
   fileName: create-and-remove-named-item.yaml
-  description: 'Creates, accesses, and removes named items in a worksheet.'
+  description: Creates, accesses, and removes named items in a worksheet.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/34-named-item/create-and-remove-named-item.yaml
   group: Named Item
@@ -738,16 +785,16 @@
 - id: excel-range-hyperlink
   name: Hyperlinks
   fileName: range-hyperlink.yaml
-  description: 'Creates, updates, and clears hyperlinks in a range.'
+  description: Creates, updates, and clears hyperlinks in a range.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/42-range/range-hyperlink.yaml
   group: Range
   api_set:
     ExcelApi: '1.7'
 - id: excel-range-insert-delete-and-clear-range
-  name: 'Insert, delete, and clear'
+  name: Insert, delete, and clear
   fileName: insert-delete-clear-range.yaml
-  description: 'Inserts, deletes, and clears a range.'
+  description: Inserts, deletes, and clears a range.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/42-range/insert-delete-clear-range.yaml
   group: Range
@@ -896,6 +943,15 @@
   group: Range
   api_set:
     ExcelAPI: '1.15'
+- id: excel-cell-controls
+  name: Checkboxes
+  fileName: range-cell-control.yaml
+  description: This sample shows how to add and remove checkboxes from a table.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/42-range/range-cell-control.yaml
+  group: Range
+  api_set:
+    ExcelApi: '1.18'
 - id: excel-shape-create-and-delete
   name: Create and delete geometric shapes
   fileName: shape-create-and-delete.yaml
@@ -952,6 +1008,15 @@
   group: Shape
   api_set:
     ExcelApi: '1.9'
+- id: excel-shape-get-active
+  name: Get active shape image
+  fileName: shape-get-active.yaml
+  description: Get an image of the active shape in your workbook.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/44-shape/shape-get-active.yaml
+  group: Shape
+  api_set:
+    ExcelApi: '1.19'
 - id: excel-table-add-rows-and-columns-to-a-table
   name: Add rows and columns
   fileName: add-rows-and-columns-to-a-table.yaml
@@ -1152,9 +1217,9 @@
   api_set:
     ExcelApi: '1.1'
 - id: excel-worksheet-add-delete-rename-move-worksheet
-  name: 'Add, delete, rename, and move worksheet'
+  name: Add, delete, rename, and move worksheet
   fileName: add-delete-rename-move-worksheet.yaml
-  description: 'Adds, deletes, renames, and moves a worksheet.'
+  description: Adds, deletes, renames, and moves a worksheet.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/54-worksheet/add-delete-rename-move-worksheet.yaml
   group: Worksheet
diff --git a/playlists/outlook.yaml b/playlists/outlook.yaml
index b40c8f50c..9b8f1814a 100644
--- a/playlists/outlook.yaml
+++ b/playlists/outlook.yaml
@@ -1,7 +1,7 @@
 - id: outlook-roaming-settings-roaming-settings
   name: Use add-in settings
   fileName: roaming-settings.yaml
-  description: 'Gets, sets, and saves add-in roaming settings'
+  description: Gets, sets, saves, and removes add-in roaming settings.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/10-roaming-settings/roaming-settings.yaml
   group: Roaming Settings
@@ -273,7 +273,7 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/40-attachments/attachments-compose.yaml
   group: Attachments
   api_set:
-    Mailbox: '1.1'
+    Mailbox: '1.8'
 - id: outlook-attachments-get-attachment-content
   name: Get attachment content
   fileName: get-attachment-content.yaml
@@ -295,7 +295,7 @@
 - id: outlook-categories-work-with-categories
   name: Work with item categories
   fileName: work-with-categories.yaml
-  description: 'Gets, adds, and removes categories assigned to the item.'
+  description: Gets, adds, and removes categories assigned to the item.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/45-categories/work-with-categories.yaml
   group: Categories
@@ -304,7 +304,7 @@
 - id: outlook-categories-work-with-master-categories
   name: Work with the categories master list
   fileName: work-with-master-categories.yaml
-  description: 'Gets, adds, and removes categories in the master list for the mailbox.'
+  description: Gets, adds, and removes categories in the master list for the mailbox.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/45-categories/work-with-master-categories.yaml
   group: Categories
@@ -387,7 +387,7 @@
 - id: outlook-display-items-display-reply-with-attachments
   name: Create a reply with attachments
   fileName: display-reply-with-attachments.yaml
-  description: Opens a reply message forms and adds sample attachments.
+  description: Opens a reply or reply-all message form and adds sample attachments.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/55-display-items/display-reply-with-attachments.yaml
   group: Display Items
@@ -425,7 +425,7 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/65-delegates-and-shared-folders/get-shared-properties.yaml
   group: Delegates And Shared Folders
   api_set:
-    Mailbox: '1.8'
+    Mailbox: '1.13'
 - id: outlook-mime-headers-get-internet-headers-message-read
   name: Get internet headers
   fileName: get-internet-headers-message-read.yaml
@@ -447,7 +447,7 @@
   api_set:
     Mailbox: '1.8'
 - id: outlook-regex-matches-contextual
-  name: 'Get regex matches (Item Read, contextual)'
+  name: Get regex matches (Item Read, contextual)
   fileName: contextual.yaml
   description: Gets regex matches when the add-in is opened as a contextual add-in.
   rawUrl: >-
@@ -455,77 +455,96 @@
   group: Regex Matches
   api_set:
     Mailbox: '1.6'
+- id: outlook-events-drag-drop-item
+  name: Drag and drop an item into the task pane
+  fileName: drag-drop-item.yaml
+  description: >-
+    Handles the drag-and-drop event when a user drags and drops messages and
+    file attachments into the add-in task pane.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/80-events/drag-drop-item.yaml
+  group: Events
+  api_set:
+    Mailbox: '1.5'
 - id: outlook-tokens-and-service-calls-ids-and-urls
-  name: Endpoint URLs and item IDs
+  name: Endpoint URLs and item IDs in Exchange on-premises environments
   fileName: ids-and-urls.yaml
   description: >-
-    Retrieves and displays the Exchange Web Services (EWS) endpoint URL and item
-    IDs, and converts item IDs for different protocols.
+    Retrieves the Exchange Web Services (EWS) endpoint URL and item IDs and
+    converts item IDs for different protocols.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml
-  group: Tokens And Service Calls
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-for-exchange-on-premises/ids-and-urls.yaml
+  group: Tokens For Exchange On-Premises
   api_set:
     Mailbox: '1.5'
 - id: outlook-tokens-and-service-calls-user-identity-token
-  name: Get a user identity token
+  name: Get a user identity token in Exchange on-premises environments
   fileName: user-identity-token.yaml
   description: >-
-    Gets a user identity token to use for authentication flows in an Exchange
+    Gets a user identity token for authentication flows in an Exchange
     on-premises environment.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/user-identity-token.yaml
-  group: Tokens And Service Calls
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-for-exchange-on-premises/user-identity-token.yaml
+  group: Tokens For Exchange On-Premises
   api_set:
     Mailbox: '1.1'
 - id: outlook-tokens-and-service-calls-user-callback-token
-  name: Get a callback token
+  name: Get a callback token in Exchange on-premises environments
   fileName: user-callback-token.yaml
   description: >-
     Gets a callback token to call Outlook services from an add-in's backend
-    service.
+    service in an Exchange on-premises environment.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/user-callback-token.yaml
-  group: Tokens And Service Calls
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-for-exchange-on-premises/user-callback-token.yaml
+  group: Tokens For Exchange On-Premises
   api_set:
     Mailbox: '1.1'
 - id: outlook-tokens-and-service-calls-make-ews-request-async
-  name: Get a message using Exchange Web Services (EWS)
+  name: >-
+    Get a message using Exchange Web Services (EWS) in Exchange on-premises
+    environments
   fileName: make-ews-request-async.yaml
-  description: Gets a message using EWS without any back-end code.
+  description: >-
+    Uses EWS in an Exchange on-premises environment to get a message without any
+    backend code.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/make-ews-request-async.yaml
-  group: Tokens And Service Calls
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-for-exchange-on-premises/make-ews-request-async.yaml
+  group: Tokens For Exchange On-Premises
   api_set:
     Mailbox: '1.1'
 - id: outlook-tokens-and-service-calls-send-message-using-make-ews-request-async
-  name: Send a message using Exchange Web Services (EWS)
+  name: >-
+    Send a message using Exchange Web Services (EWS) in Exchange on-premises
+    environments
   fileName: send-message-using-make-ews-request-async.yaml
-  description: Sends a message using EWS without any back-end code.
+  description: >-
+    Uses EWS in an Exchange on-premises environment to send a message without
+    any backend code.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/send-message-using-make-ews-request-async.yaml
-  group: Tokens And Service Calls
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-for-exchange-on-premises/send-message-using-make-ews-request-async.yaml
+  group: Tokens For Exchange On-Premises
   api_set:
     Mailbox: '1.1'
 - id: outlook-tokens-and-service-calls-get-icaluid-as-organizer
-  name: Get an appointment's iCalUId as the organizer
+  name: Get an appointment's iCalUId as the organizer (Exchange on-premises only)
   fileName: get-icaluid-as-organizer.yaml
   description: >-
-    Uses Exchange Web Services (EWS) to get an appointment's iCalUId value where
-    the user is the organizer.
+    Uses Exchange Web Services (EWS) in an Exchange on-premises environment to
+    get an appointment's iCalUId value where the user is the organizer.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-organizer.yaml
-  group: Tokens And Service Calls
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-for-exchange-on-premises/get-icaluid-as-organizer.yaml
+  group: Tokens For Exchange On-Premises
   api_set:
     Mailbox: '1.3'
 - id: outlook-tokens-and-service-calls-get-icaluid-as-attendee
-  name: Get an appointment's iCalUId as an attendee
+  name: Get an appointment's iCalUId as an attendee (Exchange on-premises only)
   fileName: get-icaluid-as-attendee.yaml
   description: >-
-    Uses Exchange Web Services (EWS) to get an appointment's iCalUId value where
-    the user is an attendee.
+    Uses Exchange Web Services (EWS) in an Exchange on-premises environment to
+    get an appointment's iCalUId value where the user is an attendee.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-attendee.yaml
-  group: Tokens And Service Calls
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-for-exchange-on-premises/get-icaluid-as-attendee.yaml
+  group: Tokens For Exchange On-Premises
   api_set:
     Mailbox: '1.1'
 - id: outlook-other-item-apis-get-subject-read
@@ -639,7 +658,7 @@
 - id: outlook-other-item-apis-get-add-remove-enhancedlocation-appointment
   name: Manage the locations of an appointment
   fileName: get-add-remove-enhancedlocation-appointment.yaml
-  description: 'Gets, adds, and removes locations on an appointment (enhancedLocation API).'
+  description: Gets, adds, and removes locations on an appointment (enhancedLocation API).
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml
   group: Other Item APIs
@@ -704,7 +723,7 @@
 - id: outlook-other-item-apis-session-data-apis
   name: Work with session data APIs (Compose)
   fileName: session-data-apis.yaml
-  description: 'Sets, gets, gets all, removes, and clears session data in Compose mode.'
+  description: Sets, gets, gets all, removes, and clears session data in Compose mode.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/90-other-item-apis/session-data-apis.yaml
   group: Other Item APIs
@@ -720,7 +739,7 @@
   api_set:
     Mailbox: '1.13'
 - id: outlook-other-item-apis-get-message-properties
-  name: 'Get properties of selected messages (Message Compose, Message Read)'
+  name: Get properties of selected messages (Message Compose, Message Read)
   fileName: get-message-properties.yaml
   description: Gets the properties of multiple selected messages.
   rawUrl: >-
@@ -784,6 +803,24 @@
   group: Other Item APIs
   api_set:
     Mailbox: '1.8'
+- id: outlook-send-async
+  name: Send the current message or appointment (Compose)
+  fileName: send-async.yaml
+  description: Sends the current message or appointment.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/90-other-item-apis/send-async.yaml
+  group: Other Item APIs
+  api_set:
+    Mailbox: '1.15'
+- id: outlook-other-item-apis-get-loaded-message-properties
+  name: Get properties of a loaded message (Message Compose, Message Read)
+  fileName: get-loaded-message-properties.yaml
+  description: Gets the properties of the currently loaded message.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/90-other-item-apis/get-loaded-message-properties.yaml
+  group: Other Item APIs
+  api_set:
+    Mailbox: '1.15'
 - id: outlook-get-set-isalldayevent
   name: Get and set the isAllDayEvent property (Appointment Organizer)
   fileName: get-set-isalldayevent.yaml
@@ -793,6 +830,17 @@
   group: Preview APIs
   api_set:
     Mailbox: preview
+- id: outlook-get-token-status
+  name: Get the status of EWS tokens in an organization
+  fileName: get-token-status.yaml
+  description: >-
+    Gets the status of Exchange Web Services (EWS) callback tokens in an
+    organization.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/99-preview-apis/get-token-status.yaml
+  group: Preview APIs
+  api_set:
+    Mailbox: preview
 - id: outlook-set-displayed-body-subject
   name: Temporarily set the body or subject displayed in a message (Message Read)
   fileName: set-displayed-body-subject.yaml
diff --git a/playlists/powerpoint.yaml b/playlists/powerpoint.yaml
index 72f4c2f59..46985f3bc 100644
--- a/playlists/powerpoint.yaml
+++ b/playlists/powerpoint.yaml
@@ -37,7 +37,7 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/document/create-presentation.yaml
   group: Document
   api_set:
-    PowerPoint: '1.1'
+    PowerPointApi: '1.1'
 - id: powerpoint-hyperlinks-manage-hyperlinks
   name: Get hyperlinks
   fileName: manage-hyperlinks.yaml
@@ -71,8 +71,17 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/scenarios/searches-wikipedia-api.yaml
   group: Scenarios
   api_set: {}
+- id: powerpoint-shapes
+  name: Insert shape, line, and text box
+  fileName: shapes.yaml
+  description: Inserts geometric shapes, lines, and text boxes to a slide.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/shapes.yaml
+  group: Shapes
+  api_set:
+    PowerPointApi: '1.4'
 - id: powerpoint-shapes-get-set-shapes
-  name: 'Get, set, load, and save shapes'
+  name: Get, set, load, and save shapes
   fileName: get-set-shapes.yaml
   description: Get and set one or more selected shapes. Load and save one or more shapes.
   rawUrl: >-
@@ -83,21 +92,39 @@
 - id: powerpoint-shapes-get-shapes-by-type
   name: Select shapes by type
   fileName: get-shapes-by-type.yaml
-  description: 'Gets shapes in a slide based on their type, such as GeometricShape or Line.'
+  description: Gets shapes in a slide based on their type, such as GeometricShape or Line.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/get-shapes-by-type.yaml
   group: Shapes
   api_set:
     PowerPointApi: '1.4'
-- id: powerpoint-shapes
-  name: 'Insert shape, line, and text box'
-  fileName: shapes.yaml
-  description: 'Inserts geometric shapes, lines, and text boxes to a slide.'
+- id: powerpoint-shapes-add-modify-tables
+  name: Add and modify tables
+  fileName: add-modify-tables.yaml
+  description: Shows how to add and modify tables in a presentation.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/shapes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/add-modify-tables.yaml
   group: Shapes
   api_set:
-    PowerPointApi: '1.4'
+    PowerPointApi: '1.8'
+- id: powerpoint-shapes-binding-to-shapes
+  name: Binding to shapes
+  fileName: binding-to-shapes.yaml
+  description: Shows how to create binding references for images and work with z-order.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/binding-to-shapes.yaml
+  group: Shapes
+  api_set:
+    PowerPointApi: '1.8'
+- id: powerpoint-shapes-group-ungroup-shapes
+  name: Group and ungroup shapes
+  fileName: group-ungroup-shapes.yaml
+  description: Shows how to create two shapes then group and ungroup them.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/group-ungroup-shapes.yaml
+  group: Shapes
+  api_set:
+    PowerPointApi: '1.8'
 - id: powerpoint-add-slides
   name: Add slides to a presentation
   fileName: add-slides.yaml
@@ -119,13 +146,13 @@
 - id: powerpoint-basics-get-slide-metadata
   name: Get slide metadata
   fileName: get-slide-metadata.yaml
-  description: 'Gets the title, index, and ID of the selected slides.'
+  description: Gets the title, index, and ID of the selected slides.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/get-slide-metadata.yaml
   group: Slide Management
   api_set: {}
 - id: powerpoint-slide-management-get-set-slides
-  name: 'Get, set, load, and save slides'
+  name: Get, set, load, and save slides
   fileName: get-set-slides.yaml
   description: Get and set one or more selected slides. Load and save one or more slides.
   rawUrl: >-
@@ -133,6 +160,15 @@
   group: Slide Management
   api_set:
     PowerPointApi: '1.5'
+- id: powerpoint-slide-management-export-import-slide
+  name: Export and import slide
+  fileName: export-import-slide.yaml
+  description: Shows how to export and import a slide.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/export-import-slide.yaml
+  group: Slide Management
+  api_set:
+    PowerPointApi: '1.8'
 - id: powerpoint-tags
   name: Work with tags
   fileName: tags.yaml
@@ -145,9 +181,9 @@
 - id: powerpoint-text-get-set-textrange
   name: Work with text range selections
   fileName: get-set-textrange.yaml
-  description: 'Get, set, load, and save text range selections.'
+  description: Get, set, load, and save text range selections.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/text/get-set-textrange.yaml
   group: Text
   api_set:
-    PowerPointApi: '1.5'
+    PowerPointApi: '1.8'
diff --git a/playlists/word.yaml b/playlists/word.yaml
index b5bcbf36e..d36dd59b1 100644
--- a/playlists/word.yaml
+++ b/playlists/word.yaml
@@ -30,7 +30,7 @@
 - id: word-content-controls-insert-and-change-content-controls
   name: Content control basics
   fileName: insert-and-change-content-controls.yaml
-  description: 'Inserts, updates, and retrieves content controls.'
+  description: Inserts, updates, and retrieves content controls.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/10-content-controls/insert-and-change-content-controls.yaml
   group: Content Controls
@@ -105,12 +105,30 @@
 - id: word-content-controls-insert-and-change-checkbox-content-control
   name: Manage checkbox content controls
   fileName: insert-and-change-checkbox-content-control.yaml
-  description: 'Inserts, updates, retrieves, and deletes checkbox content controls.'
+  description: Inserts, updates, retrieves, and deletes checkbox content controls.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
   group: Content Controls
   api_set:
     WordApi: '1.7'
+- id: word-content-controls-insert-and-change-combo-box-content-control
+  name: Manage combo box content controls
+  fileName: insert-and-change-combo-box-content-control.yaml
+  description: Inserts, updates, and deletes combo box content controls.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml
+  group: Content Controls
+  api_set:
+    WordApi: '1.9'
+- id: word-content-controls-insert-and-change-dropdown-list-content-control
+  name: Manage dropdown list content controls
+  fileName: insert-and-change-dropdown-list-content-control.yaml
+  description: Inserts, updates, and deletes dropdown list content controls.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml
+  group: Content Controls
+  api_set:
+    WordApi: '1.9'
 - id: word-content-controls-get-change-tracking-states
   name: Get change tracking states of content controls
   fileName: get-change-tracking-states.yaml
@@ -204,7 +222,7 @@
 - id: word-paragraph-paragraph-properties
   name: Paragraph properties
   fileName: paragraph-properties.yaml
-  description: 'Sets indentation, space between paragraphs, and other paragraph properties.'
+  description: Sets indentation, space between paragraphs, and other paragraph properties.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/25-paragraph/paragraph-properties.yaml
   group: Paragraph
@@ -319,6 +337,15 @@
   group: Ranges
   api_set:
     WordApi: '1.3'
+- id: word-ranges-get-pages
+  name: Work with pages, panes, and windows
+  fileName: get-pages.yaml
+  description: Shows how to work with pages, panes, and windows.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/35-ranges/get-pages.yaml
+  group: Ranges
+  api_set:
+    WordApiDesktop: '1.2'
 - id: word-tables-table-cell-access
   name: Create and access a table
   fileName: table-cell-access.yaml
@@ -350,6 +377,42 @@
   group: Tables
   api_set:
     WordApiDesktop: '1.1'
+- id: word-shapes-manage-shapes-text-boxes
+  name: Work with shapes and text boxes
+  fileName: manage-shapes-text-boxes.yaml
+  description: Shows how to work with shapes and text boxes.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/45-shapes/manage-shapes-text-boxes.yaml
+  group: Shapes
+  api_set:
+    WordApiDesktop: '1.2'
+- id: word-shapes-manage-geometric-shapes
+  name: Manage geometric shapes
+  fileName: manage-geometric-shapes.yaml
+  description: Shows how to work with geometric shapes.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/45-shapes/manage-geometric-shapes.yaml
+  group: Shapes
+  api_set:
+    WordApiDesktop: '1.2'
+- id: word-shapes-group-ungroup
+  name: Group and ungroup shapes
+  fileName: group-ungroup.yaml
+  description: Shows how to group and ungroup shapes.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/45-shapes/group-ungroup.yaml
+  group: Shapes
+  api_set:
+    WordApiDesktop: '1.2'
+- id: word-shapes-manage-canvases
+  name: Work with canvases
+  fileName: manage-canvases.yaml
+  description: Shows how to work with canvases.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/45-shapes/manage-canvases.yaml
+  group: Shapes
+  api_set:
+    WordApiDesktop: '1.2'
 - id: word-document-manage-body
   name: Manage body
   fileName: manage-body.yaml
@@ -535,33 +598,33 @@
   group: Scenarios
   api_set:
     WordApi: '1.3'
-- id: word-insert-and-change-combo-box-content-control
-  name: Manage combo box content controls
-  fileName: insert-and-change-combo-box-content-control.yaml
-  description: 'Inserts, updates, and deletes combo box content controls.'
+- id: word-scenarios-correlated-objects-pattern
+  name: Correlated objects pattern
+  fileName: correlated-objects-pattern.yaml
+  description: Shows the performance benefits of avoiding `context.sync` calls in a loop.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/90-scenarios/correlated-objects-pattern.yaml
+  group: Scenarios
+  api_set:
+    WordApi: '1.4'
+- id: word-close-document-window
+  name: Close document window
+  fileName: close-document-window.yaml
+  description: Shows how to close document window.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/99-preview-apis/close-document-window.yaml
   group: Preview APIs
   api_set:
-    WordApi: '1.9'
+    WordApi: '1.10'
 - id: word-insert-and-change-content-controls
   name: Content control basics
   fileName: insert-and-change-content-controls.yaml
-  description: 'Inserts, updates, and retrieves content controls.'
+  description: Inserts, updates, and retrieves content controls.
   rawUrl: >-
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/99-preview-apis/insert-and-change-content-controls.yaml
   group: Preview APIs
   api_set:
-    WordApi: '1.9'
-- id: word-insert-and-change-dropdown-list-content-control
-  name: Manage dropdown list content controls
-  fileName: insert-and-change-dropdown-list-content-control.yaml
-  description: 'Inserts, updates, and deletes dropdown list content controls.'
-  rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml
-  group: Preview APIs
-  api_set:
-    WordApi: '1.9'
+    WordApi: '1.10'
 - id: word-manage-comments
   name: Manage comments
   fileName: manage-comments.yaml
@@ -572,4 +635,4 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/99-preview-apis/manage-comments.yaml
   group: Preview APIs
   api_set:
-    WordApi: '1.9'
+    WordApi: '1.10'
diff --git a/private-samples/excel/20-chart/chart-title-ts.yaml b/private-samples/excel/20-chart/chart-title-ts.yaml
index 8c1033dae..4c046d4e0 100644
--- a/private-samples/excel/20-chart/chart-title-ts.yaml
+++ b/private-samples/excel/20-chart/chart-title-ts.yaml
@@ -130,7 +130,7 @@ style:
     language: css
 libraries: |
     // Office.js
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
 
     // CSS Libraries
     office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
@@ -141,6 +141,6 @@ libraries: |
     jquery@3.1.1
 
     // IntelliSense: @types/library or node_modules paths or URL to d.ts files
-    @types/office-js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
     @types/core-js
-    @types/jquery@3.3.1
\ No newline at end of file
+    @types/jquery@3.3.1
diff --git a/samples/excel/01-basics/basic-api-call-es5.yaml b/samples/excel/01-basics/basic-api-call-es5.yaml
index c0a56afb4..6c5480712 100644
--- a/samples/excel/01-basics/basic-api-call-es5.yaml
+++ b/samples/excel/01-basics/basic-api-call-es5.yaml
@@ -7,8 +7,8 @@ host: EXCEL
 api_set:
     ExcelApi: '1.1'
 script:
-    content: |
-        $("#run").on("click", () => tryCatch(run));
+    content: |-
+        document.getElementById("run").addEventListener("click", () => tryCatch(run));
 
         function run() {
             return Excel.run(function (context) {
@@ -33,11 +33,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p class="ms-font-m">This sample demonstrates basic Excel API calls.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p class="ms-font-m">Select some cells in the worksheet, then press <b>Highlight selected range</b>.</p>
@@ -59,15 +58,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/01-basics/basic-api-call.yaml b/samples/excel/01-basics/basic-api-call.yaml
index 09fb99340..3c2d0ae06 100644
--- a/samples/excel/01-basics/basic-api-call.yaml
+++ b/samples/excel/01-basics/basic-api-call.yaml
@@ -7,8 +7,8 @@ host: EXCEL
 api_set:
     ExcelApi: '1.1'
 script:
-    content: |
-        $("#run").on("click", () => tryCatch(run));
+    content: |-
+        document.getElementById("run").addEventListener("click", () => tryCatch(run));
 
         async function run() {
             await Excel.run(async (context) => {
@@ -38,7 +38,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p class="ms-font-m">This sample demonstrates basic Excel API calls.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p class="ms-font-m">Select some cells in the worksheet, then press <b>Highlight selected range</b>.</p>
@@ -60,15 +59,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/01-basics/basic-common-api-call.yaml b/samples/excel/01-basics/basic-common-api-call.yaml
index 796f8147c..cbb1a8992 100644
--- a/samples/excel/01-basics/basic-common-api-call.yaml
+++ b/samples/excel/01-basics/basic-common-api-call.yaml
@@ -7,8 +7,8 @@ host: EXCEL
 api_set:
     Selection: 1.1
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
 
         function run() {
             Office.context.document.getSelectedDataAsync(
@@ -24,11 +24,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample uses the Common APIs compatible with Office 2013.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Select a cell in the worksheet and press <b>Write to console</b> to see the contents of that cell in the console.</p>
@@ -39,7 +38,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -51,15 +50,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/10-chart/chart-axis-formatting.yaml b/samples/excel/10-chart/chart-axis-formatting.yaml
index 5b0abb97c..d6cec75ad 100644
--- a/samples/excel/10-chart/chart-axis-formatting.yaml
+++ b/samples/excel/10-chart/chart-axis-formatting.yaml
@@ -6,10 +6,10 @@ host: EXCEL
 api_set:
     ExcelApi: '1.8'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#format-horizontal-axis").on("click", () => tryCatch(formatHorizontalAxis));
-        $("#format-vertical-axis").on("click", () => tryCatch(formatVerticalAxis));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("format-horizontal-axis").addEventListener("click", () => tryCatch(formatHorizontalAxis));
+        document.getElementById("format-vertical-axis").addEventListener("click", () => tryCatch(formatVerticalAxis));
 
         async function formatHorizontalAxis() {
             await Excel.run(async (context) => {
@@ -118,25 +118,21 @@ script:
     language: typescript
 template:
     content: |-
-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to format the vertical and horizontal axis in a chart.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="format-horizontal-axis" class="ms-Button">
                 <span class="ms-Button-label">Format horizontal axis</span>
                 </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="format-vertical-axis" class="ms-Button">
                 <span class="ms-Button-label">Format vertical axis</span>
@@ -144,7 +140,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -157,14 +153,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/10-chart/chart-axis.yaml b/samples/excel/10-chart/chart-axis.yaml
index de744e337..788450358 100644
--- a/samples/excel/10-chart/chart-axis.yaml
+++ b/samples/excel/10-chart/chart-axis.yaml
@@ -1,18 +1,18 @@
 order: 1
 id: excel-chart-axis
 name: Axis details
-description: 'Gets, sets, and removes axis unit, label, and title in a chart.'
+description: Gets, sets, and removes axis unit, label, and title in a chart.
 host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
     content: |-
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#get-axis-unit").on("click", () => tryCatch(getAxisUnit));
-        $("#change-axis-unit").on("click", () => tryCatch(changeAxisUnit));
-        $("#remove-axis-label").on("click", () => tryCatch(removeAxisLabel));
-        $("#show-axis-label").on("click", () => tryCatch(showAxisLabel));
-        $("#set-axis-title").on("click", () => tryCatch(setAxisTitle));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("get-axis-unit").addEventListener("click", () => tryCatch(getAxisUnit));
+        document.getElementById("change-axis-unit").addEventListener("click", () => tryCatch(changeAxisUnit));
+        document.getElementById("remove-axis-label").addEventListener("click", () => tryCatch(removeAxisLabel));
+        document.getElementById("show-axis-label").addEventListener("click", () => tryCatch(showAxisLabel));
+        document.getElementById("set-axis-title").addEventListener("click", () => tryCatch(setAxisTitle));
 
         async function getAxisUnit() {
             await Excel.run(async (context) => {
@@ -173,39 +173,33 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to get, set, and remove axis unit, label and title in a chart.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-axis-unit" class="ms-Button">
                 <span class="ms-Button-label">Get axis unit</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="change-axis-unit" class="ms-Button">
                 <span class="ms-Button-label">Change axis unit</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="remove-axis-label" class="ms-Button">
                 <span class="ms-Button-label">Remove axis label</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="show-axis-label" class="ms-Button">
                 <span class="ms-Button-label">Show axis label</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="set-axis-title" class="ms-Button">
                 <span class="ms-Button-label">Set axis title</span>
@@ -213,7 +207,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -225,15 +219,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/10-chart/chart-bubble-chart.yaml b/samples/excel/10-chart/chart-bubble-chart.yaml
index 4ac73275c..9a80e9d81 100644
--- a/samples/excel/10-chart/chart-bubble-chart.yaml
+++ b/samples/excel/10-chart/chart-bubble-chart.yaml
@@ -7,10 +7,11 @@ host: EXCEL
 api_set:
     ExcelApi: '1.12'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#create-bubble-chart").on("click", () => tryCatch(createBubbleChart));
-        $("#get-chart-series-dimension-values").on("click", () => tryCatch(getChartSeriesDimensionValues));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("create-bubble-chart").addEventListener("click", () => tryCatch(createBubbleChart));
+        document.getElementById("get-chart-series-dimension-values").addEventListener("click", () => tryCatch(getChartSeriesDimensionValues));
+
         async function createBubbleChart() {
           await Excel.run(async (context) => {
             /*
@@ -57,6 +58,7 @@ script:
             await context.sync();
           });
         }
+
         async function getChartSeriesDimensionValues() {
           await Excel.run(async (context) => {
             const sheet = context.workbook.worksheets.getItem("Sample");
@@ -120,14 +122,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to create a bubble chart, with each chart series (or bubble) representing a single table row.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Create table</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="create-bubble-chart" class="ms-Button">
@@ -140,7 +140,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -152,15 +152,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/10-chart/chart-create-several-charts.yaml b/samples/excel/10-chart/chart-create-several-charts.yaml
index 4640f5dd2..f76ef24c9 100644
--- a/samples/excel/10-chart/chart-create-several-charts.yaml
+++ b/samples/excel/10-chart/chart-create-several-charts.yaml
@@ -1,23 +1,23 @@
 order: 5
 id: excel-chart-create-several-charts
 name: Create charts
-description: 'Creates column-clustered, line, XY-scatter, area, radar, pie, 3D, cylinder, and 100% charts.'
+description: Creates column-clustered, line, XY-scatter, area, radar, pie, 3D, cylinder, and 100% charts.
 author: OfficeDev
 host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#create-column-clustered-chart").on("click", () => tryCatch(createColumnClusteredChart));
-        $("#create-line-chart").on("click", () => tryCatch(createLineChart));
-        $("#create-xy-scatter-chart").on("click", () => tryCatch(createXYScatterChart));
-        $("#create-area-chart").on("click", () => tryCatch(createAreaStackedChart));
-        $("#create-radar-chart").on("click", () => tryCatch(createRadarFilledChart));
-        $("#create-pie-chart").on("click", () => tryCatch(createPieChart));
-        $("#create-3d-chart").on("click", () => tryCatch(create3DChart));
-        $("#create-cylinder-chart").on("click", () => tryCatch(createCylinderChart));
-        $("#create-bar-100-chart").on("click", () => tryCatch(createBar100Chart));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("create-column-clustered-chart").addEventListener("click", () => tryCatch(createColumnClusteredChart));
+        document.getElementById("create-line-chart").addEventListener("click", () => tryCatch(createLineChart));
+        document.getElementById("create-xy-scatter-chart").addEventListener("click", () => tryCatch(createXYScatterChart));
+        document.getElementById("create-area-chart").addEventListener("click", () => tryCatch(createAreaStackedChart));
+        document.getElementById("create-radar-chart").addEventListener("click", () => tryCatch(createRadarFilledChart));
+        document.getElementById("create-pie-chart").addEventListener("click", () => tryCatch(createPieChart));
+        document.getElementById("create-3d-chart").addEventListener("click", () => tryCatch(create3DChart));
+        document.getElementById("create-cylinder-chart").addEventListener("click", () => tryCatch(createCylinderChart));
+        document.getElementById("create-bar-100-chart").addEventListener("click", () => tryCatch(createBar100Chart));
 
         async function createColumnClusteredChart() {
           await Excel.run(async (context) => {
@@ -253,63 +253,53 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to create column-clustered, line, XY-scatter, area, radar, pie, 3D, cylinder, and 100% charts.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Create table</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="create-column-clustered-chart" class="ms-Button">
             <span class="ms-Button-label">Create a column clustered chart</span>
         </button>
             <p />
-
             <button id="create-line-chart" class="ms-Button">
             <span class="ms-Button-label">Create a line chart</span>
         </button>
             <p />
-
             <button id="create-xy-scatter-chart" class="ms-Button">
             <span class="ms-Button-label">Create an xy-scatter chart</span>
         </button>
             <p />
-
             <button id="create-area-chart" class="ms-Button">
             <span class="ms-Button-label">Create an area chart</span>
         </button>
             <p />
-
             <button id="create-radar-chart" class="ms-Button">
             <span class="ms-Button-label">Create a radar chart</span>
         </button>
             <p />
-
             <button id="create-pie-chart" class="ms-Button">
             <span class="ms-Button-label">Create a pie chart</span>
         </button>
             <p />
-
             <button id="create-3d-chart" class="ms-Button">
             <span class="ms-Button-label">Create a 3D chart</span>
         </button>
             <p />
-
             <button id="create-cylinder-chart" class="ms-Button">
             <span class="ms-Button-label">Create a cylinder chart</span>
         </button>
             <p />
-
             <button id="create-bar-100-chart" class="ms-Button">
             <span class="ms-Button-label">Create a bar-100% chart</span>
         </button>
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -321,15 +311,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/10-chart/chart-data-labels.yaml b/samples/excel/10-chart/chart-data-labels.yaml
new file mode 100644
index 000000000..5e3113b8c
--- /dev/null
+++ b/samples/excel/10-chart/chart-data-labels.yaml
@@ -0,0 +1,278 @@
+order: 16
+id: excel-chart-data-labels
+name: Data labels
+description: Add and style data labels for your charts.
+host: EXCEL
+api_set:
+    ExcelApi: '1.19'
+script:
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-data-labels").addEventListener("click", () => tryCatch(addDataLabels));
+        document.getElementById("style-data-label-substrings").addEventListener("click", () => tryCatch(styleDataLabelSubstrings));
+        document.getElementById("change-label-to-round-rectangle").addEventListener("click", () => tryCatch(changeLabelShapesToRoundRectangle));
+        document.getElementById("change-label-to-assorted").addEventListener("click", () => tryCatch(changeLabelShapesToAssorted));
+
+        // Define the worksheet name for the sample.
+        const sheetName = "Sample";
+
+        async function addDataLabels() {
+          // This function adds data labels to specific chart points 
+          // and sets their text and position.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const chart = sheet.charts.getItemAt(0);
+            await context.sync();
+
+            const series = chart.series.getItemAt(0);
+            series.points.load("dataLabel");
+            await context.sync();
+            
+            // Define properties for data label positioning and shape.
+            const labelProperties = [
+              {
+                top: 70,
+                geometricShapeType: Excel.GeometricShapeType.rectangle
+              },
+              {
+                top: 200,
+                geometricShapeType: Excel.GeometricShapeType.rectangle
+              }
+            ];
+
+            // Add data labels to specific chart points and set their text and properties.
+            for (let i = 0; i < dataLabelInfo.length; i++) {
+              const point = series.points.getItemAt(dataLabelInfo[i].index);
+              point.hasDataLabel = true;
+
+              const dataLabel = point.dataLabel;
+              dataLabel.text = dataLabelInfo[i].news;
+              dataLabel.set(labelProperties[i]);
+            }
+            await context.sync();
+          });
+        }
+
+        async function styleDataLabelSubstrings() {
+          // This function styles substrings within data label text using font formatting.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const chart = sheet.charts.getItemAt(0);
+            await context.sync();
+
+            const series = chart.series.getItemAt(0);
+            series.load("points");
+            await context.sync();
+
+            series.points.load("items");
+            await context.sync();
+
+            // Style a substring in the first data label.
+            let searchString = "sports";
+            let dataLabel = series.points.getItemAt(dataLabelInfo[0].index).dataLabel.load("text");
+            await context.sync();
+            let substringStart = dataLabel.text.indexOf(searchString);
+            let subLabel = dataLabel.getSubstring(substringStart, searchString.length);
+            subLabel.font.size = 13;
+            subLabel.font.bold = true;
+
+            // Style a substring in the second data label.
+            searchString = "'Titanic'";
+            dataLabel = series.points.getItemAt(dataLabelInfo[1].index).dataLabel.load("text");
+            await context.sync();
+
+            substringStart = dataLabel.text.indexOf(searchString);
+            subLabel = dataLabel.getSubstring(substringStart, searchString.length);
+            subLabel.font.name = "Calibri";
+            subLabel.font.size = 13;
+            subLabel.font.italic = true;
+            subLabel.font.color = "blue";
+            await context.sync();
+          });
+        }
+
+        async function changeLabelShapesToRoundRectangle() {
+          // This function changes the geometric shape of data labels to round rectangles.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const chart = sheet.charts.getItemAt(0);
+            await context.sync();
+
+            const series = chart.series.getItemAt(0);
+            series.load("*");
+            await context.sync();
+
+            series.points.load("*");
+            await context.sync();
+
+            // Set both data labels to round rectangle shape.
+            let dataLabel = series.points.getItemAt(dataLabelInfo[0].index).dataLabel;
+            dataLabel.geometricShapeType = Excel.GeometricShapeType.roundRectangle;
+
+            dataLabel = series.points.getItemAt(dataLabelInfo[1].index).dataLabel;
+            dataLabel.geometricShapeType = Excel.GeometricShapeType.roundRectangle;
+            await context.sync();
+          });
+        }
+
+        async function changeLabelShapesToAssorted() {
+          // This function changes data labels to different geometric shapes with custom formatting.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const chart = sheet.charts.getItemAt(0);
+            await context.sync();
+
+            const series = chart.series.getItemAt(0);
+            
+            // Set first data label to snip1Rectangle shape.
+            let dataLabel = series.points.getItemAt(dataLabelInfo[0].index).dataLabel;
+            dataLabel.geometricShapeType = Excel.GeometricShapeType.snip1Rectangle;
+
+            // Set second data label to snip2DiagonalRectangle shape with light green fill.
+            dataLabel = series.points.getItemAt(dataLabelInfo[1].index).dataLabel;
+            dataLabel.geometricShapeType = Excel.GeometricShapeType.snip2DiagonalRectangle;
+            dataLabel.format.fill.setSolidColor("90EE90");
+            await context.sync();
+          });
+        }
+
+        /** Create sample data and a line chart for the data labels demo. */
+        async function setup() {
+          await Excel.run(async (context) => {
+            context.workbook.worksheets.getItemOrNullObject(sheetName).delete();
+            const sheet = context.workbook.worksheets.add(sheetName);
+
+            // Add sample data to the worksheet.
+            const dataRange = sheet.getRange("A1:B32");
+            dataRange.values = sampleData;
+
+            sheet.activate();
+            await context.sync();
+
+            // Create a line chart with markers.
+            const chart = sheet.charts.add(Excel.ChartType.lineMarkers, dataRange);
+
+            // Position and format the chart.
+            chart.setPosition("D4", "Q25");
+            chart.legend.visible = false;
+            chart.title.text = "Product price";
+            chart.title.format.font.size = 20;
+            chart.axes.valueAxis.minimum = 80;
+
+            await context.sync();
+          });
+        }
+
+        /** Default helper for invoking an action and handling errors. */
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }   
+
+        // Save chart data labels as an object for use throughout the sample.
+        const dataLabelInfo = [
+          {
+            index: 11,
+            date: "7/12/2023",
+            news: "The city holds a sports event."
+          },
+          {
+            index: 20,
+            date: "7/21/2023",
+            news: "The movie 'Titanic' returns to the cinema."
+          }
+        ];
+
+        // Sample data for the chart.
+        const sampleData = [
+          ["Date", "Price"],
+          ["7/1/2023", 100],
+          ["7/2/2023", 96.71],
+          ["7/3/2023", 103.24],
+          ["7/4/2023", 109.09],
+          ["7/5/2023", 113.68],
+          ["7/6/2023", 118.68],
+          ["7/7/2023", 123.2],
+          ["7/8/2023", 135.05],
+          ["7/9/2023", 138.68],
+          ["7/10/2023", 129.63],
+          ["7/11/2023", 130.85],
+          ["7/12/2023", 135.71],
+          ["7/13/2023", 124.83],
+          ["7/14/2023", 118.94],
+          ["7/15/2023", 119.63],
+          ["7/16/2023", 127.2],
+          ["7/17/2023", 113.98],
+          ["7/18/2023", 110.32],
+          ["7/19/2023", 119.3],
+          ["7/20/2023", 120.36],
+          ["7/21/2023", 111.88],
+          ["7/22/2023", 118.88],
+          ["7/23/2023", 124.37],
+          ["7/24/2023", 119.53],
+          ["7/25/2023", 133.42],
+          ["7/26/2023", 125.67],
+          ["7/27/2023", 135.82],
+          ["7/28/2023", 137.87],
+          ["7/29/2023", 138.9],
+          ["7/30/2023", 139.36],
+          ["7/31/2023", 138.75]
+        ];
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            <p>This sample shows how to create data labels for charts and adjust the font and appearance of those labels.</p>
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+            <h3>Set up</h3>
+            <button id="setup" class="ms-Button">
+                <span class="ms-Button-label">Add data and create a chart</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Add data labels to the chart</h3>
+            <button id="add-data-labels" class="ms-Button">
+                <span class="ms-Button-label">Add data labels</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Style data labels</h3>
+            <button id="style-data-label-substrings" class="ms-Button">
+                <span class="ms-Button-label">Style data label substrings</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <button id="change-label-to-round-rectangle" class="ms-Button">
+                <span class="ms-Button-label">Change data label shapes</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <button id="change-label-to-assorted" class="ms-Button">
+                <span class="ms-Button-label">Change data label shapes</span>
+            </button>
+        </section>  
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/10-chart/chart-data-source.yaml b/samples/excel/10-chart/chart-data-source.yaml
index a0718392b..59e74e3f5 100644
--- a/samples/excel/10-chart/chart-data-source.yaml
+++ b/samples/excel/10-chart/chart-data-source.yaml
@@ -6,9 +6,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.15'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#log-chart-series-source").on("click", () => tryCatch(logChartSeriesSource));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("log-chart-series-source").addEventListener("click", () => tryCatch(logChartSeriesSource));
 
         async function logChartSeriesSource() {
           // This function retrieves the data source information of a chart series in the Sample worksheet.
@@ -84,7 +84,6 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to get information about the data source of a chart series.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <p>Add a product table and line chart to a sample worksheet.</p>
@@ -92,14 +91,13 @@ template:
             <span class="ms-Button-label">Add sample data</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <p>Log information to the console about the data source of the chart series <strong>Frames</strong>.</p>
           <button id="log-chart-series-source" class="ms-Button">
             <span class="ms-Button-label">Log data source</span>
           </button>
-        </section>  
+        </section>
     language: html
 style:
     content: |-
@@ -113,15 +111,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/10-chart/chart-data-table.yaml b/samples/excel/10-chart/chart-data-table.yaml
index cd4e84386..423e060b2 100644
--- a/samples/excel/10-chart/chart-data-table.yaml
+++ b/samples/excel/10-chart/chart-data-table.yaml
@@ -6,11 +6,11 @@ host: EXCEL
 api_set:
     ExcelApi: '1.14'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup)); 
-        $("#create-column-clustered-chart").on("click", () => tryCatch(createColumnClusteredChart)); 
-        $("#add-chart-data-table").on("click", () => tryCatch(addChartDataTable)); 
-        $("#format-chart-data-table").on("click", () => tryCatch(formatChartDataTable));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("create-column-clustered-chart").addEventListener("click", () => tryCatch(createColumnClusteredChart));
+        document.getElementById("add-chart-data-table").addEventListener("click", () => tryCatch(addChartDataTable));
+        document.getElementById("format-chart-data-table").addEventListener("click", () => tryCatch(formatChartDataTable));
 
         async function createColumnClusteredChart() {
           // This function creates a clustered column chart based on data from a table on
@@ -117,7 +117,6 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to add a data table to a chart and then format that data table.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <button id="setup" class="ms-Button">
@@ -128,7 +127,6 @@ template:
             <span class="ms-Button-label">Create chart</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="add-chart-data-table" class="ms-Button">
@@ -141,7 +139,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -152,12 +150,8 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/10-chart/chart-formatting.yaml b/samples/excel/10-chart/chart-formatting.yaml
index e4fb2448b..79a031e34 100644
--- a/samples/excel/10-chart/chart-formatting.yaml
+++ b/samples/excel/10-chart/chart-formatting.yaml
@@ -6,12 +6,12 @@ host: EXCEL
 api_set:
     ExcelApi: '1.8'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#format-chart").on("click", () => tryCatch(formatChart));
-        $("#show-datalabels").on("click", () => tryCatch(dataLabels));
-        $("#change-color").on("click", () => tryCatch(changeColor));
-        $("#clear").on("click", () => tryCatch(clearChart));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("format-chart").addEventListener("click", () => tryCatch(formatChart));
+        document.getElementById("show-datalabels").addEventListener("click", () => tryCatch(dataLabels));
+        document.getElementById("change-color").addEventListener("click", () => tryCatch(changeColor));
+        document.getElementById("clear").addEventListener("click", () => tryCatch(clearChart));
 
         async function formatChart() {
             await Excel.run(async (context) => {
@@ -174,14 +174,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to format different aspects of a chart.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
                 <button id="setup" class="ms-Button">
                     <span class="ms-Button-label">Add sample data</span>
                 </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
                 <button id="format-chart" class="ms-Button">
@@ -212,14 +210,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/10-chart/chart-leader-lines.yaml b/samples/excel/10-chart/chart-leader-lines.yaml
new file mode 100644
index 000000000..c49f07acb
--- /dev/null
+++ b/samples/excel/10-chart/chart-leader-lines.yaml
@@ -0,0 +1,185 @@
+order: 17
+id: excel-chart-leader-lines
+name: Leader lines
+description: Show and hide leader lines for chart labels.
+host: EXCEL
+api_set:
+    ExcelApi: '1.19'
+script:
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-data-labels").addEventListener("click", () => tryCatch(addDataLabels));
+        document.getElementById("hide-chart-leader-lines").addEventListener("click", () => tryCatch(hideChartLeaderLines));
+        document.getElementById("show-chart-leader-lines").addEventListener("click", () => tryCatch(showChartLeaderLines));
+        document.getElementById("change-leader-line-format").addEventListener("click", () => tryCatch(changeLeaderLineFormat));
+
+        const sheetName = "Sample";
+
+        async function addDataLabels() {
+          // The following code adds data labels to the chart and positions them to demonstrate leader lines.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const chart = sheet.charts.getItemAt(0);
+            const series = chart.series.getItemAt(0);
+            
+            // Enable data labels for the series. Leader lines are enabled by default.
+            series.hasDataLabels = true;
+            series.points.load("items");
+            await context.sync();
+            
+            // Load the top position for each data label.
+            series.points.items.forEach((point) => point.dataLabel.load("top"));
+            await context.sync();
+
+            // Move some data labels to create distance from their chart points.
+            const point1 = series.points.items[1]; 
+            const point2 = series.points.items[2]; 
+            point1.dataLabel.top -= 50; 
+            point2.dataLabel.top += 50;
+            
+            // Format the data labels.
+            series.dataLabels.geometricShapeType = Excel.GeometricShapeType.rectangle;
+            series.dataLabels.showCategoryName = true;
+            series.dataLabels.format.border.weight = 1;
+            
+            await context.sync();
+          });
+        }
+
+        async function hideChartLeaderLines() {
+          // The following code disables leader lines for chart data labels.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const chart = sheet.charts.getItemAt(0);
+            const series = chart.series.getItemAt(0);
+            const dataLabels = series.dataLabels;
+            
+            // Disable leader lines.
+            dataLabels.showLeaderLines = false;
+            
+            await context.sync();
+          });
+        }
+
+        async function showChartLeaderLines() {
+          // The following code enables leader lines for chart data labels.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const chart = sheet.charts.getItemAt(0);
+            const series = chart.series.getItemAt(0);
+            const dataLabels = series.dataLabels;
+            
+            // Enable leader lines.
+            dataLabels.showLeaderLines = true;
+
+            await context.sync();
+          });
+        }
+
+        async function changeLeaderLineFormat() {
+          // The following code changes the format of leader lines. It adjusts color, weight, and line style.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const chart = sheet.charts.getItemAt(0);
+            const series = chart.series.getItemAt(0);
+            const dataLabels = series.dataLabels;
+            const lineFormat = dataLabels.leaderLines.format;
+
+            // Set leader line formatting properties.
+            lineFormat.line.color = "blue";
+            lineFormat.line.weight = 2;
+            lineFormat.line.lineStyle = Excel.ChartLineStyle.dot;
+
+            await context.sync();
+          });
+        }
+
+        /** Create sample data and a line chart for the leader lines demo. */
+        async function setup() {
+          await Excel.run(async (context) => {
+            context.workbook.worksheets.getItemOrNullObject(sheetName).delete();
+            const sheet = context.workbook.worksheets.add(sheetName);
+
+            // Add sample data to the worksheet.
+            const dataRange = sheet.getRange("A1:C4");
+            dataRange.values = sampleData;
+
+            // Create a line chart.
+            const chart = sheet.charts.add(Excel.ChartType.line, dataRange);
+            chart.title.text = "Sales Quantity";
+            
+            sheet.activate();
+            await context.sync();
+          });
+        }
+
+        /** Default helper for invoking an action and handling errors. */
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+
+        /** Sample data for the chart. */
+        const sampleData = [
+          ["Type", "Product A", "Product B"],
+          ["Q1", 15, 20],
+          ["Q2", 22, 15],
+          ["Q3", 33, 47]
+        ];
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            <p>This sample shows how to add leader lines for data labels on your charts.</p>
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+            <h3>Set up</h3>
+            <button id="setup" class="ms-Button">
+                <span class="ms-Button-label">Create a chart</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <button id="add-data-labels" class="ms-Button">
+                <span class="ms-Button-label">Add data labels</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <button id="hide-chart-leader-lines" class="ms-Button">
+                <span class="ms-Button-label">Hide leader lines</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <button id="show-chart-leader-lines" class="ms-Button">
+                <span class="ms-Button-label">Show leader lines</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <button id="change-leader-line-format" class="ms-Button">
+                <span class="ms-Button-label">Change format of the leader lines</span>
+            </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/10-chart/chart-legend.yaml b/samples/excel/10-chart/chart-legend.yaml
index 9673970eb..5e2cabac5 100644
--- a/samples/excel/10-chart/chart-legend.yaml
+++ b/samples/excel/10-chart/chart-legend.yaml
@@ -6,9 +6,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#format-legend-font").on("click", () => tryCatch(formatLegendFont));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("format-legend-font").addEventListener("click", () => tryCatch(formatLegendFont));
 
         async function formatLegendFont() {
             await Excel.run(async (context) => {
@@ -103,14 +103,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to format the legend font in a chart.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="format-legend-font" class="ms-Button">
@@ -119,7 +117,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -131,15 +129,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/10-chart/chart-point.yaml b/samples/excel/10-chart/chart-point.yaml
index ca708f5b8..627984a03 100644
--- a/samples/excel/10-chart/chart-point.yaml
+++ b/samples/excel/10-chart/chart-point.yaml
@@ -6,9 +6,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |+
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#set-chart-point-color").on("click", () => tryCatch(setChartPointColor));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("set-chart-point-color").addEventListener("click", () => tryCatch(setChartPointColor));
 
         async function setChartPointColor() {
             await Excel.run(async (context) => {
@@ -79,33 +79,27 @@ script:
                 console.error(error);
             }
         }
-
-
-
     language: typescript
 template:
-    content: |+
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to set chart point color.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="set-chart-point-color" class="ms-Button">
                 <span class="ms-Button-label">Set chart point color</span>
             </button>
         </section>
-
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -117,15 +111,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/10-chart/chart-series-markers.yaml b/samples/excel/10-chart/chart-series-markers.yaml
index 61100ffe7..6d319a862 100644
--- a/samples/excel/10-chart/chart-series-markers.yaml
+++ b/samples/excel/10-chart/chart-series-markers.yaml
@@ -6,9 +6,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#set-markers").on("click", () => tryCatch(setMarkers));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("set-markers").addEventListener("click", () => tryCatch(setMarkers));
 
         async function setMarkers() {
             await Excel.run(async (context) => {
@@ -84,14 +84,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to set chart series marker properties.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="set-markers" class="ms-Button">
@@ -100,7 +98,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -113,14 +111,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/10-chart/chart-series-plotorder.yaml b/samples/excel/10-chart/chart-series-plotorder.yaml
index 6e522b338..69ce579ef 100644
--- a/samples/excel/10-chart/chart-series-plotorder.yaml
+++ b/samples/excel/10-chart/chart-series-plotorder.yaml
@@ -6,9 +6,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#order-series-plot").on("click", () => tryCatch(addSeries));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("order-series-plot").addEventListener("click", () => tryCatch(addSeries));
 
         async function addSeries() {
             await Excel.run(async (context) => {
@@ -91,18 +91,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to change the plot order of series in a chart.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="order-series-plot" class="ms-Button">
@@ -123,15 +121,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/10-chart/chart-series.yaml b/samples/excel/10-chart/chart-series.yaml
index 3b95c2cff..afec9522f 100644
--- a/samples/excel/10-chart/chart-series.yaml
+++ b/samples/excel/10-chart/chart-series.yaml
@@ -6,10 +6,10 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#add-series").on("click", () => tryCatch(addSeries));
-        $("#delete-series").on("click", () => tryCatch(deleteSeries));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-series").addEventListener("click", () => tryCatch(addSeries));
+        document.getElementById("delete-series").addEventListener("click", () => tryCatch(deleteSeries));
 
         async function addSeries() {
           await Excel.run(async (context) => {
@@ -106,21 +106,18 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to add and delete a series in a chart.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="add-series" class="ms-Button">
                 <span class="ms-Button-label">Add series</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="delete-series" class="ms-Button">
                 <span class="ms-Button-label">Delete series</span>
@@ -140,15 +137,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/10-chart/chart-title-format.yaml b/samples/excel/10-chart/chart-title-format.yaml
index 0100df1c0..b080b8b5f 100644
--- a/samples/excel/10-chart/chart-title-format.yaml
+++ b/samples/excel/10-chart/chart-title-format.yaml
@@ -6,12 +6,12 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#change-title-format").on("click", () => tryCatch(changeTitleFormat));
-        $("#change-title-substring").on("click", () => tryCatch(changeTitleSubstring));
-        $("#change-title-orientation").on("click", () => tryCatch(changeTitleOrientation));
-        $("#add-title-shadow").on("click", () => tryCatch(addTitleShadow));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("change-title-format").addEventListener("click", () => tryCatch(changeTitleFormat));
+        document.getElementById("change-title-substring").addEventListener("click", () => tryCatch(changeTitleSubstring));
+        document.getElementById("change-title-orientation").addEventListener("click", () => tryCatch(changeTitleOrientation));
+        document.getElementById("add-title-shadow").addEventListener("click", () => tryCatch(addTitleShadow));
 
         async function changeTitleFormat() {
             await Excel.run(async (context) => {
@@ -106,18 +106,16 @@ script:
         }
     language: typescript
 template:
-    content: |+
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to adjust format a chart's title.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="change-title-format" class="ms-Button">
@@ -133,7 +131,6 @@ template:
                 <span class="ms-Button-label">Add title shadow</span>
             </button>
         </section>
-
     language: html
 style:
     content: |-
@@ -148,15 +145,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/10-chart/chart-trendlines.yaml b/samples/excel/10-chart/chart-trendlines.yaml
index 02e173627..ee4b19ffe 100644
--- a/samples/excel/10-chart/chart-trendlines.yaml
+++ b/samples/excel/10-chart/chart-trendlines.yaml
@@ -1,17 +1,17 @@
 order: 14
 id: excel-chart-trendlines
 name: Trendlines
-description: 'Adds, gets, and formats trendlines in a chart.'
+description: Adds, gets, and formats trendlines in a chart.
 host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |+
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#add-trendline").on("click", () => tryCatch(addTrendline));
-        $("#get-trendline").on("click", () => tryCatch(getTrendline));
-        $("#get-trendline-color").on("click", () => tryCatch(getTrendlineColor));
-        $("#set-trendline-color").on("click", () => tryCatch(setTrendlineColor));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-trendline").addEventListener("click", () => tryCatch(addTrendline));
+        document.getElementById("get-trendline").addEventListener("click", () => tryCatch(getTrendline));
+        document.getElementById("get-trendline-color").addEventListener("click", () => tryCatch(getTrendlineColor));
+        document.getElementById("set-trendline-color").addEventListener("click", () => tryCatch(setTrendlineColor));
 
         async function addTrendline() {
             await Excel.run(async (context) => {
@@ -134,36 +134,29 @@ script:
                 console.error(error);
             }
         }
-
-
-
     language: typescript
 template:
     content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to add, get, and format trendlines in a chart.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="add-trendline" class="ms-Button">
                 <span class="ms-Button-label">Add trendline</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="get-trendline" class="ms-Button">
                 <span class="ms-Button-label">Get trendline</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="get-trendline-color" class="ms-Button">
                 <span class="ms-Button-label">Get trendline color</span>
@@ -188,15 +181,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/10-chart/create-doughnut-chart.yaml b/samples/excel/10-chart/create-doughnut-chart.yaml
index e1e0ac6eb..a9df8e856 100644
--- a/samples/excel/10-chart/create-doughnut-chart.yaml
+++ b/samples/excel/10-chart/create-doughnut-chart.yaml
@@ -7,10 +7,10 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#create-doughnut-chart").on("click", () => tryCatch(createChart));
-        $("#add-series").on("click", () => tryCatch(addSeries));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("create-doughnut-chart").addEventListener("click", () => tryCatch(createChart));
+        document.getElementById("add-series").addEventListener("click", () => tryCatch(addSeries));
 
         async function createChart() {
             Excel.run(async (context) => {
@@ -106,14 +106,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to create a doughnut chart.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Create table</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="create-doughnut-chart" class="ms-Button">
@@ -138,15 +136,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/12-comment/comment-basics.yaml b/samples/excel/12-comments-and-notes/comment-basics.yaml
similarity index 81%
rename from samples/excel/12-comment/comment-basics.yaml
rename to samples/excel/12-comments-and-notes/comment-basics.yaml
index 420412bbf..2739d6a08 100644
--- a/samples/excel/12-comment/comment-basics.yaml
+++ b/samples/excel/12-comments-and-notes/comment-basics.yaml
@@ -1,18 +1,18 @@
 order: 1
 id: excel-comment-basics
 name: Comment basics
-description: 'Adds, edits, and removes comments.'
+description: Adds, edits, and removes comments.
 host: EXCEL
 api_set:
     ExcelApi: '1.10'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#add-comment-to-selected-cell").on("click", () => tryCatch(addCommentToSelectedCell));
-        $("#add-comment-to-cell").on("click", () => tryCatch(addCommentToCell));
-        $("#get-comment-metadata").on("click", () => tryCatch(getCommentMetadata));
-        $("#edit-comment").on("click", () => tryCatch(editComment));
-        $("#delete-comment").on("click", () => tryCatch(deleteComment));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-comment-to-selected-cell").addEventListener("click", () => tryCatch(addCommentToSelectedCell));
+        document.getElementById("add-comment-to-cell").addEventListener("click", () => tryCatch(addCommentToCell));
+        document.getElementById("get-comment-metadata").addEventListener("click", () => tryCatch(getCommentMetadata));
+        document.getElementById("edit-comment").addEventListener("click", () => tryCatch(editComment));
+        document.getElementById("delete-comment").addEventListener("click", () => tryCatch(deleteComment));
 
         async function addCommentToSelectedCell() {
             await Excel.run(async (context) => {
@@ -129,15 +129,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/12-comment/comment-mentions.yaml b/samples/excel/12-comments-and-notes/comment-mentions.yaml
similarity index 84%
rename from samples/excel/12-comment/comment-mentions.yaml
rename to samples/excel/12-comments-and-notes/comment-mentions.yaml
index fba455834..7c4755829 100644
--- a/samples/excel/12-comment/comment-mentions.yaml
+++ b/samples/excel/12-comments-and-notes/comment-mentions.yaml
@@ -6,9 +6,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.11'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#add-comment-with-mention").on("click", () => tryCatch(addCommentWithMention));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-comment-with-mention").addEventListener("click", () => tryCatch(addCommentWithMention));
 
         async function addCommentWithMention() {
             await Excel.run(async (context) => {
@@ -88,15 +88,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/12-comment/comment-replies.yaml b/samples/excel/12-comments-and-notes/comment-replies.yaml
similarity index 83%
rename from samples/excel/12-comment/comment-replies.yaml
rename to samples/excel/12-comments-and-notes/comment-replies.yaml
index 2b6bbe10f..ae02603bd 100644
--- a/samples/excel/12-comment/comment-replies.yaml
+++ b/samples/excel/12-comments-and-notes/comment-replies.yaml
@@ -1,18 +1,18 @@
 order: 3
 id: excel-comment-replies
 name: Comment replies
-description: 'Adds, edits, and removes comment replies.'
+description: Adds, edits, and removes comment replies.
 host: EXCEL
 api_set:
     ExcelApi: '1.10'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#add-first-comment-reply").on("click", () => tryCatch(addFirstCommentReply));
-        $("#add-second-comment-reply").on("click", () => tryCatch(addSecondCommentReply));
-        $("#get-comment-reply-metadata").on("click", () => tryCatch(getCommentReplyMetadata));
-        $("#edit-comment-reply").on("click", () => tryCatch(editCommentReply));
-        $("#delete-comment-reply").on("click", () => tryCatch(deleteCommentReply));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-first-comment-reply").addEventListener("click", () => tryCatch(addFirstCommentReply));
+        document.getElementById("add-second-comment-reply").addEventListener("click", () => tryCatch(addSecondCommentReply));
+        document.getElementById("get-comment-reply-metadata").addEventListener("click", () => tryCatch(getCommentReplyMetadata));
+        document.getElementById("edit-comment-reply").addEventListener("click", () => tryCatch(editCommentReply));
+        document.getElementById("delete-comment-reply").addEventListener("click", () => tryCatch(deleteCommentReply));
 
         async function addFirstCommentReply() {
             await Excel.run(async (context) => {
@@ -150,15 +150,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/12-comment/comment-resolution.yaml b/samples/excel/12-comments-and-notes/comment-resolution.yaml
similarity index 81%
rename from samples/excel/12-comment/comment-resolution.yaml
rename to samples/excel/12-comments-and-notes/comment-resolution.yaml
index 6b5bcaa14..bfb60392a 100644
--- a/samples/excel/12-comment/comment-resolution.yaml
+++ b/samples/excel/12-comments-and-notes/comment-resolution.yaml
@@ -6,11 +6,11 @@ host: EXCEL
 api_set:
     ExcelApi: '1.10'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#add-comment").on("click", () => tryCatch(addComment));
-        $("#resolve-comment").on("click", () => tryCatch(resolveComment));
-        $("#reopen-comment").on("click", () => tryCatch(reopenComment));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-comment").addEventListener("click", () => tryCatch(addComment));
+        document.getElementById("resolve-comment").addEventListener("click", () => tryCatch(resolveComment));
+        document.getElementById("reopen-comment").addEventListener("click", () => tryCatch(reopenComment));
 
         async function addComment() {
             await Excel.run(async (context) => {
@@ -99,15 +99,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/12-comments-and-notes/excel-note-basics.yaml b/samples/excel/12-comments-and-notes/excel-note-basics.yaml
new file mode 100644
index 000000000..582c5d52c
--- /dev/null
+++ b/samples/excel/12-comments-and-notes/excel-note-basics.yaml
@@ -0,0 +1,162 @@
+order: 5
+id: excel-note-basics
+name: Notes
+description: Adds, edits, and removes notes.
+host: EXCEL
+api_set:
+    ExcelApi: '1.18'
+script:
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-note-to-selected-cell").addEventListener("click", () => tryCatch(addNoteToSelectedCell));
+        document.getElementById("add-note-to-cell").addEventListener("click", () => tryCatch(addNoteToCell));
+        document.getElementById("change-note-visibility").addEventListener("click", () => tryCatch(changeNoteVisibility));
+        document.getElementById("edit-note-content").addEventListener("click", () => tryCatch(editNoteContent));
+        document.getElementById("edit-note-size").addEventListener("click", () => tryCatch(editNoteSize));
+        document.getElementById("delete-note").addEventListener("click", () => tryCatch(deleteNote));
+
+        async function addNoteToSelectedCell() {
+          // This function adds a note to the selected cell.
+          await Excel.run(async (context) => {
+            const selectedRange = context.workbook.getSelectedRange();
+
+            // Note that an InvalidArgument error is thrown if multiple cells are selected.
+            context.workbook.notes.add(selectedRange, "The first note.");
+            await context.sync();
+          });
+        }
+
+        async function addNoteToCell() {
+          // This function adds a note to cell A2. 
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem("Notes");
+
+            // Note that an InvalidArgument error is thrown if multiple cells are passed to `notes.add`.
+            sheet.notes.add("A2", "The second note.");
+            await context.sync();
+          });
+        }
+
+        async function changeNoteVisibility() {
+          // This function sets the note on cell A1 to visible.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem("Notes");
+            const firstNote = sheet.notes.getItem("A1");
+
+            firstNote.load();
+            await context.sync();
+
+            firstNote.visible = true;
+          });
+        }
+
+        async function editNoteContent() {
+          // This function changes the content in the first note.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem("Notes");
+            const note = sheet.notes.getItemAt(0);
+            note.content = "Changing the content of the first note.";
+            await context.sync();
+          });
+        }
+
+        async function editNoteSize() {
+          // This function changes the height and width of the first note.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem("Notes");
+            const note = sheet.notes.getItemAt(0);
+            note.height = 200;
+            note.width = 400;
+            await context.sync();
+          });
+        }
+
+        async function deleteNote() {
+          // This function deletes the note from cell A2.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem("Notes");
+            const note = sheet.notes.getItem("A2");
+            note.delete();
+
+            await context.sync();
+          });
+        }
+
+        /** Set up Sample worksheet. */
+        async function setup() {
+          await Excel.run(async (context) => {
+            context.workbook.worksheets.getItemOrNullObject("Notes").delete();
+            const sheet = context.workbook.worksheets.add("Notes");
+
+            sheet.activate();
+            await context.sync();
+          });
+        }
+
+        /** Default helper for invoking an action and handling errors. */
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+          <p>This sample shows how to work with notes: Add notes, edit content, size, and visibility, and remove notes.</p>
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+          <h3>Setup</h3>
+          <button id="setup" class="ms-Button">
+            <span class="ms-Button-label">Create a worksheet</span>
+          </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+          <h3>Try it out</h3>
+          <button id="add-note-to-selected-cell" class="ms-Button">
+            <span class="ms-Button-label">Add a note to selected cell</span>
+          </button>
+          <p />
+          <button id="add-note-to-cell" class="ms-Button">
+              <span class="ms-Button-label">Add a note to cell A2</span>
+          </button>
+          <p />
+          <button id="change-note-visibility" class="ms-Button">
+              <span class="ms-Button-label">Make first note visible</span>
+          </button>
+          <p />
+          <button id="edit-note-content" class="ms-Button">
+              <span class="ms-Button-label">Edit content of first note</span>
+          </button>
+          <p />
+          <button id="edit-note-size" class="ms-Button">
+              <span class="ms-Button-label">Edit size of first note</span>
+          </button>
+          <p />
+          <button id="delete-note" class="ms-Button">
+            <span class="ms-Button-label">Remove note at A2</span>
+          </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/14-conditional-formatting/conditional-formatting-advanced.yaml b/samples/excel/14-conditional-formatting/conditional-formatting-advanced.yaml
index 750e5cbac..7e207e842 100644
--- a/samples/excel/14-conditional-formatting/conditional-formatting-advanced.yaml
+++ b/samples/excel/14-conditional-formatting/conditional-formatting-advanced.yaml
@@ -6,12 +6,12 @@ host: EXCEL
 api_set:
     ExcelApi: '1.6'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#apply-conditional-formats-default-priority").on("click", () => tryCatch(applyConditionalFormatsWithDefaultPriority));
-        $("#apply-conditional-formats-explicit-priority").on("click", () => tryCatch(applyPrioritizedConditionalFormats));
-        $("#apply-conditional-formats-stop-if-true").on("click", () => tryCatch(applyPrioritizedConditionalFormatsWithStopOnTrue));
-        $("#remove-conditional-format").on("click", () => tryCatch(removeConditionalFormat));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("apply-conditional-formats-default-priority").addEventListener("click", () => tryCatch(applyConditionalFormatsWithDefaultPriority));
+        document.getElementById("apply-conditional-formats-explicit-priority").addEventListener("click", () => tryCatch(applyPrioritizedConditionalFormats));
+        document.getElementById("apply-conditional-formats-stop-if-true").addEventListener("click", () => tryCatch(applyPrioritizedConditionalFormatsWithStopOnTrue));
+        document.getElementById("remove-conditional-format").addEventListener("click", () => tryCatch(removeConditionalFormat));
 
 
         async function applyConditionalFormatsWithDefaultPriority() {
@@ -178,19 +178,17 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section id="main" class="ms-Fabric ms-font-m">
             <p>This sample shows how to use priorities to work with conditional formatting of ranges when more than one conditional format
                 applies to some cells.</p>
         </section>
-
         <section id="main" class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section id="main" class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <label class="ms-font-s">Apply two conditional formats which both affect negative numbers (among others) and assign conflicting font colors. The color specified by the format that is applied first will take effect. Negative numbers will be bold red with a green background.</label>
@@ -224,15 +222,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml b/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
index c69152ed1..5c6d0b0e3 100644
--- a/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
+++ b/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -7,17 +7,17 @@ api_set:
     ExcelApi: '1.6'
 script:
     content: |-
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#apply-color-scale-format").on("click", () => tryCatch(applyColorScaleFormat));
-        $("#apply-preset-format").on("click", () => tryCatch(applyPresetFormat));
-        $("#apply-databar-format").on("click", () => tryCatch(applyDataBarFormat));
-        $("#apply-icon-set-format").on("click", () => tryCatch(applyIconSetFormat));
-        $("#apply-text-format").on("click", () => tryCatch(applyTextFormat));
-        $("#apply-cell-value-format").on("click", () => tryCatch(applyCellValueFormat));
-        $("#apply-top-bottom-format").on("click", () => tryCatch(applyTopBottomFormat));
-        $("#apply-custom-format").on("click", () => tryCatch(applyCustomFormat));
-        $("#list-conditional-formats").on("click", () => tryCatch(listConditionalFormats));
-        $("#clear-all-conditional-formats").on("click", () => tryCatch(clearAllConditionalFormats));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("apply-color-scale-format").addEventListener("click", () => tryCatch(applyColorScaleFormat));
+        document.getElementById("apply-preset-format").addEventListener("click", () => tryCatch(applyPresetFormat));
+        document.getElementById("apply-databar-format").addEventListener("click", () => tryCatch(applyDataBarFormat));
+        document.getElementById("apply-icon-set-format").addEventListener("click", () => tryCatch(applyIconSetFormat));
+        document.getElementById("apply-text-format").addEventListener("click", () => tryCatch(applyTextFormat));
+        document.getElementById("apply-cell-value-format").addEventListener("click", () => tryCatch(applyCellValueFormat));
+        document.getElementById("apply-top-bottom-format").addEventListener("click", () => tryCatch(applyTopBottomFormat));
+        document.getElementById("apply-custom-format").addEventListener("click", () => tryCatch(applyCustomFormat));
+        document.getElementById("list-conditional-formats").addEventListener("click", () => tryCatch(listConditionalFormats));
+        document.getElementById("clear-all-conditional-formats").addEventListener("click", () => tryCatch(clearAllConditionalFormats));
 
         async function applyColorScaleFormat() {
             await Excel.run(async (context) => {
@@ -189,7 +189,9 @@ script:
 
                 await context.sync();
 
-                $(".conditional-formats").hide();
+                document.querySelectorAll(".conditional-formats").forEach(element => {
+                    element.style.display = "none";
+                });
             });
         }
 
@@ -277,14 +279,12 @@ template:
         <section id="main" class="ms-Fabric ms-font-m">
             <p>This sample shows how to apply conditional formatting to ranges.</p>
         </section>
-
         <section id="main" class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section id="main" class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <label class="ms-font-s">Add color scale to temperature table.</label>
@@ -341,15 +341,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/16-custom-functions/basic-function.yaml b/samples/excel/16-custom-functions/basic-function.yaml
index 3194e8ce9..918cd2354 100644
--- a/samples/excel/16-custom-functions/basic-function.yaml
+++ b/samples/excel/16-custom-functions/basic-function.yaml
@@ -18,6 +18,6 @@ script:
         }
     language: typescript
 libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-    core-js@2.4.1/client/core.min.js
\ No newline at end of file
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+    core-js@2.4.1/client/core.min.js
diff --git a/samples/excel/16-custom-functions/custom-enum.yaml b/samples/excel/16-custom-functions/custom-enum.yaml
new file mode 100644
index 000000000..5eb140f97
--- /dev/null
+++ b/samples/excel/16-custom-functions/custom-enum.yaml
@@ -0,0 +1,90 @@
+order: 7
+id: excel-custom-functions-custom-enum
+name: Function with custom enums
+description: Use custom enums as parameters in a custom function that searches for flights.
+host: EXCEL
+api_set:
+    CustomFunctionsRuntime: 1.5
+script:
+    content: |
+        /**
+         * A custom enum representing different airports.
+         * @customenum {string}
+         */
+        enum Airports {
+          // Beijing is the capital of China.
+          Beijing = "PEK",
+
+          // Shanghai is a major financial hub in China.
+          Shanghai = "PVG",
+
+          // Seattle is known for its tech industry and the Space Needle.
+          Seattle = "SEA",
+
+          // San Francisco is famous for the Golden Gate Bridge and tech startups.
+          SanFrancisco = "SFO",
+
+          // Tokyo is the capital of Japan and known for its modern architecture and culture.
+          Tokyo = "HND"
+        }
+
+        /**
+         * A custom enum representing the days of the week.
+         * @customenum {number}
+         */
+        enum DayOfWeek {
+          Monday = 1,
+          Tuesday = 2,
+          Wednesday = 3,
+          Thursday = 4,
+          Friday = 5,
+          Saturday = 6,
+          Sunday = 7
+        }
+
+        /**
+         * A function that shows how to use custom enums to get a flight schedule.
+         * @customfunction
+         * @param {Airports} departure Where the flight departs.
+         * @param {Airports} destination Where the flight arrives.
+         * @param {DayOfWeek[]} day Days of the week when the flight is available.
+         * @returns The available flight schedule.
+         */
+        function fetchFlightSchedule(departure: Airports, destination: Airports, day: DayOfWeek[]): string[][] {
+          const flights: string[][] = [];
+
+          // Use the `Airports` enum for both the `departure` and `destination` parameters. 
+          flights.push(["Flights from " + departure + " to " + destination, "", "", "", ""]);
+
+          flights.push(["Day", "Flight Number", "Departure Time", "Arrival Time", "Price"]);
+          const daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+
+          day.forEach((d) => {
+            const dayName = daysOfWeek[d - 1];
+            const numberOfFlights = Math.floor(Math.random() * 3) + 1; // 1 to 3 flights
+
+            for (let i = 0; i < numberOfFlights; i++) {
+              const flightNumber = `AA${Math.floor(Math.random() * 900) + 100}`;
+              const departureTime = `${Math.floor(Math.random() * 12) + 1}:00 ${Math.random() > 0.5 ? "AM" : "PM"}`;
+              const arrivalTime = `${Math.floor(Math.random() * 12) + 1}:00 ${Math.random() > 0.5 ? "AM" : "PM"}`;
+              const price = `$${Math.floor(Math.random() * 500) + 100}`;
+
+              flights.push([dayName, flightNumber, departureTime, arrivalTime, price]);
+            }
+          });
+
+          return flights;
+        }
+    language: typescript
+libraries: |
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
+
+    core-js@2.4.1/client/core.min.js
+    @types/core-js
+
+    jquery@3.1.1
+    @types/jquery@3.3.1
diff --git a/samples/excel/16-custom-functions/custom-functions-errors.yaml b/samples/excel/16-custom-functions/custom-functions-errors.yaml
index 127176c1a..bfca8594a 100644
--- a/samples/excel/16-custom-functions/custom-functions-errors.yaml
+++ b/samples/excel/16-custom-functions/custom-functions-errors.yaml
@@ -33,6 +33,6 @@ script:
         }
     language: typescript
 libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-    core-js@2.4.1/client/core.min.js
\ No newline at end of file
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+    core-js@2.4.1/client/core.min.js
diff --git a/samples/excel/16-custom-functions/data-types-custom-functions.yaml b/samples/excel/16-custom-functions/data-types-custom-functions.yaml
index 459a04b0d..3a32c08ee 100644
--- a/samples/excel/16-custom-functions/data-types-custom-functions.yaml
+++ b/samples/excel/16-custom-functions/data-types-custom-functions.yaml
@@ -66,7 +66,7 @@ script:
               },
               // Add Unit Price as a formatted number.
               "Unit Price": {
-                type: "FormattedNumber",
+                type: "Double",
                 basicValue: product.unitPrice,
                 numberFormat: "$* #,##0.00"
               },
@@ -327,8 +327,8 @@ script:
         ];
     language: typescript
 libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
     core-js@2.4.1/client/core.min.js
-    @types/core-js
\ No newline at end of file
+    @types/core-js
diff --git a/samples/excel/16-custom-functions/streaming-function.yaml b/samples/excel/16-custom-functions/streaming-function.yaml
index 2a0914847..8959a13e4 100644
--- a/samples/excel/16-custom-functions/streaming-function.yaml
+++ b/samples/excel/16-custom-functions/streaming-function.yaml
@@ -28,6 +28,6 @@ script:
         }
     language: typescript
 libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
     core-js@2.4.1/client/core.min.js
diff --git a/samples/excel/16-custom-functions/volatile-function.yaml b/samples/excel/16-custom-functions/volatile-function.yaml
index 2858f4ed2..810a61631 100644
--- a/samples/excel/16-custom-functions/volatile-function.yaml
+++ b/samples/excel/16-custom-functions/volatile-function.yaml
@@ -17,6 +17,6 @@ script:
         }
     language: typescript
 libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
     core-js@2.4.1/client/core.min.js
diff --git a/samples/excel/16-custom-functions/web-call-function.yaml b/samples/excel/16-custom-functions/web-call-function.yaml
index cd2d2da2f..930651c9a 100644
--- a/samples/excel/16-custom-functions/web-call-function.yaml
+++ b/samples/excel/16-custom-functions/web-call-function.yaml
@@ -28,6 +28,6 @@ script:
         }
     language: typescript
 libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-    core-js@2.4.1/client/core.min.js
\ No newline at end of file
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+    core-js@2.4.1/client/core.min.js
diff --git a/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml b/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml
index 1317b247f..a3bd21c84 100644
--- a/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml
+++ b/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml
@@ -1,16 +1,16 @@
 order: 1
 id: excel-custom-xml-parts-create-set-get-and-delete-custom-xml-parts
 name: Using custom XML parts
-description: 'Creates, sets, gets, and deletes a custom XML part.'
+description: Creates, sets, gets, and deletes a custom XML part.
 author: OfficeDev
 host: EXCEL
 api_set:
     ExcelApi: '1.5'
 script:
-    content: |
-        $("#create-custom-xml-part").on("click", () => tryCatch(createCustomXmlPart));
-        $("#change-custom-xml-part").on("click", () => tryCatch(changeCustomXmlPart));
-        $("#delete-custom-xml-part").on("click", () => tryCatch(deleteCustomXmlPart));
+    content: |-
+        document.getElementById("create-custom-xml-part").addEventListener("click", () => tryCatch(createCustomXmlPart));
+        document.getElementById("change-custom-xml-part").addEventListener("click", () => tryCatch(changeCustomXmlPart));
+        document.getElementById("delete-custom-xml-part").addEventListener("click", () => tryCatch(deleteCustomXmlPart));
 
         async function createCustomXmlPart() {
             await Excel.run(async (context) => {
@@ -24,7 +24,7 @@ script:
                 await context.sync();
 
                 const readableXml = addLineBreaksToXML(xmlBlob.value);
-                $("#display-xml").text(readableXml);
+                document.getElementById("display-xml").textContent = readableXml;
 
                 // Store the XML part's ID in a setting.
                 const settings = context.workbook.settings;
@@ -50,7 +50,7 @@ script:
                     await context.sync();
 
                     const readableXml = addLineBreaksToXML(xmlBlob.value);
-                    $("#display-xml").text(readableXml);
+                    document.getElementById("display-xml").textContent = readableXml;
                     await context.sync();
                 }
             });
@@ -71,14 +71,14 @@ script:
                     await context.sync();
 
                     if (customXmlPart.isNullObject) {
-                        $("#display-xml").text(`The XML part with the id ${xmlPartIDSetting.value} has been deleted.`);
+                        document.getElementById("display-xml").textContent = `The XML part with the id ${xmlPartIDSetting.value} has been deleted.`;
 
                         // Delete the unneeded setting too.
                         xmlPartIDSetting.delete();            
                     } else {
                         const readableXml = addLineBreaksToXML(xmlBlob.value);
                         const strangeMessage = `This is strange. The XML part with the id ${xmlPartIDSetting.value} has not been deleted:\n${readableXml}`
-                        $("#display-xml").text(strangeMessage);
+                        document.getElementById("display-xml").textContent = strangeMessage;
                     }
 
                     await context.sync();
@@ -103,11 +103,10 @@ script:
         }
     language: typescript
 template:
-    content: |+
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to create, set, get, and delete custom XML parts in the file.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Press the button to create and display Contoso's Reviewer metadata.</p>
@@ -124,16 +123,14 @@ template:
             </button>
         </section>
 
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>XML part display</h3>
             <div id="display-xml" class="ms-font-l" style="max-width:320px;">
             </div>
         </section>
-
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -145,15 +142,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml b/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml
index 0279a0ff5..0ffaf7ac0 100644
--- a/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml
+++ b/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml
@@ -7,14 +7,14 @@ host: EXCEL
 api_set:
     ExcelApi: '1.5'
 script:
-    content: |
-        $("#create-custom-xml-part").on("click", () => tryCatch(createCustomXmlPart));
-        $("#test-for-unique-namespace").on("click", () => tryCatch(testForUniqueNamespace));
-        $("#delete-all-custom-xml-parts").on("click", () => tryCatch(deleteAllCustomXmlParts));
+    content: |-
+        document.getElementById("create-custom-xml-part").addEventListener("click", () => tryCatch(createCustomXmlPart));
+        document.getElementById("test-for-unique-namespace").addEventListener("click", () => tryCatch(testForUniqueNamespace));
+        document.getElementById("delete-all-custom-xml-parts").addEventListener("click", () => tryCatch(deleteAllCustomXmlParts));
 
         async function createCustomXmlPart() {
             await Excel.run(async (context) => {
-                $("#display-xml").text("");
+                document.getElementById("display-xml").textContent = "";
 
                 // You must have the xmlns attribute to populate the 
                 // CustomXml.namespaceUri property.
@@ -26,7 +26,7 @@ script:
 
                 // Make it a bit more readable.
                 const readableXml = xmlBlob.value.replace(/></g, ">\n<");
-                $("#display-xml").text(readableXml);
+                document.getElementById("display-xml").textContent = readableXml;
 
                 await context.sync();
             });
@@ -34,7 +34,7 @@ script:
 
         async function testForUniqueNamespace() {
             await Excel.run(async (context) => {
-                $("#display-xml").text("");
+                document.getElementById("display-xml").textContent = "";
                 const contosoNamespace = "http://schemas.contoso.com/review/1.0";
                 const customXmlParts = context.workbook.customXmlParts;
                 const filteredXmlParts = customXmlParts.getByNamespace(contosoNamespace);
@@ -51,8 +51,8 @@ script:
                     // Make it a bit more readable.
                     const readableXml = xmlBlob.value.replace(/></g, ">\n<");
 
-                    $("#display-xml").text(`The only XML part in the namespace ${contosoNamespace} is:
-                        ${readableXml}`);
+                    document.getElementById("display-xml").textContent = `The only XML part in the namespace ${contosoNamespace} is:
+                        ${readableXml}`;
 
                 } else {
                     console.log(`There are ${numberOfPartsInNamespace.value} XML parts with namespace ${contosoNamespace}. There should be exactly 1.`);
@@ -64,7 +64,7 @@ script:
 
         async function deleteAllCustomXmlParts() {
             await Excel.run(async (context) => {
-                $("#display-xml").text("");
+                document.getElementById("display-xml").textContent = "";
                 const customXmlParts = context.workbook.customXmlParts;
                 customXmlParts.load("items");
 
@@ -90,11 +90,10 @@ script:
         }
     language: typescript
 template:
-    content: |+
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to determine if there is just one XML part for a specified namespace.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Press the "Create XML part" button to create and display Contoso's Reviewer metadata. <span class="ms-fontWeight-semibold">Press it more than once if you want to set up an error situation.</span></p>
@@ -110,13 +109,11 @@ template:
                 <span class="ms-Button-label">Delete all XML parts</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>XML part display</h3>
             <div id="display-xml" class="ms-font-l" style="max-width:320px;">
             </div>
         </section>
-
     language: html
 style:
     content: |-
@@ -131,15 +128,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/20-data-types/data-types-basic-types.yaml b/samples/excel/20-data-types/data-types-basic-types.yaml
new file mode 100644
index 000000000..523da4b44
--- /dev/null
+++ b/samples/excel/20-data-types/data-types-basic-types.yaml
@@ -0,0 +1,362 @@
+order: 8
+id: excel-data-types-basic-types
+name: Basic types with metadata
+description: This sample shows how to work with metadata on basic types.
+host: EXCEL
+api_set:
+    ExcelApi: '1.19'
+script:
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("set-basic-types-with-metadata").addEventListener("click", () => tryCatch(setBasicTypesWithMetadata));
+        document.getElementById("set-referenced-values").addEventListener("click", () => tryCatch(setReferencedValues));
+        document.getElementById("set-circular-reference-values").addEventListener("click", () => tryCatch(setCircularReferenceValues));
+        document.getElementById("print-to-console").addEventListener("click", () => tryCatch(printToConsole));
+
+        const sheetName = "Sample";
+
+        /** Add basic types with metadata to the worksheet. */
+        async function setBasicTypesWithMetadata() {
+          await Excel.run(async (context) => {
+            // Get the worksheet and target range.
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const dataRange = sheet.getRange("A1:A4");
+
+            // Write a variety of basic types with metadata to the range.
+            dataRange.valuesAsJson = [
+              [doubleWithFormatAndMetadata],
+              [doubleWithMetadata],
+              [stringWithMetadata],
+              [booleanWithMetadata]
+            ];
+
+            dataRange.format.autofitColumns();
+            await context.sync();
+          });
+        }
+
+        /** Set basic types with metadata that reference other basic types in the worksheet. */
+        async function setReferencedValues() {
+          await Excel.run(async (context) => {
+            // Get the worksheet and target range.
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const targetRange = sheet.getRange("A5");
+
+            // Write a string with metadata that references other values.
+            targetRange.valuesAsJson = [
+              [stringWithReferencedValues]
+            ];
+            targetRange.format.autofitColumns();
+
+            await context.sync();
+          });
+        }
+
+        /** Set basic types with metadata that contain circular references. */
+        async function setCircularReferenceValues() {
+          await Excel.run(async (context) => {
+            // Get the worksheet and target range.
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const targetRange = sheet.getRange("A6");
+
+            // Write a string with metadata that contains circular references.
+            targetRange.valuesAsJson = [
+              [stringWithCircularReferences]
+            ];
+            targetRange.format.autofitColumns();
+
+            await context.sync();
+          });
+        }
+
+        /** Get and log information about the basic types in the worksheet. */
+        async function printToConsole() {
+          await Excel.run(async (context) => {
+            // Get the worksheet and target range.
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const dataRange = sheet.getRange("A1:A6");
+
+            // Load the data type property of the range.
+            dataRange.load("valuesAsJson");
+            await context.sync();
+
+            const dataValues = dataRange.valuesAsJson;
+
+            // Print information about the data types to the console.
+            console.log("Basic types as an array:", dataValues);
+          });
+        }
+
+        /** Set up Sample worksheet. */ 
+        async function setup() {
+          await Excel.run(async (context) => {
+            // Create a new worksheet and activate it.
+            context.workbook.worksheets.getItemOrNullObject(sheetName).delete();
+            const sheet = context.workbook.worksheets.add(sheetName);
+            sheet.activate();
+            
+            await context.sync();
+          });
+        }
+
+        /** Default helper for invoking an action and handling errors. */
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+
+        /** Basic string value with metadata. */
+        const basicStringValue: Excel.StringCellValue = {
+          type: Excel.CellValueType.string,
+          basicType: Excel.CellValueType.string,
+          basicValue: "This is a basic string value"
+        };
+
+        /** Basic double value with metadata. */
+        const basicDoubleValue: Excel.DoubleCellValue = {
+          type: Excel.CellValueType.double,
+          basicType: Excel.CellValueType.double,
+          basicValue: 10
+        };
+
+        /** Basic boolean value with metadata. */
+        const basicBooleanValue: Excel.BooleanCellValue = {
+          type: Excel.CellValueType.boolean,
+          basicType: Excel.CellValueType.boolean,
+          basicValue: true
+        };
+
+        /** Web image cell value. */
+        const imageCellValue: Excel.WebImageCellValue = {
+          type: "WebImage",
+          basicType: "Error",
+          basicValue: "#VALUE!",
+          address: "https://github.com/OfficeDev/office-js-snippets/blob/main/.github/images/microsoft-logo.png?raw=true",
+        };
+
+        /** Basic view layout with icon for card and compact views. */
+        const basicViewLayoutWithIcon: Excel.BasicViewLayouts = {
+          card: {
+            title: "This is the title",
+            sections: [
+              {
+                layout: "List",
+                properties: ["stringProperty", "booleanProperty", "doubleProperty"],
+                collapsed: false,
+                collapsible: true
+              }
+            ],
+            subTitle: {
+              property: "stringProperty"
+            },
+            mainImage: {
+              property: "imageProperty"
+            }
+          },
+          compact: {
+            icon: Excel.EntityCompactLayoutIcons.animalDog
+          }
+        };
+
+        /** Simple view layout without icon. */
+        const basicViewLayoutSimple: Excel.BasicViewLayouts = {
+          card: {
+            title: "This is the title",
+            subTitle: {
+              property: "stringProperty"
+            }
+          }
+        };
+
+        /** Cell value provider attributes for data source attribution. */
+        const cellValueProvider: Excel.CellValueProviderAttributes = {
+          description: "Microsoft Bing",
+          logoSourceAddress: "https://github.com/OfficeDev/office-js-snippets/blob/main/.github/images/microsoft-logo.png?raw=true",
+          logoTargetAddress: "http://microsoft.com/"
+        };
+
+        /** Double value with formatting and metadata. */
+        const doubleWithFormatAndMetadata: Excel.DoubleCellValue = {
+          type: Excel.CellValueType.double,
+          basicType: Excel.CellValueType.double,
+          basicValue: 300,
+          numberFormat: "$0.00",
+          properties: {
+            stringProperty: basicStringValue,
+            booleanProperty: basicBooleanValue,
+            doubleProperty: basicDoubleValue,
+            imageProperty: imageCellValue
+          },
+          layouts: basicViewLayoutWithIcon,
+          provider: cellValueProvider
+        };
+
+        /** Double value with metadata but no special formatting. */
+        const doubleWithMetadata: Excel.DoubleCellValue = {
+          type: Excel.CellValueType.double,
+          basicType: Excel.CellValueType.double,
+          basicValue: 123.45,
+          properties: {
+            stringProperty: basicStringValue,
+            booleanProperty: basicBooleanValue,
+            doubleProperty: basicDoubleValue,
+            imageProperty: imageCellValue
+          },
+          layouts: basicViewLayoutSimple,
+          provider: cellValueProvider
+        };
+
+        /** String value with metadata. */
+        const stringWithMetadata: Excel.StringCellValue = {
+          type: Excel.CellValueType.string,
+          basicType: Excel.CellValueType.string,
+          basicValue: "String with metadata",
+          properties: {
+            stringProperty: basicStringValue,
+            booleanProperty: basicBooleanValue,
+            doubleProperty: basicDoubleValue,
+            imageProperty: imageCellValue
+          },
+          layouts: basicViewLayoutWithIcon,
+          provider: cellValueProvider
+        };
+
+        /** Boolean value with metadata. */
+        const booleanWithMetadata: Excel.BooleanCellValue = {
+          type: Excel.CellValueType.boolean,
+          basicType: Excel.CellValueType.boolean,
+          basicValue: true,
+          properties: {
+            stringProperty: basicStringValue,
+            booleanProperty: basicBooleanValue,
+            doubleProperty: basicDoubleValue,
+            imageProperty: imageCellValue
+          },
+          layouts: basicViewLayoutSimple,
+          provider: cellValueProvider
+        };
+
+        /** String with metadata that references other values. */
+        const stringWithReferencedValues = {
+          type: Excel.CellValueType.string,
+          basicType: Excel.CellValueType.string,
+          basicValue: "String with referenced values",
+          properties: {
+            stringProperty: {
+              type: Excel.CellValueType.reference,
+              reference: 0
+            },
+            booleanProperty: {
+              type: Excel.CellValueType.reference,
+              reference: 1
+            },
+            doubleWithFormatProperty: {
+              type: Excel.CellValueType.reference,
+              reference: 2
+            },
+            doubleProperty: {
+              type: Excel.CellValueType.reference,
+              reference: 3
+            }
+          },
+          referencedValues: [stringWithMetadata, booleanWithMetadata, doubleWithFormatAndMetadata, doubleWithMetadata],
+          layouts: {
+            compact: {
+              icon: Excel.EntityCompactLayoutIcons.apple
+            }
+          }
+        };
+
+        /** String with metadata that contains circular references. */
+        const stringWithCircularReferences = {
+          type: Excel.CellValueType.string,
+          basicType: Excel.CellValueType.string,
+          basicValue: "String with circular references",
+          properties: {
+            doubleProperty: {
+              type: Excel.CellValueType.double,
+              basicType: Excel.CellValueType.double,
+              basicValue: 10,
+              properties: {
+                stringProperty: basicStringValue,
+                doubleProperty: basicDoubleValue,
+                booleanProperty: basicBooleanValue,
+                rootProperty: {
+                  type: Excel.CellValueType.reference,
+                  reference: 0
+                }
+              },
+              referencedValues: [
+                {
+                  type: Excel.ReferenceValueType.root
+                }
+              ]
+            }
+          },
+          layouts: {
+            compact: {
+              icon: Excel.EntityCompactLayoutIcons.animalTurtle
+            }
+          }
+        };
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            <p>This sample shows how to create basic types with metadata and then work with those basic types.</p>
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+            <h3>Set up</h3>
+            <button id="setup" class="ms-Button">
+                <span class="ms-Button-label">Add worksheet</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <p>Add basic types to the worksheet. Select the icon in each cell to see a data type card with metadata.</p>
+            <button id="set-basic-types-with-metadata" class="ms-Button">
+                <span class="ms-Button-label">Create basic types with metadata</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <p>Add a basic type with referenced values. Open the data type card to see other values in the worksheet that this basic type references&mdash;it references cells <strong>A1</strong>, <strong>A2</strong>, <strong>A3</strong>, and <strong>A4</strong>.</p>
+            <button id="set-referenced-values" class="ms-Button">
+                <span class="ms-Button-label">Create basic type with referenced values</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <p>Add a basic type with circular references. Open the data type card and select the <strong>doubleProperty</strong> to see the circular references.</p>
+            <button id="set-circular-reference-values" class="ms-Button">
+                <span class="ms-Button-label">Create basic type with circular references</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <p>Print information about each of your basic types to the console.</p>
+            <button id="print-to-console" class="ms-Button">
+                <span class="ms-Button-label">Print basic types to console</span>
+            </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/20-data-types/data-types-entity-attribution.yaml b/samples/excel/20-data-types/data-types-entity-attribution.yaml
index d7a9efe17..497c603ec 100644
--- a/samples/excel/20-data-types/data-types-entity-attribution.yaml
+++ b/samples/excel/20-data-types/data-types-entity-attribution.yaml
@@ -6,9 +6,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.16'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup)); 
-        $("#add-entities-to-table").on("click", () => tryCatch(addEntitiesToTable));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-entities-to-table").addEventListener("click", () => tryCatch(addEntitiesToTable));
 
         async function addEntitiesToTable() {
           // This function retrieves data for each of the existing products in the table,
@@ -50,7 +50,7 @@ script:
           const entity: Excel.EntityCellValue = {
             type: Excel.CellValueType.entity,
             text: productName,
-            properties: {
+            properties: { /* Excel.EntityPropertyType */
               "Product ID": {
                 type: Excel.CellValueType.string,
                 basicValue: productID.toString() || ""
@@ -70,10 +70,10 @@ script:
                 numberFormat: "$* #,##0.00"
               }
             },
-            layouts: {
-              card: {
+            layouts: { /* Excel.EntityViewLayouts */
+              card: { /* Excel.EntityCardLayout */
                 title: { property: "Product Name" },
-                sections: [
+                sections: [ /* Excel.CardLayoutSection */
                   {
                     layout: "List",
                     properties: ["Product ID"]
@@ -205,10 +205,10 @@ template:
           </button>
           <p>To see the entity value's data attribution, click the icon to the left of the title in the <strong>Product</strong> column after selecting <strong>Add entity values</strong>. </p>
           <p>The data attribution appears as a logo in the bottom left corner of the entity card. Hover over the logo to see the name of the data provider. Click on the logo to visit the data provider's URL.</p>
-        </section>  
+        </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -220,15 +220,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/20-data-types/data-types-entity-icons.yaml b/samples/excel/20-data-types/data-types-entity-icons.yaml
index 46f6ec979..b9bac49e6 100644
--- a/samples/excel/20-data-types/data-types-entity-icons.yaml
+++ b/samples/excel/20-data-types/data-types-entity-icons.yaml
@@ -6,9 +6,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.16'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#create-icons").on("click", () => tryCatch(createIcons));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("create-icons").addEventListener("click", () => tryCatch(createIcons));
 
         // Retrieve the entity card icons enum.
         const iconNames = Excel.EntityCompactLayoutIcons;
@@ -107,14 +107,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/20-data-types/data-types-entity-values.yaml b/samples/excel/20-data-types/data-types-entity-values.yaml
index d4792406c..577b39f18 100644
--- a/samples/excel/20-data-types/data-types-entity-values.yaml
+++ b/samples/excel/20-data-types/data-types-entity-values.yaml
@@ -1,14 +1,14 @@
 order: 3
 id: excel-data-types-entity-values
 name: 'Data types: Create entity cards from data in a table'
-description: 'This sample shows how to create entity cards for each row in a table. An entity is a container for data types, similar to an object in object-oriented programming.'
+description: This sample shows how to create entity cards for each row in a table. An entity is a container for data types, similar to an object in object-oriented programming.
 host: EXCEL
 api_set:
     ExcelApi: '1.16'
 script:
     content: |-
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#addEntitiesToTable").on("click", () => tryCatch(addEntitiesToTable));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("addEntitiesToTable").addEventListener("click", () => tryCatch(addEntitiesToTable));
 
         async function addEntitiesToTable() {
           // This function retrieves data for each of the existing products in the table, 
@@ -270,7 +270,7 @@ script:
             quantityPerUnit: "10 boxes x 20 bags",
             unitPrice: 18,
             discontinued: false,
-            productImage: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Masala_Chai.JPG/320px-Masala_Chai.JPG"
+            productImage: ""
           },
           {
             productID: 2,
@@ -290,7 +290,7 @@ script:
             quantityPerUnit: "12 - 550 ml bottles",
             unitPrice: 10,
             discontinued: false,
-            productImage: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Maltose_syrup.jpg/185px-Maltose_syrup.jpg"
+            productImage: ""
           },
           {
             productID: 4,
@@ -300,8 +300,7 @@ script:
             quantityPerUnit: "48 - 6 oz jars",
             unitPrice: 22,
             discontinued: false,
-            productImage:
-              "https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Kruidenmengeling-spice.jpg/193px-Kruidenmengeling-spice.jpg"
+            productImage: "https://github.com/OfficeDev/office-js-snippets/blob/prod/.github/images/chili-peppers.jpg?raw=true"
           },
           {
             productID: 5,
@@ -311,8 +310,7 @@ script:
             quantityPerUnit: "36 boxes",
             unitPrice: 21.35,
             discontinued: true,
-            productImage:
-              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Okra_in_a_Bowl_%28Unsplash%29.jpg/180px-Okra_in_a_Bowl_%28Unsplash%29.jpg"
+            productImage: "https://github.com/OfficeDev/office-js-snippets/blob/prod/.github/images/crustacean.jpg?raw=true"
           },
           {
             productID: 6,
@@ -322,8 +320,7 @@ script:
             quantityPerUnit: "12 - 8 oz jars",
             unitPrice: 25,
             discontinued: false,
-            productImage:
-              "https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Making_cranberry_sauce_-_in_the_jar.jpg/90px-Making_cranberry_sauce_-_in_the_jar.jpg"
+            productImage: ""
           },
           {
             productID: 7,
@@ -333,7 +330,7 @@ script:
             quantityPerUnit: "12 - 1 lb pkgs.",
             unitPrice: 30,
             discontinued: false,
-            productImage: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/DriedPears.JPG/120px-DriedPears.JPG"
+            productImage: "https://github.com/OfficeDev/office-js-snippets/blob/prod/.github/images/fruit.jpg?raw=true"
           },
           {
             productID: 8,
@@ -343,8 +340,7 @@ script:
             quantityPerUnit: "12 - 12 oz jars",
             unitPrice: 40,
             discontinued: false,
-            productImage:
-              "https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Making_cranberry_sauce_-_stovetop.jpg/90px-Making_cranberry_sauce_-_stovetop.jpg"
+            productImage: ""
           },
           {
             productID: 9,
@@ -364,7 +360,7 @@ script:
             quantityPerUnit: "12 - 200 ml jars",
             unitPrice: 31,
             discontinued: false,
-            productImage: ""
+            productImage: "https://github.com/OfficeDev/office-js-snippets/blob/prod/.github/images/dried-legume.jpg?raw=true"
           },
           {
             productID: 11,
@@ -374,7 +370,7 @@ script:
             quantityPerUnit: "1 kg pkg.",
             unitPrice: 21,
             discontinued: false,
-            productImage: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Tilsit_cheese.jpg/190px-Tilsit_cheese.jpg"
+            productImage: ""
           },
           {
             productID: 12,
@@ -384,7 +380,7 @@ script:
             quantityPerUnit: "10 - 500 g pkgs.",
             unitPrice: 38,
             discontinued: false,
-            productImage: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Manchego.jpg/177px-Manchego.jpg"
+            productImage: ""
           },
           {
             productID: 13,
@@ -394,7 +390,7 @@ script:
             quantityPerUnit: "2 kg box",
             unitPrice: 6,
             discontinued: false,
-            productImage: ""
+            productImage: "https://github.com/OfficeDev/office-js-snippets/blob/prod/.github/images/green-leaf.jpg?raw=true"
           },
           {
             productID: 14,
@@ -404,8 +400,7 @@ script:
             quantityPerUnit: "40 - 100 g pkgs.",
             unitPrice: 23.25,
             discontinued: false,
-            productImage:
-              "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Korean.food-Dubu.gui-01.jpg/120px-Korean.food-Dubu.gui-01.jpg"
+            productImage: ""
           },
           {
             productID: 15,
@@ -445,7 +440,7 @@ script:
             quantityPerUnit: "16 kg pkg.",
             unitPrice: 62.5,
             discontinued: false,
-            productImage: ""
+            productImage: "https://github.com/OfficeDev/office-js-snippets/blob/prod/.github/images/crustacean.jpg?raw=true"
           },
           {
             productID: 19,
@@ -455,8 +450,7 @@ script:
             quantityPerUnit: "10 boxes x 12 pieces",
             unitPrice: 9.2,
             discontinued: false,
-            productImage:
-              "https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Macau_Koi_Kei_Bakery_Almond_Biscuits_2.JPG/120px-Macau_Koi_Kei_Bakery_Almond_Biscuits_2.JPG"
+            productImage: ""
           },
           {
             productID: 20,
@@ -466,8 +460,7 @@ script:
             quantityPerUnit: "30 gift boxes",
             unitPrice: 81,
             discontinued: false,
-            productImage:
-              "https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Homemade_marmalade%2C_England.jpg/135px-Homemade_marmalade%2C_England.jpg"
+            productImage: ""
           }
         ];
 
@@ -588,7 +581,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -600,15 +593,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/20-data-types/data-types-error-values.yaml b/samples/excel/20-data-types/data-types-error-values.yaml
index b728fe804..26fe44110 100644
--- a/samples/excel/20-data-types/data-types-error-values.yaml
+++ b/samples/excel/20-data-types/data-types-error-values.yaml
@@ -1,15 +1,15 @@
 order: 4
 id: excel-data-types-error-values
 name: 'Data types: Set and change error values'
-description: 'This sample shows how to set a cell value to an error data type, and then update the value of cells that contain an error data type.'
+description: This sample shows how to set a cell value to an error data type, and then update the value of cells that contain an error data type.
 host: EXCEL
 api_set:
     ExcelApi: '1.16'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#set-busy-error").on("click", () => tryCatch(setBusyError));
-        $("#change-busy-error").on("click", () => tryCatch(changeBusyError));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("set-busy-error").addEventListener("click", () => tryCatch(setBusyError));
+        document.getElementById("change-busy-error").addEventListener("click", () => tryCatch(changeBusyError));
 
         async function setBusyError() {
           // This function sets the value of cell A1 to a #BUSY! error using data types.
@@ -105,15 +105,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/20-data-types/data-types-formatted-number.yaml b/samples/excel/20-data-types/data-types-formatted-number.yaml
index 35bbc5b13..e072889de 100644
--- a/samples/excel/20-data-types/data-types-formatted-number.yaml
+++ b/samples/excel/20-data-types/data-types-formatted-number.yaml
@@ -1,19 +1,19 @@
 order: 1
-id: excel-data-types-formatted-number
+id: excel-data-types-doubles
 name: 'Data types: Formatted numbers'
-description: This sample shows how to set and get data types using the formatted number properties.
+description: This sample shows how to set and get formatted numbers using double data types.
 host: EXCEL
 api_set:
     ExcelApi: '1.16'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#set-formatted-number-date").on("click", () => tryCatch(setFormattedNumberDate)); 
-        $("#set-formatted-number-currency").on("click", () => tryCatch(setFormattedNumberCurrency)); 
-        $("#get-formatted-number").on("click", () => tryCatch(getFormattedNumber));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("set-double-as-date").addEventListener("click", () => tryCatch(setDoubleAsDate));
+        document.getElementById("set-double-as-currency").addEventListener("click", () => tryCatch(setDoubleAsCurrency));
+        document.getElementById("get-double").addEventListener("click", () => tryCatch(getDouble));
 
-        async function setFormattedNumberDate() {
-          // This function creates a formatted number data type,
+        async function setDoubleAsDate() {
+          // This function creates a double data type,
           // and sets the format of this data type as a date.
           await Excel.run(async (context) => {
             // Get the Sample worksheet and a range on that sheet.
@@ -24,7 +24,7 @@ script:
             dateRange.valuesAsJson = [
               [
                 {
-                  type: Excel.CellValueType.formattedNumber,
+                  type: Excel.CellValueType.double,
                   basicValue: 32889.0,
                   numberFormat: "m/d/yyyy"
                 }
@@ -34,8 +34,8 @@ script:
           });
         }
 
-        async function setFormattedNumberCurrency() {
-          // This function creates a formatted number data type,
+        async function setDoubleAsCurrency() {
+          // This function creates a double data type,
           // and sets the format of this data type as a currency.
           await Excel.run(async (context) => {
             // Get the Sample worksheet and a range on that sheet.
@@ -46,7 +46,7 @@ script:
             currencyRange.valuesAsJson = [
               [
                 {
-                  type: Excel.CellValueType.formattedNumber,
+                  type: Excel.CellValueType.double,
                   basicValue: 12.34,
                   numberFormat: "$* #,##0.00"
                 }
@@ -57,7 +57,7 @@ script:
           });
         }
 
-        async function getFormattedNumber() {
+        async function getDouble() {
           // This function prints information about data types 
           // in cells A1 and A2 to the console.
           await Excel.run(async (context) => {
@@ -79,13 +79,13 @@ script:
             console.log("  Type: " + dateValues.type);
             console.log("  Basic value: " + dateValues.basicValue);
             console.log("  Basic type: " + dateValues.basicType);
-            console.log("  Number format: " + (dateValues as Excel.FormattedNumberCellValue).numberFormat);
+            console.log("  Number format: " + (dateValues as Excel.DoubleCellValue).numberFormat);
 
             console.log("Currency");
             console.log("  Type: " + currencyValues.type);
             console.log("  Basic value: " + currencyValues.basicValue);
             console.log("  Basic type: " + currencyValues.basicType);
-            console.log("  Number format: " + (currencyValues as Excel.FormattedNumberCellValue).numberFormat);
+            console.log("  Number format: " + (currencyValues as Excel.DoubleCellValue).numberFormat);
           });
         }
 
@@ -111,7 +111,7 @@ script:
 template:
     content: |-
         <section class="ms-Fabric ms-font-m">
-          <p>This sample shows how to work with the formatted number data type.</p>
+          <p>This sample shows how to work with double data types to create formatted numbers.</p>
         </section>
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
@@ -119,13 +119,13 @@ template:
             <span class="ms-Button-label">Add worksheet</span>
           </button>
           <h3>Try it out</h3>
-          <button id="set-formatted-number-date" class="ms-Button">
+          <button id="set-double-as-date" class="ms-Button">
             <span class="ms-Button-label">Set formatted date</span>
           </button>
-          <button id="set-formatted-number-currency" class="ms-Button">
+          <button id="set-double-as-currency" class="ms-Button">
             <span class="ms-Button-label">Set formatted currency</span>
           </button>
-          <button id="get-formatted-number" class="ms-Button">
+          <button id="get-double" class="ms-Button">
             <span class="ms-Button-label">Log data types</span>
           </button>
         </section>
@@ -143,15 +143,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/20-data-types/data-types-references.yaml b/samples/excel/20-data-types/data-types-references.yaml
index 12324bab8..e139b4da9 100644
--- a/samples/excel/20-data-types/data-types-references.yaml
+++ b/samples/excel/20-data-types/data-types-references.yaml
@@ -1,14 +1,14 @@
 order: 7
 id: excel-data-types-references
 name: 'Data types: Entity values with references'
-description: 'This sample shows how to create entity values with references to other entity values. An entity value is a container for data, and this container can reference (or contain) other entities within the original entity. One entity can contain multiple additional entities.'
+description: This sample shows how to create entity values with references to other entity values. An entity value is a container for data, and this container can reference (or contain) other entities within the original entity. One entity can contain multiple additional entities.
 host: EXCEL
 api_set:
     ExcelApi: '1.16'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup)); 
-        $("#add-entities-to-table").on("click", () => tryCatch(addEntitiesToTable));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-entities-to-table").addEventListener("click", () => tryCatch(addEntitiesToTable));
 
         async function addEntitiesToTable() {
           // This function creates entity values with references to other entity values. 
@@ -292,7 +292,7 @@ script:
         ];
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to create entity values with references to other entity values. An entity value is a container for data, and this container can reference (or contain) other entities within the original entity. One entity can contain multiple additional entities.</p>
         </section>
@@ -316,10 +316,10 @@ template:
             <li>To navigate back to the original <strong>Andrew Fuller</strong> entity, select the <strong>Back</strong> arrow in the top left corner of the entity card.</li>
           </ol>
           <p>You can also use the <strong>Extract to grid</strong> button in the card modal window, to the right of the <strong>Manager</strong> or <strong>Direct Reports</strong> fields, to add the referenced entities to the table in new columns.</p>
-        </section>  
+        </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -331,15 +331,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/20-data-types/data-types-web-image.yaml b/samples/excel/20-data-types/data-types-web-image.yaml
index 64cf933a0..d42de34d6 100644
--- a/samples/excel/20-data-types/data-types-web-image.yaml
+++ b/samples/excel/20-data-types/data-types-web-image.yaml
@@ -6,19 +6,19 @@ host: EXCEL
 api_set:
     ExcelApi: '1.16'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#insert-image").on("click", () => tryCatch(insertImage));
-        $("#retrieve-image-info").on("click", () => tryCatch(retrieveImageInfo));
-        $("#open-image").on("click", () => tryCatch(openImage));
-        $("#clear-form").on("click", () => tryCatch(clearForm));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("insert-image").addEventListener("click", () => tryCatch(insertImage));
+        document.getElementById("retrieve-image-info").addEventListener("click", () => tryCatch(retrieveImageInfo));
+        document.getElementById("open-image").addEventListener("click", () => tryCatch(openImage));
+        document.getElementById("clear-form").addEventListener("click", () => tryCatch(clearForm));
 
         async function insertImage() {
           // This function inserts a web image into the currently selected cell.
           await Excel.run(async (context) => {
             // Retrieve image data from the task pane and then clear the input fields.
-            const imageUrl = $("#url").val() as string;
-            const imageAltText = $("#alt-text").val() as string;
+            const imageUrl = (document.getElementById("url") as HTMLInputElement).value;
+            const imageAltText = (document.getElementById("alt-text") as HTMLInputElement).value;
             clearForm();
 
             // Load the active cell.
@@ -65,8 +65,8 @@ script:
             }
 
             // Assign image data to corresponding input fields in the task pane.
-            $("#url").val(webImageUrl);
-            $("#alt-text").val(webImageAltText);
+            (document.getElementById("url") as HTMLInputElement).value = webImageUrl;
+            (document.getElementById("alt-text") as HTMLInputElement).value = webImageAltText;
           });
         }
 
@@ -95,8 +95,8 @@ script:
 
         async function clearForm() {
           // Clear the input fields in the task pane.
-          $("#url").val("");
-          $("#alt-text").val("");
+          (document.getElementById("url") as HTMLInputElement).value = "";
+          (document.getElementById("alt-text") as HTMLInputElement).value = "";
         }
 
         async function setup() {
@@ -125,7 +125,6 @@ template:
           <p>This sample shows how to work with the web image data type. Insert an image into the selected cell and then
             retrieve information about that image.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <p>Add a new worksheet and then enter the URL and alt text for an image of your choice.</p>
@@ -137,24 +136,20 @@ template:
           <label for="alt-text"><strong>Alt text:</strong> </label>
           <input type="text" name="alt-text" id="alt-text" alt="Alt text input field">
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <p>Select the cell you want to insert the web image into, and then select the <strong>Insert image</strong> button.</p>
           <button id="insert-image" class="ms-Button">
             <span class="ms-Button-label">Insert image</span>
           </button>
-
           <p>Select the cell containing the web image that you want to view the details of, and then select the <strong>Retrieve image details</strong> button. The image details will display here in the task pane, in the preceding <strong>Image URL</strong> and <strong>Alt text</strong> fields.</p>
           <button id="retrieve-image-info" class="ms-Button">
             <span class="ms-Button-label">Retrieve image details</span>
           </button>
-
           <p>Select the cell with the image you want to view and then select the <strong>Open image in browser</strong> button. The image will open in a new web browser tab.</p>
           <button id="open-image" class="ms-Button">
             <span class="ms-Button-label">Open image in browser</span>
           </button>
-
           <p>Clear the <strong>Image URL</strong> and <strong>Alt text</strong> fields in the task pane.</p>
           <button id="clear-form" class="ms-Button">
             <span class="ms-Button-label">Clear form</span>
@@ -186,15 +181,9 @@ style:
             padding: 5px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/22-data-validation/data-validation.yaml b/samples/excel/22-data-validation/data-validation.yaml
index d6eeef522..d808941a2 100644
--- a/samples/excel/22-data-validation/data-validation.yaml
+++ b/samples/excel/22-data-validation/data-validation.yaml
@@ -1,16 +1,16 @@
 order: 1
 id: excel-data-validation
 name: Data validation
-description: 'Sets data validation rules on ranges, prompts users to enter valid data, and displays messages when invalid data is entered.'
+description: Sets data validation rules on ranges, prompts users to enter valid data, and displays messages when invalid data is entered.
 host: EXCEL
 api_set:
     ExcelApi: '1.8'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#positive-number").on("click", () => tryCatch(addPositiveNumberRequirement));
-        $("#require-approved-location").on("click", () => tryCatch(requireApprovedName));
-        $("#comment-redundancy").on("click", () => tryCatch(warnAboutCommentRedundancy));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("positive-number").addEventListener("click", () => tryCatch(addPositiveNumberRequirement));
+        document.getElementById("require-approved-location").addEventListener("click", () => tryCatch(requireApprovedName));
+        document.getElementById("comment-redundancy").addEventListener("click", () => tryCatch(warnAboutCommentRedundancy));
 
         async function addPositiveNumberRequirement() {
             await Excel.run(async (context) => {
@@ -137,18 +137,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p class="ms-font-m">This sample shows how to apply data validation to cells.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
                 <button id="setup" class="ms-Button">
                     <span class="ms-Button-label">Add table</span>
                 </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
                 <p class="ms-font-m">Press <b>Require approved name</b> and then click on a cell in the <b>Baby Name</b> column and use the drop down to enter an approved value.</p>
@@ -178,15 +176,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/26-document/custom-properties.yaml b/samples/excel/26-document/custom-properties.yaml
index 79f40918b..4ca88f810 100644
--- a/samples/excel/26-document/custom-properties.yaml
+++ b/samples/excel/26-document/custom-properties.yaml
@@ -6,11 +6,11 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.12'
 script:
-    content: |
-        $("#set-custom-doc-property").on("click", () => tryCatch(setCustomDocProperty)); 
-        $("#get-custom-doc-properties").on("click", () => tryCatch(getCustomDocProperties)); 
-        $("#set-custom-worksheet-property").on("click", () => tryCatch(setCustomWorksheetProperty)); 
-        $("#get-custom-worksheet-properties").on("click", () => tryCatch(getCustomWorksheetProperties));
+    content: |-
+        document.getElementById("set-custom-doc-property").addEventListener("click", () => tryCatch(setCustomDocProperty));
+        document.getElementById("get-custom-doc-properties").addEventListener("click", () => tryCatch(getCustomDocProperties));
+        document.getElementById("set-custom-worksheet-property").addEventListener("click", () => tryCatch(setCustomWorksheetProperty));
+        document.getElementById("get-custom-worksheet-properties").addEventListener("click", () => tryCatch(getCustomWorksheetProperties));
 
         /* To learn how to view document properties in the UI,
          * see https://support.microsoft.com/office/21D604C2-481E-4379-8E54-1DD4622C6B75
@@ -19,8 +19,8 @@ script:
         async function setCustomDocProperty() {
           await Excel.run(async (context) => {
             // Get the key/value pair from the task pane.
-            const userKey = $("#key").text();
-            const userValue = $("#value").text();
+            const userKey = document.getElementById("key").textContent;
+            const userValue = document.getElementById("value").textContent;
 
             // Add the custom property.
             const customDocProperties = context.workbook.properties.custom;
@@ -50,8 +50,8 @@ script:
         async function setCustomWorksheetProperty() {
           await Excel.run(async (context) => {
             // Get the key/value pair from the task pane.
-            const userKey = $("#key").text();
-            const userValue = $("#value").text();
+            const userKey = document.getElementById("key").textContent;
+            const userValue = document.getElementById("value").textContent;
 
             // Add the custom property.
             const customWorksheetProperties = context.workbook.worksheets.getActiveWorksheet().customProperties;
@@ -93,12 +93,10 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to set and get custom properties at both the document level and the worksheet level.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <p>Enter the key/value pairs for your custom properties.</p>
           <p><b>Key:</b> <textarea id="key">MyKey</textarea></p>
           <p><b>Value:</b> <textarea id="value">MyValue</textarea></p>
-
           <p />
           <button id="set-custom-doc-property" class="ms-Button">
                 <span class="ms-Button-label">Set as document property</span>
@@ -118,7 +116,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -130,15 +128,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/26-document/get-file-in-slices-async.yaml b/samples/excel/26-document/get-file-in-slices-async.yaml
index 635269759..9c1cff8ca 100644
--- a/samples/excel/26-document/get-file-in-slices-async.yaml
+++ b/samples/excel/26-document/get-file-in-slices-async.yaml
@@ -7,9 +7,9 @@ api_set:
     ExcelApi: '1.4'
 script:
     content: |-
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#get-file").on("click", () => tryCatch(getCurrentFile));
-        $("#new-workbook-from-file").on("click", () => tryCatch(newWorkbookFromFile));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("get-file").addEventListener("click", () => tryCatch(getCurrentFile));
+        document.getElementById("new-workbook-from-file").addEventListener("click", () => tryCatch(newWorkbookFromFile));
 
         function getCurrentFile() {
             const sliceSize = 4096; /*Bytes*/
@@ -35,7 +35,9 @@ script:
                 console.log("Received the full contents of the file.");
 
                 let base64string = base64js.fromByteArray(byteArray);
-                $('#file-contents').val(base64string).show();
+                const fileContentsElement = document.getElementById("file-contents") as HTMLTextAreaElement;
+                fileContentsElement.value = base64string;
+                fileContentsElement.style.display = "block";
 
                 console.log("The Base64-encoded string that represents the current document has been written to the text box. To validate the string, use the \"Create workbook from string\" button.");
             }
@@ -82,7 +84,9 @@ script:
         }
 
         async function newWorkbookFromFile() {
-            await Excel.createWorkbook($('#file-contents').text()).catch(function (error) {
+            const fileContentsElement = document.getElementById("file-contents");
+            const fileContentsText = fileContentsElement.textContent;
+            await Excel.createWorkbook(fileContentsText).catch(function (error) {
                 console.error(error);
             });
         }
@@ -153,28 +157,25 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to get the Base64-encoded string that represents the current document. It uses the getFileAsync() method to read the file in slices and then joins all slices back together to form the complete file.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>   
             <button id="get-file" class="ms-Button">
                 <span class="ms-Button-label">Get file</span>
             </button>
             <br/>
-            <textarea id="file-contents">        
-            </textarea>    
+            <textarea id="file-contents">
+            </textarea>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Create a new workbook</h3>
             <button id="new-workbook-from-file" class="ms-Button">
@@ -184,7 +185,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -203,16 +204,11 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
 
     https://unpkg.com/base64-js@1.2.1/base64js.min.js
diff --git a/samples/excel/26-document/properties.yaml b/samples/excel/26-document/properties.yaml
index 33d1c55a0..e6de99c1a 100644
--- a/samples/excel/26-document/properties.yaml
+++ b/samples/excel/26-document/properties.yaml
@@ -6,12 +6,12 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |
-        $("#set-doc-properties").on("click", () => tryCatch(setDocProperties));
-        $("#get-doc-properties").on("click", () => tryCatch(getDocProperties));
-        $("#set-custom-doc-properties").on("click", () => tryCatch(setCustomDocProperties));
-        $("#get-custom-doc-properties").on("click", () => tryCatch(getCustomDocProperties));
-        $("#get-count-custom-doc-properties").on("click", () => tryCatch(getCountCustomDocProperties));
+    content: |-
+        document.getElementById("set-doc-properties").addEventListener("click", () => tryCatch(setDocProperties));
+        document.getElementById("get-doc-properties").addEventListener("click", () => tryCatch(getDocProperties));
+        document.getElementById("set-custom-doc-properties").addEventListener("click", () => tryCatch(setCustomDocProperties));
+        document.getElementById("get-custom-doc-properties").addEventListener("click", () => tryCatch(getCustomDocProperties));
+        document.getElementById("get-count-custom-doc-properties").addEventListener("click", () => tryCatch(getCountCustomDocProperties));
 
         async function setDocProperties() {
             await Excel.run(async (context) => {
@@ -123,45 +123,39 @@ script:
         }
     language: typescript
 template:
-    content: |+
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to set and get document properties.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="set-doc-properties" class="ms-Button">
                 <span class="ms-Button-label">Set document properties</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="get-doc-properties" class="ms-Button">
                 <span class="ms-Button-label">Get document properties</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="set-custom-doc-properties" class="ms-Button">
                 <span class="ms-Button-label">Set custom document properties</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="get-custom-doc-properties" class="ms-Button">
                 <span class="ms-Button-label">Get custom document properties</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="get-count-custom-doc-properties" class="ms-Button">
                 <span class="ms-Button-label">Get count of custom document properties</span>
             </button>
         </section>
-
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -173,15 +167,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/30-events/data-change-event-details.yaml b/samples/excel/30-events/data-change-event-details.yaml
index 98aada662..83fb96270 100644
--- a/samples/excel/30-events/data-change-event-details.yaml
+++ b/samples/excel/30-events/data-change-event-details.yaml
@@ -6,9 +6,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.9'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#register-handler").on("click", () => tryCatch(registerChangeEventHandler));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("register-handler").addEventListener("click", () => tryCatch(registerChangeEventHandler));
 
         async function registerChangeEventHandler() {
             await Excel.run(async (context) => {
@@ -73,7 +73,6 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to use table changed events.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Setup</h3>
           <button id="setup" class="ms-Button">
@@ -90,7 +89,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -102,15 +101,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/30-events/data-changed.yaml b/samples/excel/30-events/data-changed.yaml
index c06ca44b8..4418efaff 100644
--- a/samples/excel/30-events/data-changed.yaml
+++ b/samples/excel/30-events/data-changed.yaml
@@ -7,9 +7,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#register-data-changed-handler").on("click", () => tryCatch(registerDataChangedHandler));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("register-data-changed-handler").addEventListener("click", () => tryCatch(registerDataChangedHandler));
 
         async function registerDataChangedHandler() {
             await Excel.run(async (context) => {
@@ -78,14 +78,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to register and use a handler for the data-changed event.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Create table</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="register-data-changed-handler" class="ms-Button">
@@ -106,15 +104,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/30-events/event-column-and-row-sort.yaml b/samples/excel/30-events/event-column-and-row-sort.yaml
index cfbe9d923..8fe197053 100644
--- a/samples/excel/30-events/event-column-and-row-sort.yaml
+++ b/samples/excel/30-events/event-column-and-row-sort.yaml
@@ -6,15 +6,15 @@ host: EXCEL
 api_set:
     ExcelApi: '1.10'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup)); 
-        $("#register-sort-handlers").on("click", () => tryCatch(registerSortHandlers)); 
-        $("#register-row-sort-handler").on("click", () => tryCatch(registerRowSortHandler)); 
-        $("#register-column-sort-handler").on("click", () => tryCatch(registerColumnSortHandler)); 
-        $("#sort-q1").on("click", () => tryCatch(sortTopToBottom, "Q1")); 
-        $("#sort-q3").on("click", () => tryCatch(sortTopToBottom, "Q3")); 
-        $("#sort-apples").on("click", () => tryCatch(sortLeftToRight, "Apples")); 
-        $("#sort-quinces").on("click", () => tryCatch(sortLeftToRight, "Quinces"));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("register-sort-handlers").addEventListener("click", () => tryCatch(registerSortHandlers));
+        document.getElementById("register-row-sort-handler").addEventListener("click", () => tryCatch(registerRowSortHandler));
+        document.getElementById("register-column-sort-handler").addEventListener("click", () => tryCatch(registerColumnSortHandler));
+        document.getElementById("sort-q1").addEventListener("click", () => tryCatch(sortTopToBottom, "Q1"));
+        document.getElementById("sort-q3").addEventListener("click", () => tryCatch(sortTopToBottom, "Q3"));
+        document.getElementById("sort-apples").addEventListener("click", () => tryCatch(sortLeftToRight, "Apples"));
+        document.getElementById("sort-quinces").addEventListener("click", () => tryCatch(sortLeftToRight, "Quinces"));
         async function registerSortHandlers() {
             registerRowSortHandler();
             registerColumnSortHandler();
@@ -153,14 +153,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to register and use handlers for the column and row sorting events.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Add sample data</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="register-sort-handlers" class="ms-Button">
@@ -194,15 +192,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/30-events/event-worksheet-single-click.yaml b/samples/excel/30-events/event-worksheet-single-click.yaml
index 040716c50..613db7ddb 100644
--- a/samples/excel/30-events/event-worksheet-single-click.yaml
+++ b/samples/excel/30-events/event-worksheet-single-click.yaml
@@ -7,7 +7,7 @@ api_set:
     ExcelApi: '1.10'
 script:
     content: |-
-        $("#register-click-handler").on("click", () => tryCatch(registerClickHandler)); 
+        document.getElementById("register-click-handler").addEventListener("click", () => tryCatch(registerClickHandler));
 
         async function registerClickHandler() {
             await Excel.run(async (context) => {
@@ -40,7 +40,6 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to register and use a handler for the single-click event.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <p>Use the button below to register the event handler. Then, left-click around the worksheet and check the console.
@@ -63,15 +62,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/30-events/events-chart-activated.yaml b/samples/excel/30-events/events-chart-activated.yaml
index e52230fc1..a3e824e2b 100644
--- a/samples/excel/30-events/events-chart-activated.yaml
+++ b/samples/excel/30-events/events-chart-activated.yaml
@@ -7,10 +7,10 @@ api_set:
     ExcelApi: '1.8'
 script:
     content: |-
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#register-onactivated-deactivated-handlers").on("click", () => tryCatch(registerActivationHandlers));
-        $("#create-pie-chart").on("click", () => tryCatch(createPieChart));
-        $("#create-cylinder-chart").on("click", () => tryCatch(createCylinderChart));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("register-onactivated-deactivated-handlers").addEventListener("click", () => tryCatch(registerActivationHandlers));
+        document.getElementById("create-pie-chart").addEventListener("click", () => tryCatch(createPieChart));
+        document.getElementById("create-cylinder-chart").addEventListener("click", () => tryCatch(createCylinderChart));
 
         async function registerActivationHandlers() {
             await Excel.run(async (context) => {
@@ -139,14 +139,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to register and use handlers for the Chart onActivated and onDeactivated events.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Setup</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Click the button to register handlers for the pie chart's activated and deactivated events. Then click the chart to activate it. Watch the console. Finally, click the cylinder chart to deactivate the pie chart.</p>
@@ -168,15 +166,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/30-events/events-chartcollection-added-activated.yaml b/samples/excel/30-events/events-chartcollection-added-activated.yaml
index 52f69d3ce..09ea40ada 100644
--- a/samples/excel/30-events/events-chartcollection-added-activated.yaml
+++ b/samples/excel/30-events/events-chartcollection-added-activated.yaml
@@ -1,15 +1,15 @@
 order: 1
 id: excel-events-chartcollection-added-activated
 name: Chart collection events
-description: 'Registers event handlers on a worksheet''s chart collection that run when any chart within is activated or deactivated, as well as when charts are added to or deleted from the collection.'
+description: Registers event handlers on a worksheet's chart collection that run when any chart within is activated or deactivated, as well as when charts are added to or deleted from the collection.
 host: EXCEL
 api_set:
     ExcelApi: '1.8'
 script:
     content: |-
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#register-chartcollection-handlers").on("click", () => tryCatch(registerChartCollectionHandlers));
-        $("#add-chart").on("click", () => tryCatch(createPieChart));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("register-chartcollection-handlers").addEventListener("click", () => tryCatch(registerChartCollectionHandlers));
+        document.getElementById("add-chart").addEventListener("click", () => tryCatch(createPieChart));
 
         async function registerChartCollectionHandlers() {
             await Excel.run(async (context) => {
@@ -113,14 +113,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to register and use handlers for the ChartCollection onAdded, onDeleted, onActivated, and onDeactivated events.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Setup</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Click the button to register and use handlers for the worksheet's ChartCollection events. </p>
@@ -149,15 +147,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/30-events/events-comment-event-handler.yaml b/samples/excel/30-events/events-comment-event-handler.yaml
index 7c93c9d66..451e5852c 100644
--- a/samples/excel/30-events/events-comment-event-handler.yaml
+++ b/samples/excel/30-events/events-comment-event-handler.yaml
@@ -1,17 +1,17 @@
 order: 4
 id: excel-events-comments
 name: Comment events
-description: 'Registers event handlers to listen for comment additions, changes, and deletions.'
+description: Registers event handlers to listen for comment additions, changes, and deletions.
 host: EXCEL
 api_set:
     ExcelAPI: '1.12'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup)); 
-        $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers)); 
-        $("#add-comment").on("click", () => tryCatch(addComment)); 
-        $("#edit-comment").on("click", () => tryCatch(editComment)); 
-        $("#delete-comment").on("click", () => tryCatch(deleteComment));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers));
+        document.getElementById("add-comment").addEventListener("click", () => tryCatch(addComment));
+        document.getElementById("edit-comment").addEventListener("click", () => tryCatch(editComment));
+        document.getElementById("delete-comment").addEventListener("click", () => tryCatch(deleteComment));
 
         async function registerEventHandlers() {
             await Excel.run(async (context) => {
@@ -152,7 +152,7 @@ template:
             <button id="delete-comment" class="ms-Button">
                 <span class="ms-Button-label">Remove comment</span>
             </button>
-        </section>    
+        </section>
     language: html
 style:
     content: |-
@@ -167,15 +167,9 @@ style:
             min-width: 80px;
         }
         language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/30-events/events-disable-events.yaml b/samples/excel/30-events/events-disable-events.yaml
index 8f108feb9..80390cd6a 100644
--- a/samples/excel/30-events/events-disable-events.yaml
+++ b/samples/excel/30-events/events-disable-events.yaml
@@ -6,11 +6,11 @@ host: EXCEL
 api_set:
     ExcelApi: '1.8'
 script:
-    content: |
-        $("#toggleEvents").on("click", () => tryCatch(toggleEvents));
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#refreshData").on("click", () => tryCatch(addOrRefreshData));
-        $("#registerSumChangedHandlers").on("click", () => tryCatch(registerSumChangedHandlers));
+    content: |-
+        document.getElementById("toggleEvents").addEventListener("click", () => tryCatch(toggleEvents));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("refreshData").addEventListener("click", () => tryCatch(addOrRefreshData));
+        document.getElementById("registerSumChangedHandlers").addEventListener("click", () => tryCatch(registerSumChangedHandlers));
 
         async function toggleEvents() {
             await Excel.run(async (context) => {
@@ -174,14 +174,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/30-events/events-formula-changed.yaml b/samples/excel/30-events/events-formula-changed.yaml
index ab63491cd..fddc2c4a5 100644
--- a/samples/excel/30-events/events-formula-changed.yaml
+++ b/samples/excel/30-events/events-formula-changed.yaml
@@ -6,10 +6,10 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.13'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup)); 
-        $("#register-formula-change-handler").on("click", () => tryCatch(registerFormulaChangeHandler)); 
-        $("#trigger-formula-change").on("click", () => tryCatch(triggerFormulaChange));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("register-formula-change-handler").addEventListener("click", () => tryCatch(registerFormulaChangeHandler));
+        document.getElementById("trigger-formula-change").addEventListener("click", () => tryCatch(triggerFormulaChange));
 
         async function registerFormulaChangeHandler() {
           await Excel.run(async (context) => {
@@ -117,15 +117,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/30-events/events-table-changed.yaml b/samples/excel/30-events/events-table-changed.yaml
index 5f492e97b..e5dfb7b9f 100644
--- a/samples/excel/30-events/events-table-changed.yaml
+++ b/samples/excel/30-events/events-table-changed.yaml
@@ -6,12 +6,12 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |+
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#register-on-changed-handler").on("click", () => tryCatch(registerOnChangedHandler));
-        $("#change-data").on("click", () => tryCatch(changeData));
-        $("#register-on-selection-changed-handler").on("click", () => tryCatch(registerOnSelectionChangedHandler));
-        $("#change-selection").on("click", () => tryCatch(changeSelection));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("register-on-changed-handler").addEventListener("click", () => tryCatch(registerOnChangedHandler));
+        document.getElementById("change-data").addEventListener("click", () => tryCatch(changeData));
+        document.getElementById("register-on-selection-changed-handler").addEventListener("click", () => tryCatch(registerOnSelectionChangedHandler));
+        document.getElementById("change-selection").addEventListener("click", () => tryCatch(changeSelection));
 
         async function registerOnChangedHandler() {
             await Excel.run(async (context) => {
@@ -104,54 +104,44 @@ script:
                 console.error(error);
             }
         }
-
-
-
     language: typescript
 template:
-    content: |+
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to register and use event handlers for table onChanged and onSelectionChanged events.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="register-on-changed-handler" class="ms-Button">
                 <span class="ms-Button-label">Register onChanged event handler</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <p>Changing data in a table triggers the data changed event. You can change the data manually or programmatically.</p>
             <button id="change-data" class="ms-Button">
                 <span class="ms-Button-label">Change data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="register-on-selection-changed-handler" class="ms-Button">
                 <span class="ms-Button-label">Register onSelectionChanged event handler</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
                 <p>Changing a range selection in a table triggers the table onSelectionChanged event. You can change selection manually or programmatically.</p>
             <button id="change-selection" class="ms-Button">
                 <span class="ms-Button-label">Change range selection</span>
             </button>
         </section>
-
-
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -163,15 +153,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/30-events/events-tablecollection-changed.yaml b/samples/excel/30-events/events-tablecollection-changed.yaml
index a89249d7f..4e1d575b3 100644
--- a/samples/excel/30-events/events-tablecollection-changed.yaml
+++ b/samples/excel/30-events/events-tablecollection-changed.yaml
@@ -6,10 +6,10 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |+
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#register-on-changed-handler").on("click", () => tryCatch(registerOnChangedHandler));
-        $("#change-data").on("click", () => tryCatch(changeData));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("register-on-changed-handler").addEventListener("click", () => tryCatch(registerOnChangedHandler));
+        document.getElementById("change-data").addEventListener("click", () => tryCatch(changeData));
 
         async function registerOnChangedHandler() {
             await Excel.run(async (context) => {
@@ -111,40 +111,33 @@ script:
                 console.error(error);
             }
         }
-
-
-
     language: typescript
 template:
-    content: |+
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to register and use an event handler for table collection onChanged event.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="register-on-changed-handler" class="ms-Button">
                 <span class="ms-Button-label">Register onChanged event handler</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <p>Changing data in tables triggers the data changed event. You can change the data manually or programmatically.</p>
             <button id="change-data" class="ms-Button">
                 <span class="ms-Button-label">Change data</span>
             </button>
         </section>
-
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -156,15 +149,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/30-events/events-workbook-activated.yaml b/samples/excel/30-events/events-workbook-activated.yaml
index 0cc221ea1..40f11633c 100644
--- a/samples/excel/30-events/events-workbook-activated.yaml
+++ b/samples/excel/30-events/events-workbook-activated.yaml
@@ -6,8 +6,8 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.13'
 script:
-    content: |
-        $("#register-event-handler").on("click", () => tryCatch(registerEventHandler));
+    content: |-
+        document.getElementById("register-event-handler").addEventListener("click", () => tryCatch(registerEventHandler));
 
         async function workbookActivated(event: Excel.WorkbookActivatedEventArgs) {
           await Excel.run(async (context) => {
@@ -45,7 +45,6 @@ template:
           <p>Once the event handler is registered, a notification prints to the console when the workbook is activated. Try
             switching to another application and then switching back to Excel to see the console notification.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Try it out</h3>
           <button id="register-event-handler" class="ms-Button">
@@ -66,15 +65,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml b/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml
index a16ecb91d..166a02278 100644
--- a/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml
+++ b/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml
@@ -1,23 +1,23 @@
 order: 14
 id: excel-events-workbook-and-worksheet-collection
 name: Workbook and worksheet collection events
-description: 'Registers event handlers that run when a worksheet is added, activated, or deactivated, or when the settings of a workbook are changed.'
+description: Registers event handlers that run when a worksheet is added, activated, or deactivated, or when the settings of a workbook are changed.
 author: OfficeDev
 host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
     content: |-
-        $("#register-on-add-handler").on("click", () => tryCatch(registerOnAddHandler));
-        $("#add-worksheet").on("click", () => tryCatch(addWorksheet));
+        document.getElementById("register-on-add-handler").addEventListener("click", () => tryCatch(registerOnAddHandler));
+        document.getElementById("add-worksheet").addEventListener("click", () => tryCatch(addWorksheet));
 
-        $("#register-on-activate-handler").on("click", () => tryCatch(registerOnActivateHandler));
-        $("#register-on-deactivate-handler").on("click", () => tryCatch(registerOnDeactivateHandler));
-        $("#delete-worksheet").on("click", () => tryCatch(deleteWorksheet));
+        document.getElementById("register-on-activate-handler").addEventListener("click", () => tryCatch(registerOnActivateHandler));
+        document.getElementById("register-on-deactivate-handler").addEventListener("click", () => tryCatch(registerOnDeactivateHandler));
+        document.getElementById("delete-worksheet").addEventListener("click", () => tryCatch(deleteWorksheet));
 
-        $("#create-setting").on("click", () => tryCatch(createSetting));
-        $("#change-setting").on("click", () => tryCatch(changeSetting));
-        $("#register-settings-changed-handler").on("click", () => tryCatch(registerSettingsChangedHandler));
+        document.getElementById("create-setting").addEventListener("click", () => tryCatch(createSetting));
+        document.getElementById("change-setting").addEventListener("click", () => tryCatch(changeSetting));
+        document.getElementById("register-settings-changed-handler").addEventListener("click", () => tryCatch(registerSettingsChangedHandler));
 
         async function registerOnAddHandler() {
             await Excel.run(async (context) => {
@@ -174,10 +174,8 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to register and use handlers for when a worksheet is added, activated, or deactivated, or when the settings of a workbook are changed.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
-
             <p><b>Added</b></p>
             <section class="ms-Fabric samples ms-font-m">
                 <button id="register-on-add-handler" class="ms-Button">
@@ -187,7 +185,6 @@ template:
                     <span class="ms-Button-label">Add worksheet</span>
                 </button>
             </section>
-
             <p><b>Activated/Deactivated</b></p>
             <button id="register-on-activate-handler" class="ms-Button">
                 <span class="ms-Button-label">Register onActivated event handler</span>
@@ -198,7 +195,6 @@ template:
             <button id="delete-worksheet" class="ms-Button">
                 <span class="ms-Button-label">Delete worksheet</span>
             </button>
-
             <p><b>Settings</b></p>
             <button id="create-setting" class="ms-Button">
                 <span class="ms-Button-label">Create setting</span>
@@ -212,7 +208,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -224,15 +220,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/30-events/events-worksheet-protection.yaml b/samples/excel/30-events/events-worksheet-protection.yaml
index 03db0d53a..8b83fc7cc 100644
--- a/samples/excel/30-events/events-worksheet-protection.yaml
+++ b/samples/excel/30-events/events-worksheet-protection.yaml
@@ -6,9 +6,9 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.14'
 script:
-    content: |
-        $("#register-event").on("click", () => tryCatch(registerEvent));
-        $("#change-protection").on("click", () => tryCatch(changeProtection));
+    content: |-
+        document.getElementById("register-event").addEventListener("click", () => tryCatch(registerEvent));
+        document.getElementById("change-protection").addEventListener("click", () => tryCatch(changeProtection));
 
         async function registerEvent() {
             // This function registers an event handler for the onProtectionChanged event of a worksheet.
@@ -82,7 +82,7 @@ template:
             <button id="change-protection" class="ms-Button">
                 <span class="ms-Button-label">Toggle worksheet protection</span>
             </button>
-        </section>  
+        </section>
     language: html
 style:
     content: |-
@@ -97,15 +97,9 @@ style:
             min-width: 80px;
         }
         language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/30-events/events-worksheet.yaml b/samples/excel/30-events/events-worksheet.yaml
index 9ef3fe796..77b2aee9b 100644
--- a/samples/excel/30-events/events-worksheet.yaml
+++ b/samples/excel/30-events/events-worksheet.yaml
@@ -1,23 +1,23 @@
 order: 15
 id: excel-events-worksheet
 name: Worksheet events
-description: 'Registers event handlers that run when data is changed in worksheet, the selected range changes in a worksheet, or the worksheet is recalculated.'
+description: Registers event handlers that run when data is changed in worksheet, the selected range changes in a worksheet, or the worksheet is recalculated.
 author: OfficeDev
 host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
     content: |-
-        $("#setup").on("click", () => tryCatch(setup));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
-        $("#register-on-selection-changed-handler").on("click", () => tryCatch(registerSelectionChangedHandler));
-        $("#select-range").on("click", () => tryCatch(selectRange));
+        document.getElementById("register-on-selection-changed-handler").addEventListener("click", () => tryCatch(registerSelectionChangedHandler));
+        document.getElementById("select-range").addEventListener("click", () => tryCatch(selectRange));
 
-        $("#register-on-changed-handler").on("click", () => tryCatch(registerOnChangedHandler));
-        $("#register-onCalculated-handler").on("click", () => tryCatch(registerOnCalculatedHandler));
-        $("#recalculate").on("click", () => tryCatch(recalculate));
+        document.getElementById("register-on-changed-handler").addEventListener("click", () => tryCatch(registerOnChangedHandler));
+        document.getElementById("register-onCalculated-handler").addEventListener("click", () => tryCatch(registerOnCalculatedHandler));
+        document.getElementById("recalculate").addEventListener("click", () => tryCatch(recalculate));
 
-        $("#delete-data").on("click", () => tryCatch(deleteData));
+        document.getElementById("delete-data").addEventListener("click", () => tryCatch(deleteData));
 
         async function registerSelectionChangedHandler() {
             await Excel.run(async (context) => {
@@ -172,17 +172,14 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to register and use an event handler for the worksheet onSelectionChanged event.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Add sample data</span>
         </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
-
             <p><b>Selection Changed</b></p><section class="ms-Fabric samples ms-font-m">
             <button id="register-on-selection-changed-handler" class="ms-Button">
                 <span class="ms-Button-label">Register onSelectionChanged handler</span>
@@ -208,7 +205,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -220,15 +217,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/30-events/selection-changed-events.yaml b/samples/excel/30-events/selection-changed-events.yaml
index eb8611711..cce99d599 100644
--- a/samples/excel/30-events/selection-changed-events.yaml
+++ b/samples/excel/30-events/selection-changed-events.yaml
@@ -7,9 +7,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers));
 
         async function registerEventHandlers() {
           await Excel.run(async (context) => {
@@ -101,11 +101,10 @@ script:
         }
     language: typescript
 template:
-    content: |+
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to register and use event handlers for table <code>onChanged</code> and <code>onSelectionChanged</code> events.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
@@ -122,19 +121,15 @@ template:
               <li><code>WorksheetCollection</code></li>
             </ul>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <p>The console will log the addresses reported by the different <code>onSelectionChanged</code> events. Change the cell or cells selected in the worksheet to see the results. Try selecting single cells, multiple cells, and multiple discontiguous cells.</p>
         </section>
-
-
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -146,15 +141,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/34-named-item/create-and-remove-named-item.yaml b/samples/excel/34-named-item/create-and-remove-named-item.yaml
index f7576b8cb..05d26ce65 100644
--- a/samples/excel/34-named-item/create-and-remove-named-item.yaml
+++ b/samples/excel/34-named-item/create-and-remove-named-item.yaml
@@ -1,19 +1,19 @@
 order: 1
 id: excel-named-item-create-and-remove-named-item
-name: 'Create, access, and remove'
-description: 'Creates, accesses, and removes named items in a worksheet.'
+name: Create, access, and remove
+description: Creates, accesses, and removes named items in a worksheet.
 host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
     content: |-
-        $("#setup").on("click", () => tryCatch(setup));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
-        $("#add-name-to-total").on("click", () => tryCatch(addNameToTotal));
-        $("#add-name-to-header").on("click", () => tryCatch(addNameToHeader));
-        $("#format-named-range").on("click", () => tryCatch(formatRangeByName));
-        $("#remove-name").on("click", () => tryCatch(removeName));
-        $("#list-named-items").on("click", () => tryCatch(listNamedItems));
+        document.getElementById("add-name-to-total").addEventListener("click", () => tryCatch(addNameToTotal));
+        document.getElementById("add-name-to-header").addEventListener("click", () => tryCatch(addNameToHeader));
+        document.getElementById("format-named-range").addEventListener("click", () => tryCatch(formatRangeByName));
+        document.getElementById("remove-name").addEventListener("click", () => tryCatch(removeName));
+        document.getElementById("list-named-items").addEventListener("click", () => tryCatch(listNamedItems));
 
         async function addNameToTotal() {
             await Excel.run(async (context) => {
@@ -182,11 +182,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to create, access, and delete named items.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Setup</h3>
             <button id="setup" class="ms-Button">
@@ -224,15 +223,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/34-named-item/update-named-item.yaml b/samples/excel/34-named-item/update-named-item.yaml
index ee9c7d502..a82b5408c 100644
--- a/samples/excel/34-named-item/update-named-item.yaml
+++ b/samples/excel/34-named-item/update-named-item.yaml
@@ -8,9 +8,9 @@ api_set:
     ExcelApi: '1.7'
 script:
     content: |-
-        $("#add-named-item").on("click", () => tryCatch(addNamedItem));
-        $("#update-named-item").on("click", () => tryCatch(updateNamedItem));
-        $("#setup").on("click", () => tryCatch(setup));
+        document.getElementById("add-named-item").addEventListener("click", () => tryCatch(addNamedItem));
+        document.getElementById("update-named-item").addEventListener("click", () => tryCatch(updateNamedItem));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function addNamedItem() {
             await Excel.run(async (context) => {
@@ -94,7 +94,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to create and update a named item.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Setup</h3>
             <button id="setup" class="ms-Button">
@@ -110,7 +109,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -123,14 +122,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/38-pivottable/pivottable-calculations.yaml b/samples/excel/38-pivottable/pivottable-calculations.yaml
index 83f508cfe..602a9788e 100644
--- a/samples/excel/38-pivottable/pivottable-calculations.yaml
+++ b/samples/excel/38-pivottable/pivottable-calculations.yaml
@@ -8,11 +8,11 @@ api_set:
     ExcelApi: '1.8'
 script:
     content: |-
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#deletePivot").on("click", () => tryCatch(deletePivot));
-        $("#showPercentages").on("click", () => tryCatch(showPercentages));
-        $("#showDifferenceFrom").on("click", () => tryCatch(showDifferenceFrom));
-        $("#showSums").on("click", () => tryCatch(showSums));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("deletePivot").addEventListener("click", () => tryCatch(deletePivot));
+        document.getElementById("showPercentages").addEventListener("click", () => tryCatch(showPercentages));
+        document.getElementById("showDifferenceFrom").addEventListener("click", () => tryCatch(showDifferenceFrom));
+        document.getElementById("showSums").addEventListener("click", () => tryCatch(showSums));
 
         async function showPercentages() {
             await Excel.run(async (context) => {
@@ -152,21 +152,19 @@ script:
                 // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
                 console.error(error);
             }
-        }        
+        }
     language: typescript
 template:
     content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to change the calculations of PivotTable data hierarchies.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Setup sample</span>
             </button>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Try it out</h3>
             <button id="showPercentages" class="ms-Button">
@@ -179,7 +177,6 @@ template:
                 <span class="ms-Button-label">Show sums</span>
             </button>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Clean up</h3>
             <button id="deletePivot" class="ms-Button">
@@ -199,15 +196,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/38-pivottable/pivottable-create-and-modify.yaml b/samples/excel/38-pivottable/pivottable-create-and-modify.yaml
index c74946a22..a69c70a56 100644
--- a/samples/excel/38-pivottable/pivottable-create-and-modify.yaml
+++ b/samples/excel/38-pivottable/pivottable-create-and-modify.yaml
@@ -8,15 +8,15 @@ api_set:
     ExcelApi: '1.8'
 script:
     content: |-
-        $("#deletePivot").on("click", () => tryCatch(deletePivot));
-        $("#createWithNames").on("click", () => tryCatch(createWithNames));
-        $("#addRow").on("click", () => tryCatch(addRow));
-        $("#removeRow").on("click", () => tryCatch(removeRow));
-        $("#toggleColumn").on("click", () => tryCatch(toggleColumn));
-        $("#addValues").on("click", () => tryCatch(addValues));
-        $("#changeHierarchyNames").on("click", () => tryCatch(changeHierarchyNames));
-        $("#changeLayout").on("click", () => tryCatch(changeLayout));
-        $("#setup").on("click", () => tryCatch(setup));
+        document.getElementById("deletePivot").addEventListener("click", () => tryCatch(deletePivot));
+        document.getElementById("createWithNames").addEventListener("click", () => tryCatch(createWithNames));
+        document.getElementById("addRow").addEventListener("click", () => tryCatch(addRow));
+        document.getElementById("removeRow").addEventListener("click", () => tryCatch(removeRow));
+        document.getElementById("toggleColumn").addEventListener("click", () => tryCatch(toggleColumn));
+        document.getElementById("addValues").addEventListener("click", () => tryCatch(addValues));
+        document.getElementById("changeHierarchyNames").addEventListener("click", () => tryCatch(changeHierarchyNames));
+        document.getElementById("changeLayout").addEventListener("click", () => tryCatch(changeLayout));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function createWithNames() {
             await Excel.run(async (context) => {
@@ -198,7 +198,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to create PivotTables and add hierarchies to form rows, columns, and data sets.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
@@ -214,7 +213,6 @@ template:
                 <span class="ms-Button-label">Create</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <p><b>Adjust the PivotTable</b></p>
             <button id="addRow" class="ms-Button">
@@ -233,7 +231,6 @@ template:
                 <span class="ms-Button-label">Add data hierarchies</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <p><b>Adjust formatting</b></p>
             <button id="changeHierarchyNames" class="ms-Button">
@@ -244,7 +241,6 @@ template:
                 <span class="ms-Button-label">Change pivot layout</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <p><b>Delete the PivotTable</b></p>
             <button id="deletePivot" class="ms-Button">
@@ -264,15 +260,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/38-pivottable/pivottable-filters-and-summaries.yaml b/samples/excel/38-pivottable/pivottable-filters-and-summaries.yaml
index 34316aa2a..7dd446c5d 100644
--- a/samples/excel/38-pivottable/pivottable-filters-and-summaries.yaml
+++ b/samples/excel/38-pivottable/pivottable-filters-and-summaries.yaml
@@ -8,15 +8,15 @@ api_set:
     ExcelApi: '1.8'
 script:
     content: |-
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#deletePivot").on("click", () => tryCatch(deletePivot));
-        $("#filter").on("click", () => tryCatch(filter));
-        $("#getCrateTotal").on("click", () => tryCatch(getCrateTotal));
-        $("#minFunc").on("click", () => tryCatch(minFunc));
-        $("#maxFunc").on("click", () => tryCatch(maxFunc));
-        $("#countFunc").on("click", () => tryCatch(countFunc));
-        $("#avgFunc").on("click", () => tryCatch(avgFunc));
-        $("#sumFunc").on("click", () => tryCatch(sumFunc));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("deletePivot").addEventListener("click", () => tryCatch(deletePivot));
+        document.getElementById("filter").addEventListener("click", () => tryCatch(filter));
+        document.getElementById("getCrateTotal").addEventListener("click", () => tryCatch(getCrateTotal));
+        document.getElementById("minFunc").addEventListener("click", () => tryCatch(minFunc));
+        document.getElementById("maxFunc").addEventListener("click", () => tryCatch(maxFunc));
+        document.getElementById("countFunc").addEventListener("click", () => tryCatch(countFunc));
+        document.getElementById("avgFunc").addEventListener("click", () => tryCatch(avgFunc));
+        document.getElementById("sumFunc").addEventListener("click", () => tryCatch(sumFunc));
 
         async function filter(functionType: Excel.AggregationFunction) {
             await Excel.run(async (context) => {
@@ -150,25 +150,22 @@ script:
                 // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
                 console.error(error);
             }
-        }        
+        }
     language: typescript
 template:
     content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to filter PivotTables and manipulate their data.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Setup sample</span>
             </button>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Try it out</h3>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <p><b>Change functions</b></p>
             <button id="minFunc" class="ms-Button">
@@ -187,21 +184,18 @@ template:
                 <span class="ms-Button-label">Switch to sums</span>
             </button>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <p><b>Filtering</b></p>
             <button id="filter" class="ms-Button">
                 <span class="ms-Button-label">Enable filter</span>
             </button><p />
             <span>After pressing the "Enable filter" button, manually select the classification filter for the PivotTable</span>
-
         <section class="ms-Fabric setup ms-font-m">
             <p><b>Data Manipulation</b></p>
             <button id="getCrateTotal" class="ms-Button">
                 <span class="ms-Button-label">Get or refresh crate total</span>
             </button>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Clean up</h3>
             <button id="deletePivot" class="ms-Button">
@@ -221,15 +215,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/38-pivottable/pivottable-get-pivottables.yaml b/samples/excel/38-pivottable/pivottable-get-pivottables.yaml
index 1c8206321..2f65a1dbb 100644
--- a/samples/excel/38-pivottable/pivottable-get-pivottables.yaml
+++ b/samples/excel/38-pivottable/pivottable-get-pivottables.yaml
@@ -6,11 +6,11 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.12'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#get-pivottables-in-workbook").on("click", () => tryCatch(getPivotTablesInWorkbook)); 
-        $("#get-pivottables-in-worksheet").on("click", () => tryCatch(getPivotTablesInWorksheet)); 
-        $("#get-pivottables-in-selected-range").on("click", () => tryCatch(getPivotTablesInSelectedRange));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("get-pivottables-in-workbook").addEventListener("click", () => tryCatch(getPivotTablesInWorkbook));
+        document.getElementById("get-pivottables-in-worksheet").addEventListener("click", () => tryCatch(getPivotTablesInWorksheet));
+        document.getElementById("get-pivottables-in-selected-range").addEventListener("click", () => tryCatch(getPivotTablesInSelectedRange));
 
         async function getPivotTablesInWorkbook() {
           await Excel.run(async (context) => {
@@ -143,7 +143,6 @@ template:
           <p>This sample shows how to get PivotTables in the workbook. You can get them through PivotTableCollection objects
             or by querying a Range object containing PivotTable data.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <p> This creates a data sheet and two PivotTables in two different worksheets.
@@ -151,11 +150,9 @@ template:
                 <span class="ms-Button-label">Set up sample</span>
             </button>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Try it out</h3>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <button id="get-pivottables-in-workbook" class="ms-Button">
             <span class="ms-Button-label">Get PivotTables in the workbook</span>
@@ -185,15 +182,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/38-pivottable/pivottable-pivotfilters.yaml b/samples/excel/38-pivottable/pivottable-pivotfilters.yaml
index b4530456f..1d2bcef68 100644
--- a/samples/excel/38-pivottable/pivottable-pivotfilters.yaml
+++ b/samples/excel/38-pivottable/pivottable-pivotfilters.yaml
@@ -6,15 +6,15 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.12'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#manual-filter").on("click", () => tryCatch(manualFilter));
-        $("#date-filter").on("click", () => tryCatch(dateFilter));
-        $("#value-filter").on("click", () => tryCatch(valueFilter));
-        $("#label-filter").on("click", () => tryCatch(labelFilter));
-        $("#clear-filters").on("click", () => tryCatch(clearFilters));
-        $("#log-filters").on("click", () => tryCatch(logFilters));
-        $("#get-crate-total").on("click", () => tryCatch(getCrateTotal));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("manual-filter").addEventListener("click", () => tryCatch(manualFilter));
+        document.getElementById("date-filter").addEventListener("click", () => tryCatch(dateFilter));
+        document.getElementById("value-filter").addEventListener("click", () => tryCatch(valueFilter));
+        document.getElementById("label-filter").addEventListener("click", () => tryCatch(labelFilter));
+        document.getElementById("clear-filters").addEventListener("click", () => tryCatch(clearFilters));
+        document.getElementById("log-filters").addEventListener("click", () => tryCatch(logFilters));
+        document.getElementById("get-crate-total").addEventListener("click", () => tryCatch(getCrateTotal));
 
         async function manualFilter() {
           await Excel.run(async (context) => {
@@ -256,18 +256,15 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to filter PivotTables with the different PivotFilters.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Setup sample</span>
             </button>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Try it out</h3>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <p><b>Filters</b></p>
           <p><i>Manual filter</i></p>
@@ -289,7 +286,6 @@ template:
           <button id="label-filter" class="ms-Button">
               <span class="ms-Button-label">Remove lemons and limes</span>
           </button>
-
           <p><b>PivotTable Status</b></p>
           <p /><button id="get-crate-total" class="ms-Button">
               <span class="ms-Button-label">Get crate totals</span>
@@ -314,15 +310,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/38-pivottable/pivottable-pivotlayout.yaml b/samples/excel/38-pivottable/pivottable-pivotlayout.yaml
index 67dd27b52..28b07c491 100644
--- a/samples/excel/38-pivottable/pivottable-pivotlayout.yaml
+++ b/samples/excel/38-pivottable/pivottable-pivotlayout.yaml
@@ -6,18 +6,18 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.13'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup)); 
-        $("#change-layout").on("click", () => tryCatch(changeLayout)); 
-        $("#add-alt-text").on("click", () => tryCatch(addAltText)); 
-        $("#add-line-spacing").on("click", () => tryCatch(addLineSpacing)); 
-        $("#repeat-item-labels").on("click", () => tryCatch(repeatItemLabels)); 
-        $("#toggle-field-headers").on("click", () => tryCatch(toggleFieldHeaders)); 
-        $("#toggle-grand-totals").on("click", () => tryCatch(toggleGrandTotals)); 
-        $("#set-empty-cell-text").on("click", () => tryCatch(setEmptyCellText)); 
-        $("#toggle-fill-empty-cells").on("click", () => tryCatch(toggleFillEmptyCells)); 
-        $("#toggle-auto-format").on("click", () => tryCatch(toggleAutoFormat)); 
-        $("#toggle-preserve-formatting").on("click", () => tryCatch(togglePreserveFormatting));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("change-layout").addEventListener("click", () => tryCatch(changeLayout));
+        document.getElementById("add-alt-text").addEventListener("click", () => tryCatch(addAltText));
+        document.getElementById("add-line-spacing").addEventListener("click", () => tryCatch(addLineSpacing));
+        document.getElementById("repeat-item-labels").addEventListener("click", () => tryCatch(repeatItemLabels));
+        document.getElementById("toggle-field-headers").addEventListener("click", () => tryCatch(toggleFieldHeaders));
+        document.getElementById("toggle-grand-totals").addEventListener("click", () => tryCatch(toggleGrandTotals));
+        document.getElementById("set-empty-cell-text").addEventListener("click", () => tryCatch(setEmptyCellText));
+        document.getElementById("toggle-fill-empty-cells").addEventListener("click", () => tryCatch(toggleFillEmptyCells));
+        document.getElementById("toggle-auto-format").addEventListener("click", () => tryCatch(toggleAutoFormat));
+        document.getElementById("toggle-preserve-formatting").addEventListener("click", () => tryCatch(togglePreserveFormatting));
 
         async function changeLayout() {
           await Excel.run(async (context) => {
@@ -252,7 +252,6 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to work with the PivotLayout class to display the PivotTable.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <button id="setup" class="ms-Button">
@@ -309,15 +308,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/38-pivottable/pivottable-refresh.yaml b/samples/excel/38-pivottable/pivottable-refresh.yaml
index 39326ca78..e2975ff72 100644
--- a/samples/excel/38-pivottable/pivottable-refresh.yaml
+++ b/samples/excel/38-pivottable/pivottable-refresh.yaml
@@ -6,10 +6,10 @@ host: EXCEL
 api_set:
     ExcelApi: '1.8'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#refresh-pivottable").on("click", () => tryCatch(refreshPivotTable));
-        $("#add-table-row").on("click", () => tryCatch(addTableRow));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("refresh-pivottable").addEventListener("click", () => tryCatch(refreshPivotTable));
+        document.getElementById("add-table-row").addEventListener("click", () => tryCatch(addTableRow));
 
         async function refreshPivotTable() {
           // This function refreshes the "Farm Sales" PivotTable,
@@ -94,7 +94,6 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to refresh a PivotTable.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Setup</h3>
           <button id="setup" class="ms-Button">
@@ -114,7 +113,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -126,15 +125,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/38-pivottable/pivottable-slicer.yaml b/samples/excel/38-pivottable/pivottable-slicer.yaml
index 05b64743f..15c781177 100644
--- a/samples/excel/38-pivottable/pivottable-slicer.yaml
+++ b/samples/excel/38-pivottable/pivottable-slicer.yaml
@@ -6,15 +6,15 @@ host: EXCEL
 api_set:
     ExcelApi: '1.10'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#add-pivot-table").on("click", () => tryCatch(addPivotTable));
-        $("#add-slicer").on("click", () => tryCatch(addSlicer));
-        $("#format-slicer").on("click", () => tryCatch(formatSlicer));
-        $("#apply-style").on("click", () => tryCatch(applyStyle));
-        $("#add-filters").on("click", () => tryCatch(addFilters));
-        $("#remove-filters").on("click", () => tryCatch(removeFilters));
-        $("#remove-slicer").on("click", () => tryCatch(removeSlicer));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-pivot-table").addEventListener("click", () => tryCatch(addPivotTable));
+        document.getElementById("add-slicer").addEventListener("click", () => tryCatch(addSlicer));
+        document.getElementById("format-slicer").addEventListener("click", () => tryCatch(formatSlicer));
+        document.getElementById("apply-style").addEventListener("click", () => tryCatch(applyStyle));
+        document.getElementById("add-filters").addEventListener("click", () => tryCatch(addFilters));
+        document.getElementById("remove-filters").addEventListener("click", () => tryCatch(removeFilters));
+        document.getElementById("remove-slicer").addEventListener("click", () => tryCatch(removeSlicer));
 
         async function addSlicer() {
             await Excel.run(async (context) => {
@@ -145,7 +145,6 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to work with a slicer on a PivotTable.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Setup</h3>
           <button id="setup" class="ms-Button">
@@ -188,7 +187,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -200,15 +199,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/38-pivottable/pivottable-source-data.yaml b/samples/excel/38-pivottable/pivottable-source-data.yaml
index fdcf8b201..75014fedb 100644
--- a/samples/excel/38-pivottable/pivottable-source-data.yaml
+++ b/samples/excel/38-pivottable/pivottable-source-data.yaml
@@ -6,9 +6,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.15'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup)); 
-        $("#get-pivottable-data-source").on("click", () => tryCatch(getPivotTableDataSource));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("get-pivottable-data-source").addEventListener("click", () => tryCatch(getPivotTableDataSource));
 
         async function getPivotTableDataSource() {
           // This function logs information about the data source of a PivotTable.
@@ -93,20 +93,18 @@ template:
           <p>This sample shows how to get information about the data source of a PivotTable. It returns the type and string representation of the data source.</p>
           <p><em>Note: This sample works in Excel on Windows and Excel on the web. It doesn't work in Excel on Mac; this is a known issue.</em></p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Set up</span>
           </button>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Try it out</h3>
           <button id="get-pivottable-data-source" class="ms-Button">
             <span class="ms-Button-label">Get PivotTable data source</span>
           </button>
-        </section>  
+        </section>
     language: html
 style:
     content: |-
@@ -121,15 +119,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/cell-properties.yaml b/samples/excel/42-range/cell-properties.yaml
index 9356ff2df..acf10f685 100644
--- a/samples/excel/42-range/cell-properties.yaml
+++ b/samples/excel/42-range/cell-properties.yaml
@@ -7,10 +7,10 @@ host: EXCEL
 api_set:
     ExcelApi: '1.9'
 script:
-    content: |
-        $("#set-cell-properties").on("click", () => tryCatch(setCellProperties));
-        $("#get-cell-properties").on("click", () => tryCatch(getCellProperties));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("set-cell-properties").addEventListener("click", () => tryCatch(setCellProperties));
+        document.getElementById("get-cell-properties").addEventListener("click", () => tryCatch(getCellProperties));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function setCellProperties() {
             await Excel.run(async (context) => {
@@ -148,14 +148,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to format a range.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="set-cell-properties" class="ms-Button">
@@ -180,15 +178,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/dynamic-arrays.yaml b/samples/excel/42-range/dynamic-arrays.yaml
index 467ab9d97..f2ab8a567 100644
--- a/samples/excel/42-range/dynamic-arrays.yaml
+++ b/samples/excel/42-range/dynamic-arrays.yaml
@@ -6,11 +6,11 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.12'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup)); 
-        $("#copy-table-headers").on("click", () => tryCatch(copyTableHeaders)); 
-        $("#apply-filter-function").on("click", () => tryCatch(applyFilterFunction)); 
-        $("#display-spill-information").on("click", () => tryCatch(displaySpillInformation));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("copy-table-headers").addEventListener("click", () => tryCatch(copyTableHeaders));
+        document.getElementById("apply-filter-function").addEventListener("click", () => tryCatch(applyFilterFunction));
+        document.getElementById("display-spill-information").addEventListener("click", () => tryCatch(displaySpillInformation));
 
         async function copyTableHeaders() {
           await Excel.run(async (context) => {
@@ -133,14 +133,12 @@ template:
           <p>This sample shows how to apply formulas that return dynamic arrays and how to get the relevant information
             about range spilling from the used ranges.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Create table</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="copy-table-headers" class="ms-Button">
@@ -159,7 +157,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -171,15 +169,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/formatting.yaml b/samples/excel/42-range/formatting.yaml
index 05549e179..3e526ce4a 100644
--- a/samples/excel/42-range/formatting.yaml
+++ b/samples/excel/42-range/formatting.yaml
@@ -7,11 +7,11 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
-        $("#set-font-and-fill-color").on("click", () => tryCatch(setFontAndFillColor));
-        $("#set-number-format").on("click", () => tryCatch(setNumberFormat));
+        document.getElementById("set-font-and-fill-color").addEventListener("click", () => tryCatch(setFontAndFillColor));
+        document.getElementById("set-number-format").addEventListener("click", () => tryCatch(setNumberFormat));
 
         async function setFontAndFillColor() {
             await Excel.run(async (context) => {
@@ -75,18 +75,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to format a range.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="set-font-and-fill-color" class="ms-Button">
@@ -98,7 +96,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -110,15 +108,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/insert-delete-clear-range.yaml b/samples/excel/42-range/insert-delete-clear-range.yaml
index c1e11736d..a762879be 100644
--- a/samples/excel/42-range/insert-delete-clear-range.yaml
+++ b/samples/excel/42-range/insert-delete-clear-range.yaml
@@ -1,18 +1,18 @@
 order: 8
 id: excel-range-insert-delete-and-clear-range
-name: 'Insert, delete, and clear'
-description: 'Inserts, deletes, and clears a range.'
+name: Insert, delete, and clear
+description: Inserts, deletes, and clears a range.
 author: OfficeDev
 host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
-        $("#insert-range").on("click", () => tryCatch(insertRange));
-        $("#delete-range").on("click", () => tryCatch(deleteRange));
-        $("#clear-range").on("click", () => tryCatch(clearRange));
+        document.getElementById("insert-range").addEventListener("click", () => tryCatch(insertRange));
+        document.getElementById("delete-range").addEventListener("click", () => tryCatch(deleteRange));
+        document.getElementById("clear-range").addEventListener("click", () => tryCatch(clearRange));
 
         async function insertRange() {
             await Excel.run(async (context) => {
@@ -85,18 +85,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to insert, delete and clear the contents of a range.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="insert-range" class="ms-Button">
@@ -111,7 +109,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -123,15 +121,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/42-range/outline.yaml b/samples/excel/42-range/outline.yaml
index 998aeaa1f..f3c53898c 100644
--- a/samples/excel/42-range/outline.yaml
+++ b/samples/excel/42-range/outline.yaml
@@ -6,14 +6,14 @@ host: EXCEL
 api_set:
     ExcelApi: '1.10'
 script:
-    content: |
-        $("#setup-data").on("click", () => tryCatch(setupData));
-        $("#setup-totals").on("click", () => tryCatch(setupTotals));
-        $("#group-rows").on("click", () => tryCatch(groupRows));
-        $("#group-columns").on("click", () => tryCatch(groupColumns));
-        $("#collapse-outline").on("click", () => tryCatch(collapseOutline));
-        $("#expand-outline").on("click", () => tryCatch(expandOutline));
-        $("#ungroup").on("click", () => tryCatch(ungroup));
+    content: |-
+        document.getElementById("setup-data").addEventListener("click", () => tryCatch(setupData));
+        document.getElementById("setup-totals").addEventListener("click", () => tryCatch(setupTotals));
+        document.getElementById("group-rows").addEventListener("click", () => tryCatch(groupRows));
+        document.getElementById("group-columns").addEventListener("click", () => tryCatch(groupColumns));
+        document.getElementById("collapse-outline").addEventListener("click", () => tryCatch(collapseOutline));
+        document.getElementById("expand-outline").addEventListener("click", () => tryCatch(expandOutline));
+        document.getElementById("ungroup").addEventListener("click", () => tryCatch(ungroup));
 
         async function groupRows() {
             Excel.run(async (context) => {
@@ -174,7 +174,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to group and ungroup rows and columns for an outline.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup-data" class="ms-Button">
@@ -185,7 +184,6 @@ template:
             <span class="ms-Button-label">Add subtotal and total cells</span>
         </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="group-rows" class="ms-Button">
@@ -226,15 +224,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/precedents.yaml b/samples/excel/42-range/precedents.yaml
index 3a47fc243..d461dea31 100644
--- a/samples/excel/42-range/precedents.yaml
+++ b/samples/excel/42-range/precedents.yaml
@@ -6,13 +6,13 @@ host: EXCEL
 api_set:
     ExcelApi: '1.14'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#select-first-cell").on("click", () => tryCatch(selectFirstCell));
-        $("#select-second-cell").on("click", () => tryCatch(selectSecondCell));
-        $("#get-direct-precedents").on("click", () => tryCatch(getDirectPrecedents));
-        $("#get-all-precedents").on("click", () => tryCatch(getAllPrecedents));
-        $("#clear-highlighting").on("click", () => tryCatch(clearFormatting));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("select-first-cell").addEventListener("click", () => tryCatch(selectFirstCell));
+        document.getElementById("select-second-cell").addEventListener("click", () => tryCatch(selectSecondCell));
+        document.getElementById("get-direct-precedents").addEventListener("click", () => tryCatch(getDirectPrecedents));
+        document.getElementById("get-all-precedents").addEventListener("click", () => tryCatch(getAllPrecedents));
+        document.getElementById("clear-highlighting").addEventListener("click", () => tryCatch(clearFormatting));
 
         /** Select a cell with precedents on one worksheet. */
         async function selectFirstCell() {
@@ -186,10 +186,10 @@ template:
           <button id="clear-highlighting" class="ms-Button"> 
             <span class="ms-Button-label">Clear highlighting</span> 
           </button>
-        </section>   
+        </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -201,15 +201,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/range-areas.yaml b/samples/excel/42-range/range-areas.yaml
index 155ef03f4..23f24ddf6 100644
--- a/samples/excel/42-range/range-areas.yaml
+++ b/samples/excel/42-range/range-areas.yaml
@@ -1,18 +1,18 @@
 order: 3
 id: excel-range-areas
 name: Discontiguous ranges (RangeAreas) and special cells
-description: 'Creates and uses RangeAreas, which are sets of ranges that need not be contiguous, through user selection and programmatic selection of special cells.'
+description: Creates and uses RangeAreas, which are sets of ranges that need not be contiguous, through user selection and programmatic selection of special cells.
 host: EXCEL
 api_set:
     ExcelApi: '1.9'
 script:
-    content: |
-        $("#reset").on("click", () => tryCatch(reset));
-        $("#color-selected-ranges").on("click", () => tryCatch(colorSelectedRanges));
-        $("#color-specified-ranges").on("click", () => tryCatch(colorSpecifiedRanges));
-        $("#color-all-formula-ranges").on("click", () => tryCatch(colorAllFormulaRanges));
-        $("#color-all-logical-text-ranges").on("click", () => tryCatch(colorAllLogicalAndTextRanges));
-        $("#read-properties-specified-ranges").on("click", () => tryCatch(readPropertiesOfSpecifiedRanges));
+    content: |-
+        document.getElementById("reset").addEventListener("click", () => tryCatch(reset));
+        document.getElementById("color-selected-ranges").addEventListener("click", () => tryCatch(colorSelectedRanges));
+        document.getElementById("color-specified-ranges").addEventListener("click", () => tryCatch(colorSpecifiedRanges));
+        document.getElementById("color-all-formula-ranges").addEventListener("click", () => tryCatch(colorAllFormulaRanges));
+        document.getElementById("color-all-logical-text-ranges").addEventListener("click", () => tryCatch(colorAllLogicalAndTextRanges));
+        document.getElementById("read-properties-specified-ranges").addEventListener("click", () => tryCatch(readPropertiesOfSpecifiedRanges));
 
         async function colorSelectedRanges() {
             await Excel.run(async (context) => {
@@ -123,11 +123,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to apply actions simultaneously to multiple, discontiguous ranges. Some of these ranges are found using the Range object's getSpecialCells method.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Set up</h3>
             <button id="reset" class="ms-Button">
@@ -170,15 +169,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/42-range/range-auto-fill.yaml b/samples/excel/42-range/range-auto-fill.yaml
index 577adb579..3130ca6f8 100644
--- a/samples/excel/42-range/range-auto-fill.yaml
+++ b/samples/excel/42-range/range-auto-fill.yaml
@@ -6,12 +6,12 @@ host: EXCEL
 api_set:
     ExcelApi: '1.10'
 script:
-    content: |
-        $("#setup-data").on("click", () => tryCatch(setupData));
-        $("#setup-first-sums").on("click", () => tryCatch(setupFirstSums));
-        $("#auto-fill-values").on("click", () => tryCatch(autoFillValues));
-        $("#auto-fill-formats").on("click", () => tryCatch(autoFillFormats));
-        $("#auto-fill-copy").on("click", () => tryCatch(autoFillCopy));
+    content: |-
+        document.getElementById("setup-data").addEventListener("click", () => tryCatch(setupData));
+        document.getElementById("setup-first-sums").addEventListener("click", () => tryCatch(setupFirstSums));
+        document.getElementById("auto-fill-values").addEventListener("click", () => tryCatch(autoFillValues));
+        document.getElementById("auto-fill-formats").addEventListener("click", () => tryCatch(autoFillFormats));
+        document.getElementById("auto-fill-copy").addEventListener("click", () => tryCatch(autoFillCopy));
 
         async function autoFillValues() {
           await Excel.run(async (context) => {
@@ -102,7 +102,6 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to provide cell data for surrounding cells using auto fill.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <button id="setup-data" class="ms-Button">
@@ -113,7 +112,6 @@ template:
             <span class="ms-Button-label">Add first sum cells</span>
         </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="auto-fill-values" class="ms-Button">
@@ -142,15 +140,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/range-cell-control.yaml b/samples/excel/42-range/range-cell-control.yaml
new file mode 100644
index 000000000..430300414
--- /dev/null
+++ b/samples/excel/42-range/range-cell-control.yaml
@@ -0,0 +1,164 @@
+order: 23
+id: excel-cell-controls
+name: Checkboxes
+description: This sample shows how to add and remove checkboxes from a table.
+host: EXCEL
+api_set:
+    ExcelApi: '1.18'
+script:
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-checkboxes").addEventListener("click", () => tryCatch(addCheckboxes));
+        document.getElementById("change-checkbox").addEventListener("click", () => tryCatch(changeCheckbox));
+        document.getElementById("remove-checkboxes").addEventListener("click", () => tryCatch(removeCheckboxes));
+        document.getElementById("remove-content").addEventListener("click", () => tryCatch(removeContent));
+
+        async function addCheckboxes() {
+          // Add checkboxes to the table.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getActiveWorksheet();
+
+            // Get the second column in the table, without the header.
+            const range = sheet.tables.getItem("FruitTable").columns.getItem("Analysis").getDataBodyRange();
+
+            // Change the boolean values to checkboxes.
+            range.control = {
+              type: Excel.CellControlType.checkbox
+            };
+            await context.sync();
+          });
+        }
+
+        async function changeCheckbox() {
+          // Change the value of the checkbox in B3.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getActiveWorksheet();
+            const range = sheet.getRange("B3");
+
+            range.values = [["TRUE"]];
+            await context.sync();
+          });
+        }
+
+        async function removeCheckboxes() {
+          // Remove checkboxes from the table.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getActiveWorksheet();
+
+            // Get the second column in the table, without the header.
+            const range = sheet.tables.getItem("FruitTable").columns.getItem("Analysis").getDataBodyRange();
+
+            // Change the checkboxes back to boolean values.
+            range.control = {
+              type: Excel.CellControlType.empty
+            };
+            await context.sync();
+          });
+        }
+
+        async function removeContent() {
+          // Remove all content from the Analysis column.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getActiveWorksheet();
+
+            // Get the second column in the table, without the header.
+            const range = sheet.tables.getItem("FruitTable").columns.getItem("Analysis").getDataBodyRange();
+
+            // Clear all the data from the second column.
+            range.clearOrResetContents();
+            await context.sync();
+          });
+        }
+
+        // Set up the sample content.
+        async function setup() {
+          await Excel.run(async (context) => {
+            context.workbook.worksheets.getItemOrNullObject("Sample").delete();
+            const sheet = context.workbook.worksheets.add("Sample");
+
+            const fruitTable = sheet.tables.add("A1:B1", true /*hasHeaders*/);
+            fruitTable.name = "FruitTable";
+
+            fruitTable.getHeaderRowRange().values = [["Fruit", "Analysis"]];
+
+            fruitTable.rows.add(null /*add at the end*/, [
+              ["Apple", "TRUE"],
+              ["Kale", "FALSE"],
+              ["Orange", "TRUE"],
+              ["Pear", "TRUE"],
+              ["Mango", "TRUE"],
+              ["Dog", "FALSE"],
+              ["Strawberry", "TRUE"],
+              ["Chair", "FALSE"],
+              ["Tomato", "UNKNOWN"] /* Only boolean values will render as checkboxes. */
+            ]);
+
+            sheet.getUsedRange().format.autofitColumns();
+            sheet.getUsedRange().format.autofitRows();
+
+            sheet.activate();
+
+            await context.sync();
+          });
+        }
+
+        /** Default helper for invoking an action and handling errors. */
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+          <p>This sample creates and table and then shows how to add, remove, and change checkboxes in the table.
+          </p>
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+          <h3>Set up</h3>
+          <button id="setup" class="ms-Button">
+            <span class="ms-Button-label">Add sample data</span> 
+          </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+          <h3>Try it out</h3>
+          <button id="add-checkboxes" class="ms-Button">
+              <span class="ms-Button-label">Add checkboxes</span>
+          </button>
+          <br>
+          <button id="change-checkbox" class="ms-Button">
+              <span class="ms-Button-label">Set B3 as TRUE</span>
+          </button>
+          <br>
+          <button id="remove-checkboxes" class="ms-Button">
+              <span class="ms-Button-label">Remove checkboxes</span>
+          </button>
+          <br>
+          <button id="remove-content" class="ms-Button">
+              <span class="ms-Button-label">Remove Analysis values</span>
+          </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/range-copyfrom.yaml b/samples/excel/42-range/range-copyfrom.yaml
index 45e31c10c..c48034c2c 100644
--- a/samples/excel/42-range/range-copyfrom.yaml
+++ b/samples/excel/42-range/range-copyfrom.yaml
@@ -6,16 +6,16 @@ host: EXCEL
 api_set:
     ExcelApi: '1.10'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#copyAll").on("click", () => tryCatch(copyAll));
-        $("#copyFormula").on("click", () => tryCatch(copyFormula));
-        $("#copyFormulaResult").on("click", () => tryCatch(copyFormulaResult));
-        $("#copySingleAcrossRange").on("click", () => tryCatch(copySingleAcrossRange));
-        $("#copyOnlyFormat").on("click", () => tryCatch(copyOnlyFormat));
-        $("#skipBlanks").on("click", () => tryCatch(skipBlanks));
-        $("#transpose").on("click", () => tryCatch(transpose));
-        $("#move").on("click", () => tryCatch(move));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("copyAll").addEventListener("click", () => tryCatch(copyAll));
+        document.getElementById("copyFormula").addEventListener("click", () => tryCatch(copyFormula));
+        document.getElementById("copyFormulaResult").addEventListener("click", () => tryCatch(copyFormulaResult));
+        document.getElementById("copySingleAcrossRange").addEventListener("click", () => tryCatch(copySingleAcrossRange));
+        document.getElementById("copyOnlyFormat").addEventListener("click", () => tryCatch(copyOnlyFormat));
+        document.getElementById("skipBlanks").addEventListener("click", () => tryCatch(skipBlanks));
+        document.getElementById("transpose").addEventListener("click", () => tryCatch(transpose));
+        document.getElementById("move").addEventListener("click", () => tryCatch(move));
 
         async function copyAll() {
             await Excel.run(async (context) => {
@@ -212,14 +212,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/range-dependents.yaml b/samples/excel/42-range/range-dependents.yaml
index 757014d57..3a7e6ccd5 100644
--- a/samples/excel/42-range/range-dependents.yaml
+++ b/samples/excel/42-range/range-dependents.yaml
@@ -6,11 +6,11 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.15'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#select-D3").on("click", () => tryCatch(selectD3));
-        $("#get-all-dependents").on("click", () => tryCatch(getAllDependents));
-        $("#clear-highlighting").on("click", () => tryCatch(clearFormatting));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("select-D3").addEventListener("click", () => tryCatch(selectD3));
+        document.getElementById("get-all-dependents").addEventListener("click", () => tryCatch(getAllDependents));
+        document.getElementById("clear-highlighting").addEventListener("click", () => tryCatch(clearFormatting));
 
         async function selectD3() {
           // This function selects a cell with dependents across both worksheets.
@@ -145,10 +145,10 @@ template:
           <button id="clear-highlighting" class="ms-Button"> 
             <span class="ms-Button-label">Clear highlighting</span> 
           </button>
-        </section>   
+        </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -160,15 +160,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/range-direct-dependents.yaml b/samples/excel/42-range/range-direct-dependents.yaml
index 09c8469e2..a4843dd2b 100644
--- a/samples/excel/42-range/range-direct-dependents.yaml
+++ b/samples/excel/42-range/range-direct-dependents.yaml
@@ -6,11 +6,11 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.13'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#select-D3").on("click", () => tryCatch(selectD3));
-        $("#select-E4").on("click", () => tryCatch(selectE4));
-        $("#get-direct-dependents").on("click", () => tryCatch(getDirectDependents));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("select-D3").addEventListener("click", () => tryCatch(selectD3));
+        document.getElementById("select-E4").addEventListener("click", () => tryCatch(selectE4));
+        document.getElementById("get-direct-dependents").addEventListener("click", () => tryCatch(getDirectDependents));
 
         /** Select a cell with direct dependents on the same worksheet. */
         async function selectD3() {
@@ -119,14 +119,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to find and highlight the dependents of the currently selected cell. Dependent cells contain formulas that refer to other cells.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Add sample data</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <p>Cells in the 'E' column have direct dependents on the same worksheet. Cells in the 'F' column have direct dependents on another worksheet.</p>
@@ -155,15 +153,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/range-find.yaml b/samples/excel/42-range/range-find.yaml
index 09f6fc1a8..a72156601 100644
--- a/samples/excel/42-range/range-find.yaml
+++ b/samples/excel/42-range/range-find.yaml
@@ -7,12 +7,12 @@ api_set:
     ExcelApi: '1.9'
 script:
     content: |-
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#findText").on("click", () => tryCatch(findText));
-        $("#findTextWithNullCheck").on("click", () => tryCatch(findTextWithNullCheck));
-        $("#toggleComplete").on("click", () => tryCatch(toggleComplete));
-        $("#toggleCase").on("click", () => tryCatch(toggleCase));
-        $("#toggleDirection").on("click", () => tryCatch(toggleDirection));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("findText").addEventListener("click", () => tryCatch(findText));
+        document.getElementById("findTextWithNullCheck").addEventListener("click", () => tryCatch(findTextWithNullCheck));
+        document.getElementById("toggleComplete").addEventListener("click", () => tryCatch(toggleComplete));
+        document.getElementById("toggleCase").addEventListener("click", () => tryCatch(toggleCase));
+        document.getElementById("toggleDirection").addEventListener("click", () => tryCatch(toggleDirection));
 
         let isCompleteMatchToggle  = false;
         let isMatchCaseToggle = false;
@@ -26,7 +26,8 @@ script:
 
                 // NOTE: If no match is found, an ItemNotFound error
                 // is thrown when Range.find is evaluated.
-                const foundRange = searchRange.find($("#searchText").val().toString(), {
+                const searchText = (document.getElementById("searchText") as HTMLTextAreaElement).value;
+                const foundRange = searchRange.find(searchText, {
                     completeMatch: isCompleteMatchToggle,
                     matchCase: isMatchCaseToggle,
                     searchDirection: searchDirectionToggle
@@ -45,7 +46,8 @@ script:
                 const sheet = context.workbook.worksheets.getItem("Sample");
                 const table = sheet.tables.getItem("ExpensesTable");
                 const searchRange = table.getRange();
-                const foundRange = searchRange.findOrNullObject($("#searchText").val().toString(), {
+                const searchText = (document.getElementById("searchText") as HTMLTextAreaElement).value;
+                const foundRange = searchRange.findOrNullObject(searchText, {
                     completeMatch: isCompleteMatchToggle,
                     matchCase: isMatchCaseToggle,
                     searchDirection: searchDirectionToggle
@@ -158,14 +160,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
-
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/range-get-range-edge.yaml b/samples/excel/42-range/range-get-range-edge.yaml
index f569750e6..9d5a21ffe 100644
--- a/samples/excel/42-range/range-get-range-edge.yaml
+++ b/samples/excel/42-range/range-get-range-edge.yaml
@@ -1,19 +1,19 @@
 order: 20
 id: excel-range-get-range-edge
 name: Select used range edge
-description: 'This sample shows how to select the edges of the used range, based on the currently selected range.'
+description: This sample shows how to select the edges of the used range, based on the currently selected range.
 host: EXCEL
 api_set:
     ExcelAPI: '1.13'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#select-E9").on("click", () => tryCatch(selectE9));
-        $("#select-D8-E9").on("click", () => tryCatch(selectD8E9));
-        $("#get-range-edge-left").on("click", () => tryCatch(getRangeEdgeLeft));
-        $("#get-range-edge-up").on("click", () => tryCatch(getRangeEdgeUp));
-        $("#get-extended-range-right").on("click", () => tryCatch(getExtendedRangeRight));
-        $("#get-extended-range-down").on("click", () => tryCatch(getExtendedRangeDown));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("select-E9").addEventListener("click", () => tryCatch(selectE9));
+        document.getElementById("select-D8-E9").addEventListener("click", () => tryCatch(selectD8E9));
+        document.getElementById("get-range-edge-left").addEventListener("click", () => tryCatch(getRangeEdgeLeft));
+        document.getElementById("get-range-edge-up").addEventListener("click", () => tryCatch(getRangeEdgeUp));
+        document.getElementById("get-extended-range-right").addEventListener("click", () => tryCatch(getExtendedRangeRight));
+        document.getElementById("get-extended-range-down").addEventListener("click", () => tryCatch(getExtendedRangeDown));
 
         async function getRangeEdgeLeft() {
           await Excel.run(async (context) => {
@@ -179,7 +179,6 @@ template:
             <span class="ms-Button-label">Add sample data</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="select-E9" class="ms-Button">
@@ -189,7 +188,7 @@ template:
             <span class="ms-Button-label">Select multiple cells</span>
           </button>
           <br>
-          <p>The first type of range edge selection selects the cell at the furthest edge of the current used range, in the directions up or left. This action matches the result of using the Ctrl+Arrow key keyboard shortcut while a range is selected.</p>
+          <p>The first type of range edge selection selects the cell at the furthest edge of the current used range, in the directions up or left. This action matches the result of using the <kbd>Ctrl</kbd>+<kbd>Arrow key</kbd> keyboard shortcut while a range is selected.</p>
           <button id="get-range-edge-left" class="ms-Button">
             <span class="ms-Button-label">Go to left edge of used range</span>
           </button>
@@ -197,7 +196,7 @@ template:
             <span class="ms-Button-label">Go to top edge of used range</span>
           </button>
           <br>
-          <p>The second type of range edge selection selects all the cells from the currently selected range to the furthest edge of the used range, in the directions right or down. This action matches the result of using the Ctrl+Shift+Arrow key keyboard shortcut while a range is selected.</p>
+          <p>The second type of range edge selection selects all the cells from the currently selected range to the furthest edge of the used range, in the directions right or down. This action matches the result of using the <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Arrow key</kbd> keyboard shortcut while a range is selected.</p>
           <button id="get-extended-range-right" class="ms-Button">
             <span class="ms-Button-label">Extend range to right edge of used range</span>
           </button>
@@ -218,15 +217,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/42-range/range-hyperlink.yaml b/samples/excel/42-range/range-hyperlink.yaml
index fec482f26..1b83b866e 100644
--- a/samples/excel/42-range/range-hyperlink.yaml
+++ b/samples/excel/42-range/range-hyperlink.yaml
@@ -1,19 +1,19 @@
 order: 7
 id: excel-range-hyperlink
 name: Hyperlinks
-description: 'Creates, updates, and clears hyperlinks in a range.'
+description: Creates, updates, and clears hyperlinks in a range.
 author: OfficeDev
 host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
-        $("#create-url-hyperlinks").on("click", () => tryCatch(createUrlHyperlinks));
-        $("#create-document-hyperlinks").on("click", () => tryCatch(createDocumentHyperlinks));
-        $("#update-hyperlinks").on("click", () => tryCatch(updateHyperlinks));
-        $("#clear-hyperlinks").on("click", () => tryCatch(clearHyperlinks));
+        document.getElementById("create-url-hyperlinks").addEventListener("click", () => tryCatch(createUrlHyperlinks));
+        document.getElementById("create-document-hyperlinks").addEventListener("click", () => tryCatch(createDocumentHyperlinks));
+        document.getElementById("update-hyperlinks").addEventListener("click", () => tryCatch(updateHyperlinks));
+        document.getElementById("clear-hyperlinks").addEventListener("click", () => tryCatch(clearHyperlinks));
 
         async function createUrlHyperlinks() {
             await Excel.run(async (context) => {
@@ -276,14 +276,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to create, update, and clear a hyperlink for a range.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="create-url-hyperlinks" class="ms-Button">
@@ -301,7 +299,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -313,15 +311,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/42-range/range-merged-ranges.yaml b/samples/excel/42-range/range-merged-ranges.yaml
index a9b0e4cfa..d6e4d7fe7 100644
--- a/samples/excel/42-range/range-merged-ranges.yaml
+++ b/samples/excel/42-range/range-merged-ranges.yaml
@@ -6,10 +6,10 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.13'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#create-merged-range").on("click", () => tryCatch(createMergedRange));
-        $("#get-merged-range").on("click", () => tryCatch(getMergedRange));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("create-merged-range").addEventListener("click", () => tryCatch(createMergedRange));
+        document.getElementById("get-merged-range").addEventListener("click", () => tryCatch(getMergedRange));
 
         async function createMergedRange() {
           await Excel.run(async (context) => {
@@ -95,14 +95,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to create and find merged ranges in a worksheet.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Add sample data</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="create-merged-range" class="ms-Button">
@@ -125,15 +123,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/range-relationships.yaml b/samples/excel/42-range/range-relationships.yaml
index 443b66d5d..9f6343134 100644
--- a/samples/excel/42-range/range-relationships.yaml
+++ b/samples/excel/42-range/range-relationships.yaml
@@ -1,19 +1,19 @@
 order: 10
 id: excel-range-range-relationships
 name: Range relationships
-description: 'Shows relationships between ranges, such as bounding rectangles and intersections.'
+description: Shows relationships between ranges, such as bounding rectangles and intersections.
 author: OfficeDev
 host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#bounding-rect").on("click", () => tryCatch(boundingRect));
-        $("#intersection").on("click", () => tryCatch(intersection));
-        $("#offset-range").on("click", () => tryCatch(offsetRange));
-        $("#resized-range").on("click", () => tryCatch(resizedRange));
-        $("#create-sales-contest-charts").on("click", () => tryCatch(createContestCharts));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("bounding-rect").addEventListener("click", () => tryCatch(boundingRect));
+        document.getElementById("intersection").addEventListener("click", () => tryCatch(intersection));
+        document.getElementById("offset-range").addEventListener("click", () => tryCatch(offsetRange));
+        document.getElementById("resized-range").addEventListener("click", () => tryCatch(resizedRange));
+        document.getElementById("create-sales-contest-charts").addEventListener("click", () => tryCatch(createContestCharts));
 
         async function boundingRect() {
             await Excel.run(async (context) => {
@@ -207,14 +207,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to do various operations on ranges, for example, getting the bounding rect of two ranges.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="intersection" class="ms-Button">
@@ -236,7 +234,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -248,15 +246,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/42-range/range-remove-duplicates.yaml b/samples/excel/42-range/range-remove-duplicates.yaml
index fb5a10d5c..b3227be4f 100644
--- a/samples/excel/42-range/range-remove-duplicates.yaml
+++ b/samples/excel/42-range/range-remove-duplicates.yaml
@@ -6,11 +6,11 @@ host: EXCEL
 api_set:
     ExcelApi: '1.9'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
-        $("#delete-name").on("click", () => tryCatch(deleteName));
-        $("#delete-distributor").on("click", () => tryCatch(deleteDistributor));
+        document.getElementById("delete-name").addEventListener("click", () => tryCatch(deleteName));
+        document.getElementById("delete-distributor").addEventListener("click", () => tryCatch(deleteDistributor));
 
         async function deleteName() {
             await Excel.run(async (context) => {
@@ -83,18 +83,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to remove rows with duplicate column values from a range.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="delete-name" class="ms-Button">
@@ -107,7 +105,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -119,15 +117,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/range-text-orientation.yaml b/samples/excel/42-range/range-text-orientation.yaml
index b11747de3..60ef84009 100644
--- a/samples/excel/42-range/range-text-orientation.yaml
+++ b/samples/excel/42-range/range-text-orientation.yaml
@@ -7,10 +7,10 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#set-text-orientation").on("click", () => tryCatch(setTextOrientation));
-        $("#get-text-orientation").on("click", () => tryCatch(getTextOrientation));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("set-text-orientation").addEventListener("click", () => tryCatch(setTextOrientation));
+        document.getElementById("get-text-orientation").addEventListener("click", () => tryCatch(getTextOrientation));
 
         async function setTextOrientation() {
             await Excel.run(async (context) => {
@@ -75,18 +75,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to set and get the text orientation within a range.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <label class="ms-font-m">Set the text orientation of the range that encompasses the table headers in the sample data.</label>
@@ -101,7 +99,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -113,15 +111,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/selected-range.yaml b/samples/excel/42-range/selected-range.yaml
index 3c1bb8016..cc469f680 100644
--- a/samples/excel/42-range/selected-range.yaml
+++ b/samples/excel/42-range/selected-range.yaml
@@ -7,9 +7,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.1'
 script:
-    content: |
-        $("#get-selection").on("click", () => tryCatch(getSelection));
-        $("#set-selection").on("click", () => tryCatch(setSelection));
+    content: |-
+        document.getElementById("get-selection").addEventListener("click", () => tryCatch(getSelection));
+        document.getElementById("set-selection").addEventListener("click", () => tryCatch(setSelection));
 
         async function getSelection() {
             await Excel.run(async (context) => {
@@ -45,11 +45,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to get and set the currently selected range.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-selection" class="ms-Button">
@@ -61,7 +60,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -73,15 +72,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/set-get-values.yaml b/samples/excel/42-range/set-get-values.yaml
index b4534894e..373aa4107 100644
--- a/samples/excel/42-range/set-get-values.yaml
+++ b/samples/excel/42-range/set-get-values.yaml
@@ -7,17 +7,17 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-
-        $("#set-value").on("click", () => tryCatch(setValue));
-        $("#set-values").on("click", () => tryCatch(setValues));
-        $("#set-formula").on("click", () => tryCatch(setFormula));
-        $("#set-formulas").on("click", () => tryCatch(setFormulas));
-        $("#set-formulas-r1c1").on("click", () => tryCatch(setFormulasR1C1));
-        $("#get-values").on("click", () => tryCatch(getValues));
-        $("#get-texts").on("click", () => tryCatch(getTexts));
-        $("#get-formulas").on("click", () => tryCatch(getFormulas));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+
+        document.getElementById("set-value").addEventListener("click", () => tryCatch(setValue));
+        document.getElementById("set-values").addEventListener("click", () => tryCatch(setValues));
+        document.getElementById("set-formula").addEventListener("click", () => tryCatch(setFormula));
+        document.getElementById("set-formulas").addEventListener("click", () => tryCatch(setFormulas));
+        document.getElementById("set-formulas-r1c1").addEventListener("click", () => tryCatch(setFormulasR1C1));
+        document.getElementById("get-values").addEventListener("click", () => tryCatch(getValues));
+        document.getElementById("get-texts").addEventListener("click", () => tryCatch(getTexts));
+        document.getElementById("get-formulas").addEventListener("click", () => tryCatch(getFormulas));
 
         async function setValue() {
             await Excel.run(async (context) => {
@@ -173,21 +173,18 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to set and get values and formulas for a range.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
-
             <button id="set-value" class="ms-Button">
                 <span class="ms-Button-label">Set value</span>
             </button>
@@ -203,9 +200,7 @@ template:
             <button id="set-formulas-r1c1" class="ms-Button">
                 <span class="ms-Button-label">Set formulas using R1C1-style</span>
             </button>
-
             <br />
-
             <button id="get-values" class="ms-Button">
                 <span class="ms-Button-label">Get values</span>
             </button>
@@ -218,7 +213,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -230,15 +225,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/42-range/style.yaml b/samples/excel/42-range/style.yaml
index 48378cd3d..8ae288cd7 100644
--- a/samples/excel/42-range/style.yaml
+++ b/samples/excel/42-range/style.yaml
@@ -1,20 +1,20 @@
 order: 14
 id: excel-range-style
 name: Style
-description: 'Creates a custom style, applies a custom and built-in styles to a range, gets style properties, and deletes the custom style.'
+description: Creates a custom style, applies a custom and built-in styles to a range, gets style properties, and deletes the custom style.
 author: siewmoi
 host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |+
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#add-new-style").on("click", () => tryCatch(addNewStyle));
-        $("#apply-new-style").on("click", () => tryCatch(applyNewStyle));
-        $("#apply-built-in-style").on("click", () => tryCatch(applyBuiltInStyle));
-        $("#get-style-font").on("click", () => tryCatch(getStyleFontProperties));
-        $("#get-style-alignment").on("click", () => tryCatch(getStyleAlignmentProperties));
-        $("#delete-new-style").on("click", () => tryCatch(deleteNewStyle));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-new-style").addEventListener("click", () => tryCatch(addNewStyle));
+        document.getElementById("apply-new-style").addEventListener("click", () => tryCatch(applyNewStyle));
+        document.getElementById("apply-built-in-style").addEventListener("click", () => tryCatch(applyBuiltInStyle));
+        document.getElementById("get-style-font").addEventListener("click", () => tryCatch(getStyleFontProperties));
+        document.getElementById("get-style-alignment").addEventListener("click", () => tryCatch(getStyleAlignmentProperties));
+        document.getElementById("delete-new-style").addEventListener("click", () => tryCatch(deleteNewStyle));
 
         async function addNewStyle() {
             await Excel.run(async (context) => {
@@ -151,23 +151,18 @@ script:
                 console.error(error);
             }
         }
-
-
-
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to add, apply, get and delete styles.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p><b>Add new style</b> will throw an error if the style has already been added.</p>
@@ -175,31 +170,26 @@ template:
                 <span class="ms-Button-label">Add new style</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="apply-new-style" class="ms-Button">
                 <span class="ms-Button-label">Apply new style</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="apply-built-in-style" class="ms-Button">
                 <span class="ms-Button-label">Apply built-in style</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="get-style-font" class="ms-Button">
                 <span class="ms-Button-label">Get style font properties</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <button id="get-style-alignment" class="ms-Button">
                 <span class="ms-Button-label">Get style alignment properties</span>
             </button>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Clean up</h3>
             <p><b>Delete new style</b> throws an error if the style doesn't exist (that is, hasn't been added). Deleting the style also causes the other buttons using the style to fail.</p>
@@ -221,15 +211,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/42-range/used-range.yaml b/samples/excel/42-range/used-range.yaml
index 670065580..78b4cb8cf 100644
--- a/samples/excel/42-range/used-range.yaml
+++ b/samples/excel/42-range/used-range.yaml
@@ -7,10 +7,10 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#try-create-chart-from-table").on("click", () => tryCatch(tryCreateChartFromEmptyTable));
-        $("#fill-table").on("click", () => tryCatch(fillTable));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("try-create-chart-from-table").addEventListener("click", () => tryCatch(tryCreateChartFromEmptyTable));
+        document.getElementById("fill-table").addEventListener("click", () => tryCatch(fillTable));
 
         async function tryCreateChartFromEmptyTable() {
             await Excel.run(async (context) => {
@@ -100,18 +100,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample creates a chart from a table, but only if there's data in the table.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="try-create-chart-from-table" class="ms-Button">
@@ -123,7 +121,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -135,15 +133,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/44-shape/shape-create-and-delete.yaml b/samples/excel/44-shape/shape-create-and-delete.yaml
index f5c3114e9..4a07c2b60 100644
--- a/samples/excel/44-shape/shape-create-and-delete.yaml
+++ b/samples/excel/44-shape/shape-create-and-delete.yaml
@@ -6,12 +6,12 @@ host: EXCEL
 api_set:
     ExcelApi: '1.9'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#createHexagon").on("click", () => tryCatch(createHexagon));
-        $("#createTriangle").on("click", () => tryCatch(createTriangle));
-        $("#createSmileyFace").on("click", () => tryCatch(createSmileyFace));
-        $("#removeAll").on("click", () => tryCatch(removeAll));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("createHexagon").addEventListener("click", () => tryCatch(createHexagon));
+        document.getElementById("createTriangle").addEventListener("click", () => tryCatch(createTriangle));
+        document.getElementById("createSmileyFace").addEventListener("click", () => tryCatch(createSmileyFace));
+        document.getElementById("removeAll").addEventListener("click", () => tryCatch(removeAll));
 
         async function createHexagon() {
             await Excel.run(async (context) => {
@@ -128,15 +128,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/44-shape/shape-get-active.yaml b/samples/excel/44-shape/shape-get-active.yaml
new file mode 100644
index 000000000..e97abfc29
--- /dev/null
+++ b/samples/excel/44-shape/shape-get-active.yaml
@@ -0,0 +1,175 @@
+order: 7
+id: excel-shape-get-active
+name: Get active shape image
+description: Get an image of the active shape in your workbook.
+host: EXCEL
+api_set:
+    ExcelApi: '1.19'
+script:
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-shape-over-chart").addEventListener("click", () => tryCatch(addShapeOverChart));
+        document.getElementById("group-chart-shapes").addEventListener("click", () => tryCatch(groupChartShapes));
+        document.getElementById("get-active-shape").addEventListener("click", () => tryCatch(getActiveShape));
+
+        const sheetName = "Sample";
+
+        async function addShapeOverChart() {
+          // This method adds a shape to use as a chart title.
+          // It positions the shape over the chart on the worksheet.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            
+            // Create a rectangle shape for the chart title.
+            const shape = sheet.shapes.addGeometricShape(Excel.GeometricShapeType.rectangle);
+            shape.name = "ChartTitle";
+            shape.height = 20;
+            shape.width = 90;
+            shape.textFrame.textRange.text = "Sales Quantity";
+            shape.textFrame.textRange.font.size = 13;
+
+            // Get chart positioning information to place the shape correctly.
+            const chart = sheet.charts.getItemAt(0);
+            chart.load("left, top");
+            chart.plotArea.load("width");
+            await context.sync();
+
+            // Position the shape above the chart.
+            shape.left = chart.left + chart.plotArea.width / 2.5;
+            shape.top = chart.top + 10;
+
+            await context.sync();
+          });
+        }
+
+        async function groupChartShapes() {
+          // This method groups the new chart title shape together with the existing chart.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            
+            // Get the shapes to group.
+            const titleShape = sheet.shapes.getItem("ChartTitle");
+            const chartShape = sheet.shapes.getItem("SalesChart");
+            
+            // Create a group from the two shapes.
+            const shapeGroup = sheet.shapes.addGroup([titleShape, chartShape]);
+            shapeGroup.name = "GroupChart";
+            
+            await context.sync();
+          });
+        }
+
+        async function getActiveShape() {
+          // This method gets the active shape and displays it as an image in the task pane.
+          await Excel.run(async (context) => {
+            // Get the currently active shape, if any.
+            const activeShape = context.workbook.getActiveShapeOrNullObject();
+            
+            if (activeShape) {
+              // Convert the active shape to an image.
+              const shapeImage = activeShape.getAsImage(Excel.PictureFormat.png);
+              await context.sync();
+              
+              // Display the image in the task pane.
+              const imageContainer = document.getElementById("image");
+              imageContainer.innerHTML = ''; // Clear the container before adding a new image.
+              const imageElement = document.createElement("img");
+              imageElement.src = "data:image/png;base64," + shapeImage.value;
+              imageContainer.appendChild(imageElement);              
+            } else {
+              console.log("No active shape");
+            }
+          });
+        }
+
+        /** Create sample data and a line chart. */
+        async function setup() {
+          await Excel.run(async (context) => {
+            context.workbook.worksheets.getItemOrNullObject(sheetName).delete();
+            const sheet = context.workbook.worksheets.add(sheetName);
+            
+            // Add sample data to the worksheet.
+            const dataRange = sheet.getRange("A1:C4");
+            dataRange.values = sampleData;
+
+            // Create a line chart with markers.
+            const chart = sheet.charts.add(Excel.ChartType.lineMarkers, dataRange);
+            chart.name = "SalesChart";
+
+            sheet.activate();
+            await context.sync();
+          });
+        }
+
+        /** Default helper for invoking an action and handling errors. */
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+
+        /** Sample data for the chart. */
+        const sampleData = [
+          ["Type", "Product A", "Product B"],
+          ["Q1", 15, 20],
+          ["Q2", 22, 15],
+          ["Q3", 33, 47]
+        ];
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            <p>This sample shows how to add a shape over a chart, group that new shape together with the existing chart, and then return an image of the chart (the active shape) to this task pane.</p>
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+            <h3>Set up</h3>
+            <button id="setup" class="ms-Button">
+                <span class="ms-Button-label">Create a chart</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <p>Add a shape to the workbook. This button adds a shape that covers the existing chart title with a new shape that contains text.</p>
+            <button id="add-shape-over-chart" class="ms-Button">
+                <span class="ms-Button-label">Add shape</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <p>Group the new chart title together with the existing chart.</p>
+            <button id="group-chart-shapes" class="ms-Button">
+                <span class="ms-Button-label">Group shapes</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <p>Get the active shape and display it as an image in this task pane. Make sure the chart is selected.</p>
+            <button id="get-active-shape" class="ms-Button">
+                <span class="ms-Button-label">Get active shape image</span>
+            </button>
+        </section>
+        <section class="ms-Fabric ms-font-m">
+            <p>Image of the active shape:</p>
+            <div id="image"></div>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/44-shape/shape-groups.yaml b/samples/excel/44-shape/shape-groups.yaml
index 6d8c12dac..27d563fc6 100644
--- a/samples/excel/44-shape/shape-groups.yaml
+++ b/samples/excel/44-shape/shape-groups.yaml
@@ -6,12 +6,12 @@ host: EXCEL
 api_set:
     ExcelApi: '1.9'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#createShapes").on("click", () => tryCatch(createShapes));
-        $("#groupShapes").on("click", () => tryCatch(groupShapes));
-        $("#moveGroup").on("click", () => tryCatch(moveGroup));
-        $("#ungroupShapes").on("click", () => tryCatch(ungroupShapes));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("createShapes").addEventListener("click", () => tryCatch(createShapes));
+        document.getElementById("groupShapes").addEventListener("click", () => tryCatch(groupShapes));
+        document.getElementById("moveGroup").addEventListener("click", () => tryCatch(moveGroup));
+        document.getElementById("ungroupShapes").addEventListener("click", () => tryCatch(ungroupShapes));
 
         async function groupShapes() {
             await Excel.run(async (context) => {
@@ -143,15 +143,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/44-shape/shape-images.yaml b/samples/excel/44-shape/shape-images.yaml
index 3deaa5f4a..f0dbed161 100644
--- a/samples/excel/44-shape/shape-images.yaml
+++ b/samples/excel/44-shape/shape-images.yaml
@@ -6,15 +6,15 @@ host: EXCEL
 api_set:
     ExcelApi: '1.9'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#selectedFile").on("change", () => tryCatch(readImageFromFile));
-        $("#flipImage").on("click", () => tryCatch(flipImage));
-        $("#getImageFormat").on("click", () => tryCatch(getImageFormat));
-        $("#writeOutImageString").on("click", () => tryCatch(writeOutImageString));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("selectedFile").addEventListener("change", () => tryCatch(readImageFromFile));
+        document.getElementById("flipImage").addEventListener("click", () => tryCatch(flipImage));
+        document.getElementById("getImageFormat").addEventListener("click", () => tryCatch(getImageFormat));
+        document.getElementById("writeOutImageString").addEventListener("click", () => tryCatch(writeOutImageString));
 
         async function readImageFromFile() {
-            const myFile = <HTMLInputElement>document.getElementById("selectedFile");
+            const myFile = document.getElementById("selectedFile") as HTMLInputElement;
             const reader = new FileReader();
 
             reader.onload = (event) => {
@@ -127,15 +127,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/44-shape/shape-lines.yaml b/samples/excel/44-shape/shape-lines.yaml
index f5010b2db..521fcaa91 100644
--- a/samples/excel/44-shape/shape-lines.yaml
+++ b/samples/excel/44-shape/shape-lines.yaml
@@ -7,17 +7,17 @@ api_set:
     ExcelApi: '1.9'
 script:
     content: |-
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#createShapes").on("click", () => tryCatch(createShapes));
-        $("#addStraightLine").on("click", () => tryCatch(addStraightLine));
-        $("#addCurvedLine").on("click", () => tryCatch(addCurvedLine));
-        $("#arrowLine").on("click", () => tryCatch(arrowLine));
-        $("#diamondLine").on("click", () => tryCatch(diamondLine));
-        $("#connectStraightLine").on("click", () => tryCatch(connectStraightLine));
-        $("#disconnectStraightLine").on("click", () => tryCatch(disconnectStraightLine));
-        $("#connectCurvedLine").on("click", () => tryCatch(connectCurvedLine));
-        $("#disconnectCurvedLine").on("click", () => tryCatch(disconnectCurvedLine));
-        $("#deleteLines").on("click", () => tryCatch(deleteLines));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("createShapes").addEventListener("click", () => tryCatch(createShapes));
+        document.getElementById("addStraightLine").addEventListener("click", () => tryCatch(addStraightLine));
+        document.getElementById("addCurvedLine").addEventListener("click", () => tryCatch(addCurvedLine));
+        document.getElementById("arrowLine").addEventListener("click", () => tryCatch(arrowLine));
+        document.getElementById("diamondLine").addEventListener("click", () => tryCatch(diamondLine));
+        document.getElementById("connectStraightLine").addEventListener("click", () => tryCatch(connectStraightLine));
+        document.getElementById("disconnectStraightLine").addEventListener("click", () => tryCatch(disconnectStraightLine));
+        document.getElementById("connectCurvedLine").addEventListener("click", () => tryCatch(connectCurvedLine));
+        document.getElementById("disconnectCurvedLine").addEventListener("click", () => tryCatch(disconnectCurvedLine));
+        document.getElementById("deleteLines").addEventListener("click", () => tryCatch(deleteLines));
 
         async function addStraightLine() {
             await Excel.run(async (context) => {
@@ -218,14 +218,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
-
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/44-shape/shape-move-and-order.yaml b/samples/excel/44-shape/shape-move-and-order.yaml
index e904b5b21..fc9b2373d 100644
--- a/samples/excel/44-shape/shape-move-and-order.yaml
+++ b/samples/excel/44-shape/shape-move-and-order.yaml
@@ -6,14 +6,14 @@ host: EXCEL
 api_set:
     ExcelApi: '1.9'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#moveLeft").on("click", () => tryCatch(moveLeft));
-        $("#moveDown").on("click", () => tryCatch(moveDown));
-        $("#rotate").on("click", () => tryCatch(rotate));
-        $("#scaleUp").on("click", () => tryCatch(scaleUp));
-        $("#moveZOrderDown").on("click", () => tryCatch(moveZOrderDown));
-        $("#createShapes").on("click", () => tryCatch(createShapes));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("moveLeft").addEventListener("click", () => tryCatch(moveLeft));
+        document.getElementById("moveDown").addEventListener("click", () => tryCatch(moveDown));
+        document.getElementById("rotate").addEventListener("click", () => tryCatch(rotate));
+        document.getElementById("scaleUp").addEventListener("click", () => tryCatch(scaleUp));
+        document.getElementById("moveZOrderDown").addEventListener("click", () => tryCatch(moveZOrderDown));
+        document.getElementById("createShapes").addEventListener("click", () => tryCatch(createShapes));
 
         async function moveLeft() {
             await Excel.run(async (context) => {
@@ -158,15 +158,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/44-shape/shape-textboxes.yaml b/samples/excel/44-shape/shape-textboxes.yaml
index 81dedd58f..62d2ab023 100644
--- a/samples/excel/44-shape/shape-textboxes.yaml
+++ b/samples/excel/44-shape/shape-textboxes.yaml
@@ -6,13 +6,13 @@ host: EXCEL
 api_set:
     ExcelApi: '1.9'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#createGeometricShape").on("click", () => tryCatch(createGeometricShape));
-        $("#createTextbox").on("click", () => tryCatch(createTextbox));
-        $("#centerTextbox").on("click", () => tryCatch(centerTextbox));
-        $("#autoSizeText").on("click", () => tryCatch(autoSizeText));
-        $("#deleteText").on("click", () => tryCatch(deleteText));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("createGeometricShape").addEventListener("click", () => tryCatch(createGeometricShape));
+        document.getElementById("createTextbox").addEventListener("click", () => tryCatch(createTextbox));
+        document.getElementById("centerTextbox").addEventListener("click", () => tryCatch(centerTextbox));
+        document.getElementById("autoSizeText").addEventListener("click", () => tryCatch(autoSizeText));
+        document.getElementById("deleteText").addEventListener("click", () => tryCatch(deleteText));
 
 
         async function createTextbox() {
@@ -133,15 +133,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/46-table/add-rows-and-columns-to-a-table.yaml b/samples/excel/46-table/add-rows-and-columns-to-a-table.yaml
index 1488d6253..a50c23cf2 100644
--- a/samples/excel/46-table/add-rows-and-columns-to-a-table.yaml
+++ b/samples/excel/46-table/add-rows-and-columns-to-a-table.yaml
@@ -7,12 +7,12 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
-        $("#add-row").on("click", () => tryCatch(addRow));
-        $("#add-column").on("click", () => tryCatch(addColumn));
-        $("#add-calculated-column").on("click", () => tryCatch(addCalculatedColumn));
+        document.getElementById("add-row").addEventListener("click", () => tryCatch(addRow));
+        document.getElementById("add-column").addEventListener("click", () => tryCatch(addColumn));
+        document.getElementById("add-calculated-column").addEventListener("click", () => tryCatch(addCalculatedColumn));
 
         async function addRow() {
             await Excel.run(async (context) => {
@@ -126,18 +126,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to add columns and rows to a table.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Create table</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Press the following buttons in order, so rows and columns of appropriate sizes are added.</p>
@@ -153,7 +151,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -165,15 +163,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/46-table/convert-range-to-table.yaml b/samples/excel/46-table/convert-range-to-table.yaml
index 73a077454..41472f1c0 100644
--- a/samples/excel/46-table/convert-range-to-table.yaml
+++ b/samples/excel/46-table/convert-range-to-table.yaml
@@ -7,9 +7,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#convert-range-to-table").on("click", () => tryCatch(convertRangeToTable));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("convert-range-to-table").addEventListener("click", () => tryCatch(convertRangeToTable));
 
         async function convertRangeToTable() {
             await Excel.run(async (context) => {
@@ -59,18 +59,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to convert a range to a table.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Create range</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="convert-range-to-table" class="ms-Button">
@@ -79,7 +77,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -91,15 +89,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/46-table/create-table.yaml b/samples/excel/46-table/create-table.yaml
index 72f212113..fefc4246e 100644
--- a/samples/excel/46-table/create-table.yaml
+++ b/samples/excel/46-table/create-table.yaml
@@ -7,8 +7,8 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#create-table").on("click", () => tryCatch(createTable));
+    content: |-
+        document.getElementById("create-table").addEventListener("click", () => tryCatch(createTable));
 
         async function createTable() {
             await Excel.run(async (context) => {
@@ -51,11 +51,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to create a table.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="create-table" class="ms-Button">
@@ -64,7 +63,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -76,15 +75,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/46-table/filter-data.yaml b/samples/excel/46-table/filter-data.yaml
index 6cf709b48..6ed0d3812 100644
--- a/samples/excel/46-table/filter-data.yaml
+++ b/samples/excel/46-table/filter-data.yaml
@@ -7,10 +7,10 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#filter-table").on("click", () => tryCatch(filterTable));
-        $("#clear-filters").on("click", () => tryCatch(clearFilters));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("filter-table").addEventListener("click", () => tryCatch(filterTable));
+        document.getElementById("clear-filters").addEventListener("click", () => tryCatch(clearFilters));
 
         async function filterTable() {
             await Excel.run(async (context) => {
@@ -87,18 +87,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to filter the data in a table using different filter types.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Create table</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="filter-table" class="ms-Button">
@@ -110,7 +108,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -122,15 +120,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/46-table/formatting.yaml b/samples/excel/46-table/formatting.yaml
index 88b9e10d7..7fdd568d8 100644
--- a/samples/excel/46-table/formatting.yaml
+++ b/samples/excel/46-table/formatting.yaml
@@ -7,9 +7,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#format-table").on("click", () => tryCatch(formatTable));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("format-table").addEventListener("click", () => tryCatch(formatTable));
 
         async function formatTable() {
             await Excel.run(async (context) => {
@@ -66,18 +66,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to format the different components of a table.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Create table</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="format-table" class="ms-Button">
@@ -86,7 +84,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -98,15 +96,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/46-table/get-data-from-table.yaml b/samples/excel/46-table/get-data-from-table.yaml
index 40fac42d1..04533610a 100644
--- a/samples/excel/46-table/get-data-from-table.yaml
+++ b/samples/excel/46-table/get-data-from-table.yaml
@@ -7,9 +7,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#get-data-from-table").on("click", () => tryCatch(getData));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("get-data-from-table").addEventListener("click", () => tryCatch(getData));
 
         async function getData() {
             await Excel.run(async (context) => {
@@ -79,29 +79,25 @@ script:
         }
     language: typescript
 template:
-    content: |+
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to get data from a table and write it to the sheet.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Create table</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-data-from-table" class="ms-Button">
                 <span class="ms-Button-label">Get data from a table</span>
             </button>
         </section>
-
-
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -113,15 +109,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/46-table/get-visible-range-of-a-filtered-table.yaml b/samples/excel/46-table/get-visible-range-of-a-filtered-table.yaml
index b3458cfe4..64d67cb9e 100644
--- a/samples/excel/46-table/get-visible-range-of-a-filtered-table.yaml
+++ b/samples/excel/46-table/get-visible-range-of-a-filtered-table.yaml
@@ -7,11 +7,11 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |+
-        $("#create-table").on("click", () => tryCatch(createTable));
-        $("#filter-table").on("click", () => tryCatch(filterTable));
-        $("#get-range").on("click", () => tryCatch(getRange));
-        $("#get-visible-range").on("click", () => tryCatch(getVisibleRange));
+    content: |-
+        document.getElementById("create-table").addEventListener("click", () => tryCatch(createTable));
+        document.getElementById("filter-table").addEventListener("click", () => tryCatch(filterTable));
+        document.getElementById("get-range").addEventListener("click", () => tryCatch(getRange));
+        document.getElementById("get-visible-range").addEventListener("click", () => tryCatch(getVisibleRange));
 
         async function getVisibleRange() {
             await Excel.run(async (context) => {
@@ -94,14 +94,12 @@ script:
                 console.error(error);
             }
         }
-
     language: typescript
 template:
-    content: |+
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to filter the data in a table using different filter types.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="create-table" class="ms-Button">
@@ -111,7 +109,6 @@ template:
                 <span class="ms-Button-label">Filter table</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-range" class="ms-Button">
@@ -121,10 +118,9 @@ template:
                 <span class="ms-Button-label">Get visible range</span>
             </button>
         </section>
-
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -136,15 +132,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/46-table/import-json-data.yaml b/samples/excel/46-table/import-json-data.yaml
index 8e2a842f9..3c6f80d16 100644
--- a/samples/excel/46-table/import-json-data.yaml
+++ b/samples/excel/46-table/import-json-data.yaml
@@ -7,8 +7,8 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#import-json-data").on("click", () => tryCatch(importJsonData));
+    content: |-
+        document.getElementById("import-json-data").addEventListener("click", () => tryCatch(importJsonData));
 
         async function importJsonData() {
             await Excel.run(async (context) => {
@@ -113,21 +113,19 @@ script:
         }
     language: typescript
 template:
-    content: |+
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to import json data into a new table.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="import-json-data" class="ms-Button">
                 <span class="ms-Button-label">Import JSON data</span>
             </button>
         </section>
-
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -139,15 +137,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/46-table/resize-table.yaml b/samples/excel/46-table/resize-table.yaml
index 162c4d06f..5b41656d6 100644
--- a/samples/excel/46-table/resize-table.yaml
+++ b/samples/excel/46-table/resize-table.yaml
@@ -6,9 +6,9 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.13'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#resize-table").on("click", () => tryCatch(resizeTable));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("resize-table").addEventListener("click", () => tryCatch(resizeTable));
 
         async function resizeTable() {
           await Excel.run(async (context) => {
@@ -67,14 +67,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to resize a table.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Create table</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="resize-table" class="ms-Button">
@@ -94,15 +92,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/46-table/sort-data.yaml b/samples/excel/46-table/sort-data.yaml
index dc15959d7..85780b33f 100644
--- a/samples/excel/46-table/sort-data.yaml
+++ b/samples/excel/46-table/sort-data.yaml
@@ -7,9 +7,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#sort-table").on("click", () => tryCatch(sortTable));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("sort-table").addEventListener("click", () => tryCatch(sortTable));
 
         async function sortTable() {
             await Excel.run(async (context) => {
@@ -73,18 +73,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to sort the data in a table.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Create table</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="sort-table" class="ms-Button">
@@ -93,7 +91,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -105,15 +103,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/50-workbook/create-get-change-delete-settings.yaml b/samples/excel/50-workbook/create-get-change-delete-settings.yaml
index 043315cea..43fd23536 100644
--- a/samples/excel/50-workbook/create-get-change-delete-settings.yaml
+++ b/samples/excel/50-workbook/create-get-change-delete-settings.yaml
@@ -1,16 +1,16 @@
 order: 2
 id: excel-settings-create-get-change-delete-settings
 name: Add-in settings
-description: 'Creates, gets, changes, and deletes settings that are unique to the specific workbook and add-in combination.'
+description: Creates, gets, changes, and deletes settings that are unique to the specific workbook and add-in combination.
 author: OfficeDev
 host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#create-setting").on("click", () => tryCatch(createSetting));
-        $("#change-setting").on("click", () => tryCatch(changeSetting));
-        $("#delete-setting").on("click", () => tryCatch(deleteSetting));
+    content: |-
+        document.getElementById("create-setting").addEventListener("click", () => tryCatch(createSetting));
+        document.getElementById("change-setting").addEventListener("click", () => tryCatch(changeSetting));
+        document.getElementById("delete-setting").addEventListener("click", () => tryCatch(deleteSetting));
 
         async function createSetting() {
             await Excel.run(async (context) => {
@@ -77,7 +77,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to create, get, change, and delete settings in the workbook.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Press the button to create and display a setting.</p>
@@ -95,7 +94,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -107,15 +106,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/50-workbook/create-workbook.yaml b/samples/excel/50-workbook/create-workbook.yaml
index c9d152dbf..6516a6b05 100644
--- a/samples/excel/50-workbook/create-workbook.yaml
+++ b/samples/excel/50-workbook/create-workbook.yaml
@@ -1,15 +1,15 @@
 order: 4
 id: excel-workbook-create-workbook
 name: Create workbook
-description: 'Creates a new, empty workbook and creates a new workbook by copying an existing one.'
+description: Creates a new, empty workbook and creates a new workbook by copying an existing one.
 author: OfficeDev
 host: EXCEL
 api_set:
     ExcelApi: '1.8'
 script:
-    content: |
-        $("#create-new-blank-workbook").on("click", () => tryCatch(createBlankWorkbook));
-        $("#file").on("change", () => tryCatch(createWorkbookFromExisting));
+    content: |-
+        document.getElementById("create-new-blank-workbook").addEventListener("click", () => tryCatch(createBlankWorkbook));
+        document.getElementById("file").addEventListener("change", () => tryCatch(createWorkbookFromExisting));
 
         async function createBlankWorkbook() {
             await Excel.run(async (context) => {
@@ -18,7 +18,7 @@ script:
         }
 
         async function createWorkbookFromExisting() {
-            const myFile = <HTMLInputElement>document.getElementById("file");
+            const myFile = document.getElementById("file") as HTMLInputElement;
             const reader = new FileReader();
 
             reader.onload = ((event) => {
@@ -51,7 +51,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to create a new, empty workbook and how to create a new workbook by copying an existing one.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p><b>Create empty workbook</b></p>
@@ -78,15 +77,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/50-workbook/culture-info-date-time.yaml b/samples/excel/50-workbook/culture-info-date-time.yaml
index 9ba369860..03a3df575 100644
--- a/samples/excel/50-workbook/culture-info-date-time.yaml
+++ b/samples/excel/50-workbook/culture-info-date-time.yaml
@@ -6,10 +6,10 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.12'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#display-date-time-setting").on("click", () => tryCatch(displayDateTimeSetting));
-        $("#write-date-time-setting").on("click", () => tryCatch(writeDateTimeSetting));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("display-date-time-setting").addEventListener("click", () => tryCatch(displayDateTimeSetting));
+        document.getElementById("write-date-time-setting").addEventListener("click", () => tryCatch(writeDateTimeSetting));
 
         async function displayDateTimeSetting() {
           await Excel.run(async (context) => {
@@ -116,10 +116,10 @@ template:
           <button id="display-date-time-setting" class="ms-Button"> <span class="ms-Button-label">Display date/time settings</span> </button>
           <p></p>
           <button id="write-date-time-setting" class="ms-Button"> <span class="ms-Button-label">Write date/time settings</span> </button>
-        </section>    
+        </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -131,15 +131,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/50-workbook/culture-info.yaml b/samples/excel/50-workbook/culture-info.yaml
index f7526946b..602c6e658 100644
--- a/samples/excel/50-workbook/culture-info.yaml
+++ b/samples/excel/50-workbook/culture-info.yaml
@@ -6,11 +6,11 @@ host: EXCEL
 api_set:
     ExcelApi: '1.11'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#display-culture-info").on("click", () => tryCatch(displayCultureInfo));
-        $("#write-decimal").on("click", () => tryCatch(writeDecimal));
-        $("#write-big-number").on("click", () => tryCatch(writeBigNumber));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("display-culture-info").addEventListener("click", () => tryCatch(displayCultureInfo));
+        document.getElementById("write-decimal").addEventListener("click", () => tryCatch(writeDecimal));
+        document.getElementById("write-big-number").addEventListener("click", () => tryCatch(writeBigNumber));
 
         async function displayCultureInfo() {
           await Excel.run(async (context) => {
@@ -111,14 +111,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to apply the cultural settings APIs to help normalize data.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Setup</h3>
           <button id="setup" class="ms-Button">
               <span class="ms-Button-label">Setup</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="display-culture-info" class="ms-Button">
@@ -133,7 +131,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -145,15 +143,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/50-workbook/data-protection.yaml b/samples/excel/50-workbook/data-protection.yaml
index 4ddaf5ab5..3597277aa 100644
--- a/samples/excel/50-workbook/data-protection.yaml
+++ b/samples/excel/50-workbook/data-protection.yaml
@@ -6,16 +6,16 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#protect-data-in-worksheet").on("click", () => tryCatch(protectDataInWorksheet));
-        $("#unprotect-data-in-worksheet").on("click", () => tryCatch(unprotectDataInWorksheet));
-        $("#protect-workbook-structure").on("click", () => tryCatch(protectWorkbookStructure));
-        $("#unprotect-workbook-structure").on("click", () => tryCatch(unprotectWorkbookStructure));
-        $("#password-protect-data-in-worksheet").on("click", () => tryCatch(passwordProtectDataInWorksheet));
-        $("#password-unprotect-data-in-worksheet").on("click", () => tryCatch(passwordUnprotectDataInWorksheet));
-        $("#password-protect-workbook-structure").on("click", () => tryCatch(passwordProtectWorkbookStructure));
-        $("#password-unprotect-workbook-structure").on("click", () => tryCatch(passwordUnprotectWorkbookStructure));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("protect-data-in-worksheet").addEventListener("click", () => tryCatch(protectDataInWorksheet));
+        document.getElementById("unprotect-data-in-worksheet").addEventListener("click", () => tryCatch(unprotectDataInWorksheet));
+        document.getElementById("protect-workbook-structure").addEventListener("click", () => tryCatch(protectWorkbookStructure));
+        document.getElementById("unprotect-workbook-structure").addEventListener("click", () => tryCatch(unprotectWorkbookStructure));
+        document.getElementById("password-protect-data-in-worksheet").addEventListener("click", () => tryCatch(passwordProtectDataInWorksheet));
+        document.getElementById("password-unprotect-data-in-worksheet").addEventListener("click", () => tryCatch(passwordUnprotectDataInWorksheet));
+        document.getElementById("password-protect-workbook-structure").addEventListener("click", () => tryCatch(passwordProtectWorkbookStructure));
+        document.getElementById("password-unprotect-workbook-structure").addEventListener("click", () => tryCatch(passwordUnprotectWorkbookStructure));
 
         async function protectDataInWorksheet() {
             await Excel.run(async (context) => {
@@ -178,14 +178,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to protect a worksheet's data and the workbook's structure.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                         <span class="ms-Button-label">Add sample data</span>
                     </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <h4>Protect without password</h4>
@@ -251,15 +249,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/50-workbook/workbook-built-in-functions.yaml b/samples/excel/50-workbook/workbook-built-in-functions.yaml
index 8a33f3e3f..407a00492 100644
--- a/samples/excel/50-workbook/workbook-built-in-functions.yaml
+++ b/samples/excel/50-workbook/workbook-built-in-functions.yaml
@@ -6,10 +6,10 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.2'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#call-vlookup").on("click", () => tryCatch(callVlookup));
-        $("#nest-functions").on("click", () => tryCatch(nestFunctions));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("call-vlookup").addEventListener("click", () => tryCatch(callVlookup));
+        document.getElementById("nest-functions").addEventListener("click", () => tryCatch(nestFunctions));
 
         async function callVlookup() {
           await Excel.run(async (context) => {
@@ -83,7 +83,6 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to use and nest the built-in Excel functions <code>VLOOKUP</code> and <code>SUM</code>. The sample uses <code>VLOOKUP</code> to return data, and then it uses <code>SUM</code> to combine data returned by <code>VLOOKUP</code>.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Setup</h3>
           <button id="setup" class="ms-Button">
@@ -101,7 +100,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -113,15 +112,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/50-workbook/workbook-calculation.yaml b/samples/excel/50-workbook/workbook-calculation.yaml
index fb4967455..83e0dfb71 100644
--- a/samples/excel/50-workbook/workbook-calculation.yaml
+++ b/samples/excel/50-workbook/workbook-calculation.yaml
@@ -6,14 +6,14 @@ host: EXCEL
 api_set:
     ExcelApi: '1.11'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup)); 
-        $("#register-onCalculated-handler").on("click", () => tryCatch(registerOnCalculatedHandler)); 
-        $("#recalculate-single").on("click", () => tryCatch(recalculateSingle)); 
-        $("#recalculate-column").on("click", () => tryCatch(recalculateColumn)); 
-        $("#manual-calculations").on("click", () => tryCatch(switchToManualCalculations)); 
-        $("#automatic-calculations").on("click", () => tryCatch(switchToAutomaticCalculations)); 
-        $("#force-calculation").on("click", () => tryCatch(forceCalculation));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("register-onCalculated-handler").addEventListener("click", () => tryCatch(registerOnCalculatedHandler));
+        document.getElementById("recalculate-single").addEventListener("click", () => tryCatch(recalculateSingle));
+        document.getElementById("recalculate-column").addEventListener("click", () => tryCatch(recalculateColumn));
+        document.getElementById("manual-calculations").addEventListener("click", () => tryCatch(switchToManualCalculations));
+        document.getElementById("automatic-calculations").addEventListener("click", () => tryCatch(switchToAutomaticCalculations));
+        document.getElementById("force-calculation").addEventListener("click", () => tryCatch(forceCalculation));
         async function registerOnCalculatedHandler() {
           await Excel.run(async (context) => {
             let sheet = context.workbook.worksheets.getItem("Sample");
@@ -137,7 +137,6 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to use the calculation APIs.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <button id="setup" class="ms-Button">
@@ -147,7 +146,6 @@ template:
               
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
-
             <p><b>Calculation events</b></p>
             <button id="register-onCalculated-handler" class="ms-Button">
               <span class="ms-Button-label">Register onCalculated event handler</span>
@@ -159,7 +157,6 @@ template:
             <button id="recalculate-column" class="ms-Button">
               <span class="ms-Button-label">Change a whole table column</span>
             </button>
-
             <p><b>Manual calculations</b></p>
             <p>Try switching to manual calculation, then editing the workbook.</p> 
             <button id="manual-calculations" class="ms-Button">
@@ -174,7 +171,7 @@ template:
           </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -186,15 +183,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/50-workbook/workbook-get-active-cell.yaml b/samples/excel/50-workbook/workbook-get-active-cell.yaml
index ab987ccbd..a0d0c7f07 100644
--- a/samples/excel/50-workbook/workbook-get-active-cell.yaml
+++ b/samples/excel/50-workbook/workbook-get-active-cell.yaml
@@ -6,8 +6,8 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |
-        $("#get-active-cell").on("click", () => tryCatch(run));
+    content: |-
+        document.getElementById("get-active-cell").addEventListener("click", () => tryCatch(run));
 
         async function run() {
             await Excel.run(async (context) => {
@@ -34,11 +34,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to get the active cell of the entire workbook.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-active-cell" class="ms-Button">
@@ -59,15 +58,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/50-workbook/workbook-insert-external-worksheets.yaml b/samples/excel/50-workbook/workbook-insert-external-worksheets.yaml
index f6cbe45f0..00559fc11 100644
--- a/samples/excel/50-workbook/workbook-insert-external-worksheets.yaml
+++ b/samples/excel/50-workbook/workbook-insert-external-worksheets.yaml
@@ -6,15 +6,15 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.13'
 script:
-    content: |
-        $("#file").on("change", getBase64);
-        $("#insert-sheets").on("click", () => tryCatch(insertSheets));
+    content: |-
+        document.getElementById("file").addEventListener("change", getBase64);
+        document.getElementById("insert-sheets").addEventListener("click", () => tryCatch(insertSheets));
 
         let externalWorkbook;
 
         async function getBase64() {
             // Retrieve the file and set up an HTML FileReader element. 
-            const myFile = <HTMLInputElement>document.getElementById("file");
+            const myFile = document.getElementById("file") as HTMLInputElement;
             const reader = new FileReader();
            
             reader.onload = (event) => {
@@ -60,7 +60,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to copy the worksheets from an existing workbook into the current workbook.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Select an Excel workbook to copy its worksheets into the current workbook.</p>
@@ -87,15 +86,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/50-workbook/workbook-save-and-close.yaml b/samples/excel/50-workbook/workbook-save-and-close.yaml
index c4ff5885f..bccaac16a 100644
--- a/samples/excel/50-workbook/workbook-save-and-close.yaml
+++ b/samples/excel/50-workbook/workbook-save-and-close.yaml
@@ -6,11 +6,11 @@ host: EXCEL
 api_set:
     ExcelAPI: '1.11'
 script:
-    content: |
-        $("#saveWithPrompt").on("click", () => tryCatch(saveWithPrompt));
-        $("#saveWithoutPrompt").on("click", () => tryCatch(saveWithoutPrompt));
-        $("#closeWithSave").on("click", () => tryCatch(closeWithSave));
-        $("#closeWithoutSave").on("click", () => tryCatch(closeWithoutSave));
+    content: |-
+        document.getElementById("saveWithPrompt").addEventListener("click", () => tryCatch(saveWithPrompt));
+        document.getElementById("saveWithoutPrompt").addEventListener("click", () => tryCatch(saveWithoutPrompt));
+        document.getElementById("closeWithSave").addEventListener("click", () => tryCatch(closeWithSave));
+        document.getElementById("closeWithoutSave").addEventListener("click", () => tryCatch(closeWithoutSave));
 
         async function saveWithPrompt() {
             await Excel.run(async (context) => {
@@ -51,7 +51,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to save a workbook, both with and without a prompt to the user, and how to close the workbook.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="saveWithPrompt" class="ms-Button">
@@ -81,15 +80,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/54-worksheet/active-worksheet.yaml b/samples/excel/54-worksheet/active-worksheet.yaml
index ca4ddcf49..ad537a483 100644
--- a/samples/excel/54-worksheet/active-worksheet.yaml
+++ b/samples/excel/54-worksheet/active-worksheet.yaml
@@ -8,10 +8,10 @@ api_set:
     ExcelApi: '1.1'
 script:
     content: |-
-        $("#setup").on("click", () => tryCatch(setup));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
-        $("#get-active-worksheet").on("click", () => tryCatch(getActiveWorksheet));
-        $("#set-active-worksheet").on("click", () => tryCatch(setActiveWorksheet));
+        document.getElementById("get-active-worksheet").addEventListener("click", () => tryCatch(getActiveWorksheet));
+        document.getElementById("set-active-worksheet").addEventListener("click", () => tryCatch(setActiveWorksheet));
 
         async function getActiveWorksheet() {
             await Excel.run(async (context) => {
@@ -83,18 +83,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to get and set the active worksheet.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Ensure two worksheets</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-active-worksheet" class="ms-Button">
@@ -106,7 +104,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -118,15 +116,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/54-worksheet/add-delete-rename-move-worksheet.yaml b/samples/excel/54-worksheet/add-delete-rename-move-worksheet.yaml
index 14f48f6f8..4f31e4fcf 100644
--- a/samples/excel/54-worksheet/add-delete-rename-move-worksheet.yaml
+++ b/samples/excel/54-worksheet/add-delete-rename-move-worksheet.yaml
@@ -1,17 +1,17 @@
 order: 2
 id: excel-worksheet-add-delete-rename-move-worksheet
-name: 'Add, delete, rename, and move worksheet'
-description: 'Adds, deletes, renames, and moves a worksheet.'
+name: Add, delete, rename, and move worksheet
+description: Adds, deletes, renames, and moves a worksheet.
 author: OfficeDev
 host: EXCEL
 api_set:
     ExcelApi: '1.1'
 script:
-    content: |
-        $("#add-worksheet").on("click", () => tryCatch(addWorksheet));
-        $("#delete-worksheet").on("click", () => tryCatch(deleteWorksheet));
-        $("#rename-worksheet").on("click", () => tryCatch(renameWorksheet));
-        $("#move-worksheet").on("click", () => tryCatch(moveWorksheet));
+    content: |-
+        document.getElementById("add-worksheet").addEventListener("click", () => tryCatch(addWorksheet));
+        document.getElementById("delete-worksheet").addEventListener("click", () => tryCatch(deleteWorksheet));
+        document.getElementById("rename-worksheet").addEventListener("click", () => tryCatch(renameWorksheet));
+        document.getElementById("move-worksheet").addEventListener("click", () => tryCatch(moveWorksheet));
 
         async function addWorksheet() {
             await Excel.run(async (context) => {
@@ -103,11 +103,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to add, delete, rename and change the position of a worksheet.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="add-worksheet" class="ms-Button">
@@ -125,7 +124,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -137,15 +136,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/54-worksheet/gridlines.yaml b/samples/excel/54-worksheet/gridlines.yaml
index 167fca8ec..b82a15470 100644
--- a/samples/excel/54-worksheet/gridlines.yaml
+++ b/samples/excel/54-worksheet/gridlines.yaml
@@ -7,9 +7,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.8'
 script:
-    content: |
-        $("#hide-gridlines").on("click", () => tryCatch(hideGridlines));
-        $("#show-gridlines").on("click", () => tryCatch(showGridlines));
+    content: |-
+        document.getElementById("hide-gridlines").addEventListener("click", () => tryCatch(hideGridlines));
+        document.getElementById("show-gridlines").addEventListener("click", () => tryCatch(showGridlines));
 
         async function hideGridlines() {
             await Excel.run(async (context) => {
@@ -41,11 +41,10 @@ script:
         }
     language: typescript
 template:
-    content: |+
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to hide and show gridlines within a worksheet.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <label class="ms-font-m">Hide gridlines within the active worksheet.</label>
@@ -57,10 +56,9 @@ template:
                 <span class="ms-Button-label">Show gridlines</span>
             </button>
         </section>
-
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -72,15 +70,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/54-worksheet/list-worksheets.yaml b/samples/excel/54-worksheet/list-worksheets.yaml
index 9f41e12f4..6bda99375 100644
--- a/samples/excel/54-worksheet/list-worksheets.yaml
+++ b/samples/excel/54-worksheet/list-worksheets.yaml
@@ -7,8 +7,8 @@ host: EXCEL
 api_set:
     ExcelApi: '1.1'
 script:
-    content: |
-        $("#list-worksheets").on("click", () => tryCatch(listWorksheets));
+    content: |-
+        document.getElementById("list-worksheets").addEventListener("click", () => tryCatch(listWorksheets));
 
         async function listWorksheets() {
             await Excel.run(async (context) => {
@@ -40,11 +40,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to list the names of the worksheets in the workbook.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="list-worksheets" class="ms-Button">
@@ -53,7 +52,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -65,15 +64,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/54-worksheet/reference-worksheets-by-relative-position.yaml b/samples/excel/54-worksheet/reference-worksheets-by-relative-position.yaml
index 87a38faa2..b1eb24c61 100644
--- a/samples/excel/54-worksheet/reference-worksheets-by-relative-position.yaml
+++ b/samples/excel/54-worksheet/reference-worksheets-by-relative-position.yaml
@@ -7,10 +7,10 @@ host: EXCEL
 api_set:
     ExcelApi: '1.5'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#compare-current-and-previous-year").on("click", () => tryCatch(compareCurrentWithPreviousTax));
-        $("#compare-first-and-last-year").on("click", ()  => tryCatch(compareFirstWithMostRecentTaxRate));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("compare-current-and-previous-year").addEventListener("click", () => tryCatch(compareCurrentWithPreviousTax));
+        document.getElementById("compare-first-and-last-year").addEventListener("click", ()  => tryCatch(compareFirstWithMostRecentTaxRate));
 
         async function setup() {
             await Excel.run(async (context) => {
@@ -119,18 +119,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to get a reference to a sheet using its relative worksheet position.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Create sample worksheets</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Select any of the three worksheets for 2015, 1016, or 2017 and press the button to compare the <b>tax due</b> on the current sheet with the previous sheet.</p>
@@ -144,7 +142,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -156,15 +154,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/54-worksheet/tab-color.yaml b/samples/excel/54-worksheet/tab-color.yaml
index e4ebf005a..eee99f9b4 100644
--- a/samples/excel/54-worksheet/tab-color.yaml
+++ b/samples/excel/54-worksheet/tab-color.yaml
@@ -7,11 +7,11 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |
-        $("#set-tab-color-to-hex-color").on("click", () => tryCatch(setTabColorToHexColor));
-        $("#set-tab-color-to-named-color").on("click", () => tryCatch(setTabColorToNamedColor));
-        $("#set-tab-color-to-default-color").on("click", () => tryCatch(setTabColorToDefaultColor));
-        $("#get-tab-color").on("click", () => tryCatch(getTabColor));
+    content: |-
+        document.getElementById("set-tab-color-to-hex-color").addEventListener("click", () => tryCatch(setTabColorToHexColor));
+        document.getElementById("set-tab-color-to-named-color").addEventListener("click", () => tryCatch(setTabColorToNamedColor));
+        document.getElementById("set-tab-color-to-default-color").addEventListener("click", () => tryCatch(setTabColorToDefaultColor));
+        document.getElementById("get-tab-color").addEventListener("click", () => tryCatch(getTabColor));
 
         async function setTabColorToHexColor() {
             await Excel.run(async (context) => {
@@ -68,7 +68,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to set and get the tab color of a worksheet.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <label class="ms-font-m">Set tab color for the active worksheet.</label>
@@ -89,7 +88,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -101,15 +100,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/54-worksheet/worksheet-auto-filter.yaml b/samples/excel/54-worksheet/worksheet-auto-filter.yaml
index bc98cb85e..1450908f8 100644
--- a/samples/excel/54-worksheet/worksheet-auto-filter.yaml
+++ b/samples/excel/54-worksheet/worksheet-auto-filter.yaml
@@ -6,14 +6,14 @@ host: EXCEL
 api_set:
     ExcelApi: '1.9'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#add-percent-auto-filter").on("click", () => tryCatch(addPercentAutoFilter));
-        $("#add-custom-auto-filter").on("click", () => tryCatch(addCustomAutoFilter));
-        $("#randomize-data").on("click", () => tryCatch(randomizeData));
-        $("#refresh-auto-filter").on("click", () => tryCatch(refreshAutoFilter));
-        $("#clear-single-auto-filter").on("click", () => tryCatch(clearSingleAutoFilter));
-        $("#remove-all-auto-filters").on("click", () => tryCatch(removeAllAutoFilters));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-percent-auto-filter").addEventListener("click", () => tryCatch(addPercentAutoFilter));
+        document.getElementById("add-custom-auto-filter").addEventListener("click", () => tryCatch(addCustomAutoFilter));
+        document.getElementById("randomize-data").addEventListener("click", () => tryCatch(randomizeData));
+        document.getElementById("refresh-auto-filter").addEventListener("click", () => tryCatch(refreshAutoFilter));
+        document.getElementById("clear-single-auto-filter").addEventListener("click", () => tryCatch(clearSingleAutoFilter));
+        document.getElementById("remove-all-auto-filters").addEventListener("click", () => tryCatch(removeAllAutoFilters));
 
         async function addPercentAutoFilter() {
             // This function adds a percentage AutoFilter to the active worksheet 
@@ -156,14 +156,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to work with an AutoFilter on a worksheet.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Setup</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Add two filters. One shows only the top half of sales and the other shows only fruits that end with the letter 'e'.</p>
@@ -194,7 +192,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -206,15 +204,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/54-worksheet/worksheet-copy.yaml b/samples/excel/54-worksheet/worksheet-copy.yaml
index 5a699a751..5a3cc6818 100644
--- a/samples/excel/54-worksheet/worksheet-copy.yaml
+++ b/samples/excel/54-worksheet/worksheet-copy.yaml
@@ -6,9 +6,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#copy-worksheet").on("click", () => tryCatch(run));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("copy-worksheet").addEventListener("click", () => tryCatch(run));
 
         async function run() {
             await Excel.run(async (context) => {
@@ -69,14 +69,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to copy a worksheet.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                         <span class="ms-Button-label">Add sample data</span>
                     </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="copy-worksheet" class="ms-Button">
@@ -97,15 +95,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/54-worksheet/worksheet-find-all.yaml b/samples/excel/54-worksheet/worksheet-find-all.yaml
index 053bad9b0..5b0af2ad4 100644
--- a/samples/excel/54-worksheet/worksheet-find-all.yaml
+++ b/samples/excel/54-worksheet/worksheet-find-all.yaml
@@ -6,11 +6,11 @@ host: EXCEL
 api_set:
     ExcelApi: '1.9'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#findCompleted").on("click", () => tryCatch(findCompleted));
-        $("#findDelayed").on("click", () => tryCatch(findDelayed));
-        $("#findCanceled").on("click", () => tryCatch(findCanceled));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("findCompleted").addEventListener("click", () => tryCatch(findCompleted));
+        document.getElementById("findDelayed").addEventListener("click", () => tryCatch(findDelayed));
+        document.getElementById("findCanceled").addEventListener("click", () => tryCatch(findCanceled));
 
         async function findCompleted() {
             await Excel.run(async (context) => {
@@ -140,14 +140,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/54-worksheet/worksheet-freeze-panes.yaml b/samples/excel/54-worksheet/worksheet-freeze-panes.yaml
index 18cfb5237..de0f26ae5 100644
--- a/samples/excel/54-worksheet/worksheet-freeze-panes.yaml
+++ b/samples/excel/54-worksheet/worksheet-freeze-panes.yaml
@@ -1,20 +1,20 @@
 order: 6
 id: excel-worksheet-freeze-panes
 name: Frozen panes
-description: 'Freezes columns, rows, and a range of cells. Gets the address of the frozen pane. Unfreezes frozen panes.'
+description: Freezes columns, rows, and a range of cells. Gets the address of the frozen pane. Unfreezes frozen panes.
 author: OfficeDev
 host: EXCEL
 api_set:
     ExcelApi: '1.7'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
-        $("#freeze-columns").on("click", () => tryCatch(freezeColumns));
-        $("#freeze-rows").on("click", () => tryCatch(freezeRows));
-        $("#freeze-at").on("click", () => tryCatch(freezeAt));
-        $("#get-location").on("click", () => tryCatch(getLocation));
-        $("#unfreeze-all-panes").on("click", () => tryCatch(unfreezeAllPanes));
+        document.getElementById("freeze-columns").addEventListener("click", () => tryCatch(freezeColumns));
+        document.getElementById("freeze-rows").addEventListener("click", () => tryCatch(freezeRows));
+        document.getElementById("freeze-at").addEventListener("click", () => tryCatch(freezeAt));
+        document.getElementById("get-location").addEventListener("click", () => tryCatch(getLocation));
+        document.getElementById("unfreeze-all-panes").addEventListener("click", () => tryCatch(unfreezeAllPanes));
 
         async function freezeColumns() {
             await Excel.run(async (context) => {
@@ -131,14 +131,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to freeze columns, freeze rows, freeze a range, and manage frozen panes in a worksheet.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="freeze-columns" class="ms-Button">
@@ -159,7 +157,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -171,15 +169,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/54-worksheet/worksheet-page-layout.yaml b/samples/excel/54-worksheet/worksheet-page-layout.yaml
index 8f14bcb14..f94c050d7 100644
--- a/samples/excel/54-worksheet/worksheet-page-layout.yaml
+++ b/samples/excel/54-worksheet/worksheet-page-layout.yaml
@@ -6,15 +6,15 @@ host: EXCEL
 api_set:
     ExcelApi: '1.9'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#setPageBreaks").on("click", () => tryCatch(setPageBreaks));
-        $("#center").on("click", () => tryCatch(center));
-        $("#setBlackAndWhite").on("click", () => tryCatch(setBlackAndWhite));
-        $("#setPrintTitleRow").on("click", () => tryCatch(setPrintTitleRow));
-        $("#setPrintArea").on("click", () => tryCatch(setPrintArea));
-        $("#changeOrientation").on("click", () => tryCatch(changeOrientation));
-        $("#setZoom").on("click", () => tryCatch(setZoom));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("setPageBreaks").addEventListener("click", () => tryCatch(setPageBreaks));
+        document.getElementById("center").addEventListener("click", () => tryCatch(center));
+        document.getElementById("setBlackAndWhite").addEventListener("click", () => tryCatch(setBlackAndWhite));
+        document.getElementById("setPrintTitleRow").addEventListener("click", () => tryCatch(setPrintTitleRow));
+        document.getElementById("setPrintArea").addEventListener("click", () => tryCatch(setPrintArea));
+        document.getElementById("changeOrientation").addEventListener("click", () => tryCatch(changeOrientation));
+        document.getElementById("setZoom").addEventListener("click", () => tryCatch(setZoom));
 
         async function setPageBreaks() {
             await Excel.run(async (context) => {
@@ -202,15 +202,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/54-worksheet/worksheet-range-cell.yaml b/samples/excel/54-worksheet/worksheet-range-cell.yaml
index 96c0319e2..5e6e7340d 100644
--- a/samples/excel/54-worksheet/worksheet-range-cell.yaml
+++ b/samples/excel/54-worksheet/worksheet-range-cell.yaml
@@ -1,19 +1,19 @@
 order: 7
 id: excel-worksheet-worksheet-range-cell
 name: Get range or cell
-description: 'Gets the used range, the entire range of a worksheet, the specified range, and the specified cell.'
+description: Gets the used range, the entire range of a worksheet, the specified range, and the specified cell.
 author: OfficeDev
 host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
-        $("#get-used-range").on("click", () => tryCatch(getUsedRange));
-        $("#get-entire-range").on("click", () => tryCatch(getEntireRange));
-        $("#get-range").on("click", () => tryCatch(getRange));
-        $("#get-cell").on("click", () => tryCatch(getCell));
+        document.getElementById("get-used-range").addEventListener("click", () => tryCatch(getUsedRange));
+        document.getElementById("get-entire-range").addEventListener("click", () => tryCatch(getEntireRange));
+        document.getElementById("get-range").addEventListener("click", () => tryCatch(getRange));
+        document.getElementById("get-cell").addEventListener("click", () => tryCatch(getCell));
 
         async function getUsedRange() {
             await Excel.run(async (context) => {
@@ -101,18 +101,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to get a range or a cell in a worksheet.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-used-range" class="ms-Button">
@@ -130,7 +128,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -142,15 +140,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/54-worksheet/worksheet-visibility.yaml b/samples/excel/54-worksheet/worksheet-visibility.yaml
index f1c6845c4..15dd5af96 100644
--- a/samples/excel/54-worksheet/worksheet-visibility.yaml
+++ b/samples/excel/54-worksheet/worksheet-visibility.yaml
@@ -7,9 +7,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.1'
 script:
-    content: |
-        $("#hide-worksheet").on("click", () => tryCatch(hideWorksheet));
-        $("#unhide-worksheet").on("click", () => tryCatch(unhideWorksheet));
+    content: |-
+        document.getElementById("hide-worksheet").addEventListener("click", () => tryCatch(hideWorksheet));
+        document.getElementById("unhide-worksheet").addEventListener("click", () => tryCatch(unhideWorksheet));
 
         async function hideWorksheet() {
             await Excel.run(async (context) => {
@@ -82,18 +82,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to change the visbility of a worksheet.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Ensure two worksheets</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="hide-worksheet" class="ms-Button">
@@ -105,7 +103,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -117,15 +115,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/90-scenarios/currency-converter.yaml b/samples/excel/90-scenarios/currency-converter.yaml
index 59daa071b..70f09cc0f 100644
--- a/samples/excel/90-scenarios/currency-converter.yaml
+++ b/samples/excel/90-scenarios/currency-converter.yaml
@@ -7,7 +7,7 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
+    content: |-
         /*
         * Copyright (c) Riwut Libinuko. All rights reserved. Licensed under the MIT license.
         */
@@ -17,8 +17,8 @@ script:
 
         let tableSetup: Record<string, number> = {};
 
-        $("#convert").on("click", () => tryCatch(convert));
-        $("#setup").on("click", () => tryCatch(setupSample));
+        document.getElementById("convert").addEventListener("click", () => tryCatch(convert));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setupSample));
 
         /** Main converting function **/
         async function convert() {
@@ -141,25 +141,22 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <header class="ms-Fabric ms-welcome__header ms-bgColor-neutralLighter" style='text-align: center'>
           <h1 class="ms-font-su">Simple Currency Converter</h1>
         </header>
-
         <section class="ms-Fabric ms-font-m">
           <p>Simple currency converter shows how to read data from a transaction table, and uses currency converter API to
             calculate the amount in base currency. </p>
           <p>The code also performs table validation and identify if the table has predefined headers. You can try to to rearrange the the
             column, and see by yourself! </p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <p>The currency conversion is provided by <a href="https://exchangeratesapi.io/">exchangeratesapi.io</a> which uses
@@ -182,13 +179,9 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
-    jquery@3.1.1
-    @types/jquery@3.3.1
-    moment@2.18.1 
-    moment-msdate@0.2.2
\ No newline at end of file
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
+    moment@2.18.1
+    moment-msdate@0.2.2
diff --git a/samples/excel/90-scenarios/multiple-property-set.yaml b/samples/excel/90-scenarios/multiple-property-set.yaml
index 9d005cbe6..56c6c6e30 100644
--- a/samples/excel/90-scenarios/multiple-property-set.yaml
+++ b/samples/excel/90-scenarios/multiple-property-set.yaml
@@ -7,10 +7,10 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#set-multiple-properties-with-object").on("click", () => tryCatch(setMultiplePropertiesWithObject));
-        $("#copy-properties-from-range").on("click", () => tryCatch(copyPropertiesFromRange));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("set-multiple-properties-with-object").addEventListener("click", () => tryCatch(setMultiplePropertiesWithObject));
+        document.getElementById("copy-properties-from-range").addEventListener("click", () => tryCatch(copyPropertiesFromRange));
 
         async function setMultiplePropertiesWithObject() {
             await Excel.run(async (context) => {
@@ -94,18 +94,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to format a range.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="set-multiple-properties-with-object" class="ms-Button">
@@ -129,15 +127,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/90-scenarios/performance-optimization.yaml b/samples/excel/90-scenarios/performance-optimization.yaml
index bfbc05da3..feb4400b0 100644
--- a/samples/excel/90-scenarios/performance-optimization.yaml
+++ b/samples/excel/90-scenarios/performance-optimization.yaml
@@ -1,18 +1,18 @@
 order: 1
 id: excel-performance-optimization
 name: Performance optimization
-description: 'Optimizes performance by untracking ranges, turning off screen painting, and switching the calculation mode.'
+description: Optimizes performance by untracking ranges, turning off screen painting, and switching the calculation mode.
 host: EXCEL
 api_set:
     ExcelApi: '1.9'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#refresh-data").on("click", () => tryCatch(refreshData));
-        $("#toggle-tracking").on("click", () => tryCatch(toggleTracking));
-        $("#toggle-screen-painting").on("click", () => tryCatch(toggleScreenPainting));
-        $("#toggle-calculation").on("click", () => tryCatch(toggleCalculationMode));
-        $("#recalculate").on("click", () => tryCatch(recalculate));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("refresh-data").addEventListener("click", () => tryCatch(refreshData));
+        document.getElementById("toggle-tracking").addEventListener("click", () => tryCatch(toggleTracking));
+        document.getElementById("toggle-screen-painting").addEventListener("click", () => tryCatch(toggleScreenPainting));
+        document.getElementById("toggle-calculation").addEventListener("click", () => tryCatch(toggleCalculationMode));
+        document.getElementById("recalculate").addEventListener("click", () => tryCatch(recalculate));
 
         const ROW_COUNT = 500;
         const COLUMN_COUNT = 20;
@@ -138,14 +138,12 @@ template:
             <p>This sample shows some performance optimizations. Toggle the various performance options, then refresh or
                 recalculate to see the effects.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Setup</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Setup</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Performance settings</h3>
             <button id="toggle-screen-painting" class="ms-Button">
@@ -184,18 +182,12 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.min.js
-    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.d.ts
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/@microsoft/office-js-helpers@0.7.4/dist/office.helpers.min.js
+    https://unpkg.com/@microsoft/office-js-helpers@0.7.4/dist/office.helpers.d.ts
\ No newline at end of file
diff --git a/samples/excel/90-scenarios/report-generation.yaml b/samples/excel/90-scenarios/report-generation.yaml
index 20b150b8e..749d8b54e 100644
--- a/samples/excel/90-scenarios/report-generation.yaml
+++ b/samples/excel/90-scenarios/report-generation.yaml
@@ -1,14 +1,14 @@
 order: 2
 id: excel-scenarios-report-generation
 name: Report generation
-description: 'Writes data to the workbook, reads and applies basic formatting, and adds a chart bound to that data.'
+description: Writes data to the workbook, reads and applies basic formatting, and adds a chart bound to that data.
 author: OfficeDev
 host: EXCEL
 api_set:
     ExcelApi: '1.1'
 script:
-    content: |
-        $("#create-report").on("click", () => tryCatch(createReport));
+    content: |-
+        document.getElementById("create-report").addEventListener("click", () => tryCatch(createReport));
 
         /** Load sample data into a new worksheet and create a chart */
         async function createReport() {
@@ -123,7 +123,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to load sample data into the worksheet, and then create a chart.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="create-report" class="ms-Button">
@@ -144,15 +143,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/excel/90-scenarios/working-with-dates.yaml b/samples/excel/90-scenarios/working-with-dates.yaml
index 9878a372d..d2a901c9f 100644
--- a/samples/excel/90-scenarios/working-with-dates.yaml
+++ b/samples/excel/90-scenarios/working-with-dates.yaml
@@ -7,12 +7,12 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
+    content: |-
         declare var moment: any;
 
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#set-date-value-using-timestamp").on("click", () => tryCatch(setDateValueUsingTimestamp));
-        $("#get-date-value").on("click", () => tryCatch(getDateValue));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("set-date-value-using-timestamp").addEventListener("click", () => tryCatch(setDateValueUsingTimestamp));
+        document.getElementById("get-date-value").addEventListener("click", () => tryCatch(getDateValue));
 
         async function setDateValueUsingTimestamp() {
             await Excel.run(async (context) => {
@@ -94,18 +94,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to set and get date values in a range and manipulating them using the Moment JavaScript library with the Moment-MSDate plug-in.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample data</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="set-date-value-using-timestamp" class="ms-Button">
@@ -117,7 +115,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -129,18 +127,13 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
 
-    moment@2.18.1 
-    moment-msdate@0.2.2
\ No newline at end of file
+    moment@2.18.1
+    moment-msdate@0.2.2
diff --git a/samples/excel/99-just-for-fun/color-wheel.yaml b/samples/excel/99-just-for-fun/color-wheel.yaml
index 4b4f52b0e..2e6b62749 100644
--- a/samples/excel/99-just-for-fun/color-wheel.yaml
+++ b/samples/excel/99-just-for-fun/color-wheel.yaml
@@ -7,9 +7,9 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#wheel").on("click", wheelGo);
-        $("#stop").on("click", wheelStop);
+    content: |-
+        document.getElementById("wheel").addEventListener("click", wheelGo);
+        document.getElementById("stop").addEventListener("click", wheelStop);
 
         let isStopped: boolean
 
@@ -111,7 +111,7 @@ script:
         }
     language: typescript
 template:
-    content: |+
+    content: |-
         <header class="ms-Fabric">
             <h2 class="ms-font-l">Spin the rainbow wheel</h2>
         </header>
@@ -124,10 +124,9 @@ template:
         <button id="stop" class="ms-Button">
                 <span class="ms-Button-label">Stop the Wheel</span>
             </button>
-
     language: html
 style:
-    content: |
+    content: |-
         h2:not(:first-child) {
             margin-top: 35px;
         }
@@ -144,15 +143,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/99-just-for-fun/gradient.yaml b/samples/excel/99-just-for-fun/gradient.yaml
index a82bbd62b..619402144 100644
--- a/samples/excel/99-just-for-fun/gradient.yaml
+++ b/samples/excel/99-just-for-fun/gradient.yaml
@@ -8,15 +8,14 @@ api_set:
     ExcelApi: '1.4'
 script:
     content: |-
-        initializeColorPickers();
+        // Set up the click handler.
+        document.getElementById("draw-gradient").addEventListener("click", drawGradient);
+        document.getElementById("random").addEventListener("click", randomizeColors);
 
-        // Set up the click handler:
-        const $drawButton = $("#draw-gradient").on("click", drawGradient);
-        $("#random").on("click", randomizeColors);
-
-        /** Click-handler for drawing the gradient */
+        /** Click-handler for drawing the gradient. */
         async function drawGradient() {
-            $drawButton.prop("disabled", true);
+            const drawButton = document.getElementById("draw-gradient") as HTMLButtonElement;
+            drawButton.disabled = true;
 
             try {
                 await Excel.run(drawGradientHelper);
@@ -24,10 +23,10 @@ script:
                 console.log(error);
             }
 
-            $drawButton.prop("disabled", false);
+            drawButton.disabled = false;
         }
 
-        /** Helper function to do the actual gradient-drawing */
+        /** Helper function to do the actual gradient-drawing. */
         async function drawGradientHelper(context: Excel.RequestContext) {
             context.workbook.worksheets.getItemOrNullObject("Gradient").delete();
             const sheet = context.workbook.worksheets.add("Gradient");
@@ -40,9 +39,21 @@ script:
                 }
             });
 
-            let originalSize = parseInt($("#size").val() as string);
+            let originalSize = parseInt((document.getElementById("size") as HTMLInputElement).value);
             const colors2D = createColorArray(originalSize);
 
+            // Retrieve color values from <input type="color"> elements.
+            const topLeftColor = (document.getElementById("top-left") as HTMLInputElement).value;
+            const topRightColor = (document.getElementById("top-right") as HTMLInputElement).value;
+            const bottomLeftColor = (document.getElementById("bottom-left") as HTMLInputElement).value;
+            const bottomRightColor = (document.getElementById("bottom-right") as HTMLInputElement).value;
+
+            // Convert HEX colors to RGB using TinyColor.
+            const topLeftRgb = tinycolor(topLeftColor).toRgb();
+            const topRightRgb = tinycolor(topRightColor).toRgb();
+            const bottomLeftRgb = tinycolor(bottomLeftColor).toRgb();
+            const bottomRightRgb = tinycolor(bottomRightColor).toRgb();
+
             if (Office.context.requirements.isSetSupported("ExcelApi", "1.9")) {
                 // ExcelApi 1.9 introduced the setCellProperties APIs to efficiently set different properties
                 // across a range without needing to iterate cell-by-cell.
@@ -73,21 +84,33 @@ script:
         }
 
         function createColorArray(size: number): string[][] {
-            // Create a 2D in-memory array to hold the colors
+            // Create a 2D in-memory array to hold the colors.
             let colors2D = Array(size);
             for (let row = 0; row < size; row++) {
                 colors2D[row] = Array(size);
             }
 
+            // Get the color values from the color pickers.
+            const topLeftColor = (document.getElementById("top-left") as HTMLInputElement).value;
+            const topRightColor = (document.getElementById("top-right") as HTMLInputElement).value;
+            const bottomLeftColor = (document.getElementById("bottom-left") as HTMLInputElement).value;
+            const bottomRightColor = (document.getElementById("bottom-right") as HTMLInputElement).value;
+
+            // Convert HEX to RGB using TinyColor.
+            const topLeftRgb = tinycolor(topLeftColor).toRgb();
+            const topRightRgb = tinycolor(topRightColor).toRgb();
+            const bottomLeftRgb = tinycolor(bottomLeftColor).toRgb();
+            const bottomRightRgb = tinycolor(bottomRightColor).toRgb();
+
             const topColors = getColorsArray(
-                $("#top-left").spectrum("get").toRgb(),
-                $("#top-right").spectrum("get").toRgb(),
+                topLeftRgb,
+                topRightRgb,
                 size
             );
 
             const bottomColors = getColorsArray(
-                $("#bottom-left").spectrum("get").toRgb(),
-                $("#bottom-right").spectrum("get").toRgb(),
+                bottomLeftRgb,
+                bottomRightRgb,
                 size
             );
 
@@ -101,9 +124,9 @@ script:
             return colors2D;
         }
 
-        /** Helper function to get an array of colors */
-        function getColorsArray(color1: ColorFormats.RGB, color2: ColorFormats.RGB, count: number) {
-            const result = new Array<ColorFormats.RGB>(count);
+        /** Helper function to get an array of colors. */
+        function getColorsArray(color1, color2, count: number) {
+            const result = new Array(count);
             for (let i = 0; i < count; i++) {
                 const fraction = i / (count - 1);
                 result[i] = {
@@ -115,16 +138,14 @@ script:
             return result;
         }
 
-        function initializeColorPickers() {
-            $("#color-table input[type='text']").spectrum({
-                preferredFormat: "rgb",
-                showInput: true
-            });
-        }
-
         function randomizeColors() {
-            $("#color-table input[type='text']").each((index, element) => {
-                $(element).spectrum("set", tinycolor.random().toHexString());
+            // Select all color input elements.
+            const colorInputs = document.querySelectorAll("#color-table input[type='color']");
+            
+            // Iterate through each color input and set a random color.
+            colorInputs.forEach((input) => {
+                const randomColor = tinycolor.random().toHexString();
+                (input as HTMLInputElement).value = randomColor;
             });
         }
     language: typescript
@@ -133,41 +154,36 @@ template:
         <header class="ms-Fabric">
             <h2 class="ms-font-l">Color configuration</h2>
         </header>
-
         <section class="ms-Fabric">
             <div id="color-table" class="ms-font-s">
                 <div>Top left</div>
                 <table class="ms-font-m">
                     <tr>
-                        <td><input id="top-left" type="text" value="red" /></td>
-                        <td><input id="top-right" type="text" value="lime" /></td>
+                        <td><input id="top-left" type="color" value="#ff0000" /></td>
+                        <td><input id="top-right" type="color" value="#00ff00" /></td>
                     </tr>
                     <tr>
-                        <td><input id="bottom-left" type="text" value="blue" /></td>
-                        <td><input id="bottom-right" type="text" value="yellow" /></td>
+                        <td><input id="bottom-left" type="color" value="#0000ff" /></td>
+                        <td><input id="bottom-right" type="color" value="#ffff00" /></td>
                     </tr>
                 </table>
                 <div>
                     Bottom right
                 </div>
             </div>
-
             <button id="random" class="ms-Button">
                 <span class="ms-Button-label">Randomize colors</span>
             </button>
-
             <h2 class="ms-font-l">Size
                 <span class="ms-font-m">(width x height)</span>
             </h2>
             <input id="size" type="range" value="25" min="2" max="100"></input>
-
             <button id="draw-gradient" class="ms-Button ms-Button--primary">
                 <span class="ms-Button-label ms-font-l">Draw gradient</span>
             </button>
-
             <div id="credits">
                 <div class="ms-font-s">
-                    Uses the <a href="https://github.com/bgrins/spectrum" target="_blank">Spectrum color picker</a>, and the <a href="https://github.com/bgrins/TinyColor" target="_blank">TinyColor</a> libraries.
+                    Uses the <a href="https://github.com/bgrins/TinyColor" target="_blank">TinyColor</a> library.
                 </div>
             </div>
         </section>
@@ -211,20 +227,11 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
 
-    tinycolor2@1.4.1/tinycolor.js
+    https://unpkg.com/tinycolor2@1.4.1/tinycolor.js
     @types/tinycolor2
-    spectrum-colorpicker@1.8.0/spectrum.js
-    spectrum-colorpicker@1.8.0/spectrum.css
-    @types/spectrum
diff --git a/samples/excel/99-just-for-fun/path-finder-game.yaml b/samples/excel/99-just-for-fun/path-finder-game.yaml
index d0ed350b2..812b2fdfd 100644
--- a/samples/excel/99-just-for-fun/path-finder-game.yaml
+++ b/samples/excel/99-just-for-fun/path-finder-game.yaml
@@ -7,12 +7,11 @@ host: EXCEL
 api_set:
     ExcelApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", setup);
-        $("#repeat").on("click", repeat);
-
-        const $pruneTheGrid = $("#step-by-step").on("click", pruneTheGrid);
-        const $allAtOnce = $("#all-at-once").on("click", allAtOnce);
+    content: |-
+        document.getElementById("setup").addEventListener("click", setup);
+        document.getElementById("repeat").addEventListener("click", repeat);
+        document.getElementById("step-by-step").addEventListener("click", pruneTheGrid);
+        document.getElementById("all-at-once").addEventListener("click", allAtOnce);
 
         const GRID_ROW_COUNT = 25;
         const GRID_COLUMN_COUNT = 30;
@@ -20,7 +19,7 @@ script:
         let matrixPrevious: string[][]
 
         function setup() {
-            const density = parseInt($("#density").val() as string) / 100;
+            const density = parseInt((document.getElementById("density") as HTMLInputElement).value) / 100;
             const symbol = "\u25cf";
 
             const matrix = new Array(GRID_ROW_COUNT);
@@ -32,7 +31,7 @@ script:
             }
 
             matrixPrevious = matrix;
-            $("#repeat").show();
+            document.getElementById("repeat").style.display = "block";
 
             setupHelper(matrix);
         }
@@ -71,7 +70,8 @@ script:
         }
 
         async function pruneTheGrid() {
-            $pruneTheGrid.attr("disabled", "true");
+            const pruneTheGrid = document.getElementById("step-by-step") as HTMLButtonElement;
+            pruneTheGrid.disabled = true;
 
             await tryCatch(() => Excel.run(async (context) => {
                 const grid = context.workbook.worksheets
@@ -84,11 +84,12 @@ script:
                 await context.sync();
             }));
 
-            $pruneTheGrid.removeAttr("disabled");
+            pruneTheGrid.disabled = false;
         }
 
         async function allAtOnce() {
-            $allAtOnce.attr("disabled", "true");
+            const allAtOnce = document.getElementById("all-at-once") as HTMLButtonElement;
+            allAtOnce.disabled = true;
             let counter = 0;
 
             await tryCatch(() => Excel.run(async (context) => {
@@ -111,7 +112,7 @@ script:
             }));
 
             console.log("Count of iterations: " + counter);
-            $allAtOnce.removeAttr("disabled");
+            allAtOnce.disabled = false;
         }
 
 
@@ -174,11 +175,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>Check whether there is a path from left to right, moving forward one cell at a time (and only straight or diagonally). </p>
         </section>
-
         <h3 class="ms-font-l">Set up</h3>
         <section class="ms-Fabric setup ms-font-m">
             <div>Circle density (%)</div>
@@ -191,14 +191,12 @@ template:
             </button>
         </section>
         <br />
-
         <h3 class="ms-font-l">Find the path:</h3>
         <section class="ms-Fabric find-path ms-font-m">
                 <button id="all-at-once" class="ms-Button ms-Button--primary">
                 <span class="ms-Button-label">Prune all at once</span>
             </button>
             <br/>
-
             <button id="step-by-step" class="ms-Button left-margin">
                 <span class="ms-Button-label">Prune step-by-step</span>
             </button>
@@ -221,15 +219,9 @@ style:
             margin-bottom: 0;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/99-just-for-fun/patterns.yaml b/samples/excel/99-just-for-fun/patterns.yaml
index 37266ccc2..76399f6c7 100644
--- a/samples/excel/99-just-for-fun/patterns.yaml
+++ b/samples/excel/99-just-for-fun/patterns.yaml
@@ -8,9 +8,9 @@ api_set:
     ExcelApi: '1.4'
 script:
     content: |-
-        $("#squares").on("click", () => tryCatch(drawSquares));
-        $("#spiral").on("click", () => tryCatch(drawSpiral));
-        $("#decoration").on("click", () => tryCatch(drawDecoration));
+        document.getElementById("squares").addEventListener("click", () => tryCatch(drawSquares));
+        document.getElementById("spiral").addEventListener("click", () => tryCatch(drawSpiral));
+        document.getElementById("decoration").addEventListener("click", () => tryCatch(drawDecoration));
 
         async function drawSquares() {
             await Excel.run(async (context) => {
@@ -20,7 +20,7 @@ script:
                 sheet.activate();
                 formatBackground(sheet);
 
-                const size = parseInt($("#size").val() as string);
+                const size = parseInt((document.getElementById("size") as HTMLInputElement).value);
 
                 for (let i = 0; i < size; i++) {
                     const width = size * 2 - 2 * i;
@@ -45,7 +45,7 @@ script:
                 sheet.activate();
                 formatBackground(sheet);
 
-                const size = Math.floor(parseInt($("#size").val() as string) / 2);
+                const size = Math.floor(parseInt((document.getElementById("size") as HTMLInputElement).value) / 2);
 
                 for (let i = 0; i < size - 1; i++) {
 
@@ -106,7 +106,7 @@ script:
                 sheet.activate();
                 formatBackground(sheet);
 
-                const size = Math.floor(parseInt($("#size").val() as string) / 2);
+                const size = Math.floor(parseInt((document.getElementById("size") as HTMLInputElement).value) / 2);
 
                 for (let i = 0; i < size; i++) {
                     const range1 = sheet.getCell(2 * i + 1, 2 * i + 1).getResizedRange(size - i, size - i);
@@ -156,30 +156,26 @@ script:
 template:
     content: |-
         <h2 class="ms-Fabric ms-font-l">Draw colorful patterns</h2>
-
         <section class="ms-Fabric ms-font-m" style="margin-top: 30px">
             <div>Choose size:</div>
             <input id="size" type="range" min="2" max="50" value="30"></input>
         </section>
-
         <section class="ms-Fabric ms-font-m" style="margin-top: 30px">
             <button id="squares" class="ms-Button ">
                 <span class="ms-Button-label">Concentric Squares</span>
             </button>
             <br/><br/>
-
             <button id="spiral" class="ms-Button">
                 <span class="ms-Button-label">Spiral</span>
             </button>   
             <br/><br/>
-
             <button id="decoration" class="ms-Button">
                 <span class="ms-Button-label">Decoration</span>
             </button>   
         </section>
     language: html
 style:
-    content: |
+    content: |-
         h2:not(:first-child) {
             margin-top: 35px;
         }
@@ -188,15 +184,9 @@ style:
             width: 100%;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/excel/99-just-for-fun/tetrominos.yaml b/samples/excel/99-just-for-fun/tetrominos.yaml
index f8c88d412..57441e125 100644
--- a/samples/excel/99-just-for-fun/tetrominos.yaml
+++ b/samples/excel/99-just-for-fun/tetrominos.yaml
@@ -8,18 +8,17 @@ api_set:
     ExcelApi: '1.9'
 script:
     content: |-
-        $("#run").on("click", () => {
-            $("#setup").hide();
+        document.getElementById("run").addEventListener("click", () => {
+            document.getElementById("setup").style.display = "none";
             tryCatch(run);
         });
-
-        $("#selectedFile").on("change", () => tryCatch(readImageFromFile));
-        $("#focusButton").on("click", () => tryCatch(focus));
+        document.getElementById("selectedFile").addEventListener("change", () => tryCatch(readImageFromFile));
+        document.getElementById("focusButton").addEventListener("click", () => tryCatch(focus));
 
         let backgroundPicture = getDefaultBackgroundPicture();
 
         function readImageFromFile() {
-            const myFile = <HTMLInputElement>document.getElementById("selectedFile");
+            const myFile = document.getElementById("selectedFile") as HTMLInputElement;
             const reader = new FileReader();
 
             reader.onload = (event) => {
@@ -33,7 +32,7 @@ script:
         }
 
         function focus() {
-            $("#container").focus();
+            document.getElementById("container").focus();
         }
 
         async function run() {
@@ -621,10 +620,12 @@ script:
                     }
                 }
 
-                await run($("#container")[0], $("#sessionPane")[0]);
+                const container = document.getElementById("container");
+                const sessionPane = document.getElementById("sessionPane");
+                await run(container, sessionPane);
 
-                $("#container").focus();
-                $("#focus").show();
+                container.focus();
+                document.getElementById("focus").style.display = "block";
             });
         }
 
@@ -633,7 +634,7 @@ script:
             try {
                 await callback();
             } catch (error) {
-                $("#setup").show();
+                document.getElementById("setup").style.display = "block";
                 // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
                 console.error(error);
             }
@@ -649,7 +650,6 @@ template:
             <section class="ms-Fabric ms-font-m">
                 <p>This sample lets you repeatedly stack tetrominos, which are represented by Shapes. Select a background image (or leave blank for the default) and <b>Start!</b>. The controls will then be displayed.</p>
             </section>
-
             <section class="ms-Fabric samples ms-font-m" id="setup">
                 <p>Select Background Image</p>
                 <input type="file" id="selectedFile"><p>
@@ -784,17 +784,11 @@ style:
             border: 1px solid black;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
 
     https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js
diff --git a/samples/excel/default.yaml b/samples/excel/default.yaml
index e8a58676c..c303f62eb 100644
--- a/samples/excel/default.yaml
+++ b/samples/excel/default.yaml
@@ -6,8 +6,8 @@ host: EXCEL
 api_set:
     ExcelApi: '1.1'
 script:
-    content: |
-        $("#run").on("click", () => tryCatch(run));
+    content: |-
+        document.getElementById("run").addEventListener("click", () => tryCatch(run));
 
         async function run() {
             await Excel.run(async (context) => {
@@ -31,7 +31,7 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <button id="run" class="ms-Button">
             <span class="ms-Button-label">Run</span>
         </button>
@@ -49,15 +49,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/onenote/default.yaml b/samples/onenote/default.yaml
index 0382801b7..16f59bda5 100644
--- a/samples/onenote/default.yaml
+++ b/samples/onenote/default.yaml
@@ -6,8 +6,8 @@ host: ONENOTE
 api_set:
     OneNoteApi: '1.1'
 script:
-    content: |
-        $("#run").on("click", () => tryCatch(run));
+    content: |-
+        document.getElementById("run").addEventListener("click", () => tryCatch(run));
 
         async function run() {
             await OneNote.run(async (context) => {
@@ -29,7 +29,7 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <button id="run" class="ms-Button">
             <span class="ms-Button-label">Run</span>
         </button>
@@ -47,15 +47,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/10-roaming-settings/roaming-settings.yaml b/samples/outlook/10-roaming-settings/roaming-settings.yaml
index 9eb635514..a24b5e596 100644
--- a/samples/outlook/10-roaming-settings/roaming-settings.yaml
+++ b/samples/outlook/10-roaming-settings/roaming-settings.yaml
@@ -1,29 +1,30 @@
 id: outlook-roaming-settings-roaming-settings
 name: Use add-in settings
-description: 'Gets, sets, and saves add-in roaming settings'
+description: Gets, sets, saves, and removes add-in roaming settings.
 host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
-        $("#set").on("click", set);
-        $("#save").on("click", save);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
+        document.getElementById("set").addEventListener("click", set);
+        document.getElementById("save").addEventListener("click", save);
+        document.getElementById("remove").addEventListener("click", remove);
 
         function get() {
-          const settingName = $("#settingName").val();
+          const settingName = (document.getElementById("settingName") as HTMLInputElement).value;
           const settingValue = Office.context.roamingSettings.get(settingName);
-          $("#settingValue").val(settingValue);
+          (document.getElementById("settingValue") as HTMLInputElement).value = settingValue;
           console.log(`The value of setting "${settingName}" is "${settingValue}".`);
         }
-          
+
         function set() {
-          const settingName = $("#settingName").val();
-          const settingValue = $("#settingValue").val();
+          const settingName = (document.getElementById("settingName") as HTMLInputElement).value;
+          const settingValue = (document.getElementById("settingValue") as HTMLInputElement).value;
           Office.context.roamingSettings.set(settingName, settingValue);
           console.log(`Setting "${settingName}" set to value "${settingValue}".`);
         }
-          
+
         function save() {
           // Save settings in the mailbox to make it available in future sessions.
           Office.context.roamingSettings.saveAsync(function(result) {
@@ -34,13 +35,19 @@ script:
             }
           });
         }
+
+        function remove() {
+          // Remove the specified setting from the mailbox.
+          const settingName = (document.getElementById("settingName") as HTMLInputElement).value;
+          Office.context.roamingSettings.remove(settingName);
+          console.log(`The "${settingName}" setting has been removed.`);
+        }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to set, save, and get add-in properties that can be accessed the next time the add-in is opened.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <div class="ms-TextField">
@@ -60,6 +67,9 @@ template:
           <button id="save" class="ms-Button">
             <div class="ms-Button-label">Save all</div>
           </button>
+          <button id="remove" class="ms-Button">
+            <div class="ms-Button-label">Remove</div>
+          </button>
         </section>
     language: html
 style:
@@ -75,15 +85,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/15-item-custom-properties/load-set-get-save.yaml b/samples/outlook/15-item-custom-properties/load-set-get-save.yaml
index 1c8c4e79c..cd2502b98 100644
--- a/samples/outlook/15-item-custom-properties/load-set-get-save.yaml
+++ b/samples/outlook/15-item-custom-properties/load-set-get-save.yaml
@@ -1,19 +1,19 @@
 id: outlook-item-custom-properties-load-set-get-save
 name: Work with item custom properties
-description: 'Gets the custom properties that the add-in placed on the current item, sets a new one, gets it, removes it, and saves all custom properties back to the item.'
+description: Gets the custom properties that the add-in placed on the current item, sets a new one, gets it, removes it, and saves all custom properties back to the item.
 host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
+    content: |-
         let customProps;
 
-        $("#load").on("click", load);
-        $("#get").on("click", get);
-        $("#get-all").on("click", getAll);
-        $("#set").on("click", set);
-        $("#remove").on("click", remove);
-        $("#save").on("click", save);
+        document.getElementById("load").addEventListener("click", load);
+        document.getElementById("get").addEventListener("click", get);
+        document.getElementById("get-all").addEventListener("click", getAll);
+        document.getElementById("set").addEventListener("click", set);
+        document.getElementById("remove").addEventListener("click", remove);
+        document.getElementById("save").addEventListener("click", save);
 
         function load() {
           Office.context.mailbox.item.loadCustomPropertiesAsync((result) => {
@@ -28,7 +28,7 @@ script:
         }
 
         function get() {
-          const propertyName = $("#get-property-name").val();
+          const propertyName = (document.getElementById("get-property-name") as HTMLInputElement).value;
           const propertyValue = customProps.get(propertyName);
           console.log(`The value of custom property "${propertyName}" is "${propertyValue}".`);
         }
@@ -45,14 +45,14 @@ script:
         }
 
         function set() {
-          const propertyName = $("#set-property-name").val();
-          const propertyValue = $("#property-value").val();
+          const propertyName = (document.getElementById("set-property-name") as HTMLInputElement).value;
+          const propertyValue = (document.getElementById("property-value") as HTMLInputElement).value;
           customProps.set(propertyName, propertyValue);
           console.log(`Custom property "${propertyName}" set to value "${propertyValue}".`);
         }
 
         function remove() {
-          const propertyName = $("#remove-property-name").val();
+          const propertyName = (document.getElementById("remove-property-name") as HTMLInputElement).value;
           customProps.remove(propertyName);
           console.log(`Custom property "${propertyName}" removed.`);
         }
@@ -73,7 +73,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to set, save, and get the custom per-item properties of an add-in.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>First load the <a href="https://learn.microsoft.com/javascript/api/outlook/office.customproperties"
@@ -127,15 +126,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/20-item-body/add-inline-base64-image.yaml b/samples/outlook/20-item-body/add-inline-base64-image.yaml
index b86169eed..e97523983 100644
--- a/samples/outlook/20-item-body/add-inline-base64-image.yaml
+++ b/samples/outlook/20-item-body/add-inline-base64-image.yaml
@@ -6,38 +6,60 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.8'
 script:
-    content: |
-        $("#add-image").on("click", addImage);
+    content: |-
+        document.getElementById("prepend-image").addEventListener("click", prependImage);
+        document.getElementById("append-image").addEventListener("click", appendImage);
+
+        const base64String =
+          "iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAnUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAN0S+bUAAAAMdFJOUwAQIDBAUI+fr7/P7yEupu8AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF8SURBVGhD7dfLdoMwDEVR6Cspzf9/b20QYOthS5Zn0Z2kVdY6O2WULrFYLBaLxd5ur4mDZD14b8ogWS/dtxV+dmx9ysA2QUj9TQRWv5D7HyKwuIW9n0vc8tkpHP0W4BOg3wQ8wtlvA+PC1e8Ao8Ld7wFjQtHvAiNC2e8DdqHqKwCrUPc1gE1AfRVgEXBfB+gF0lcCWoH2tYBOYPpqQCNwfT3QF9i+AegJfN8CtAWhbwJagtS3AbIg9o2AJMh9M5C+SVGBvx6zAfmT0r+Bv8JMwP4kyFPir+cswF5KL3WLv14zAFBCLf56Tw9cparFX4upgaJUtPhrOS1QlY5W+vWTXrGgBFB/b72ev3/0igUdQPppP/nfowfKUUEFcP207y/yxKmgAYQ+PywoAFOfCH3A2MdCFzD3kdADBvq10AGG+pXQBgb7pdAEhvuF0AIc/VtoAK7+JciAs38KIuDugyAC/v4hiMCE/i7IwLRBsh68N2WQjMVisVgs9i5bln8LGScNcCrONQAAAABJRU5ErkJggg==";
+
+        function prependImage() {
+          // Insert the Base64-encoded image to the beginning of the body.
+          Office.context.mailbox.item.addFileAttachmentFromBase64Async(base64String, "sample.png", { isInline: true }, (attachmentResult) => {
+            if (attachmentResult.status === Office.AsyncResultStatus.Failed) {
+              console.log(`Failed to attach file: ${attachmentResult.error.message}`);
+              return;
+            }
 
-        function addImage() {
-          const mailItem = Office.context.mailbox.item;
-          const base64String =
-            "iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAnUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAN0S+bUAAAAMdFJOUwAQIDBAUI+fr7/P7yEupu8AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF8SURBVGhD7dfLdoMwDEVR6Cspzf9/b20QYOthS5Zn0Z2kVdY6O2WULrFYLBaLxd5ur4mDZD14b8ogWS/dtxV+dmx9ysA2QUj9TQRWv5D7HyKwuIW9n0vc8tkpHP0W4BOg3wQ8wtlvA+PC1e8Ao8Ld7wFjQtHvAiNC2e8DdqHqKwCrUPc1gE1AfRVgEXBfB+gF0lcCWoH2tYBOYPpqQCNwfT3QF9i+AegJfN8CtAWhbwJagtS3AbIg9o2AJMh9M5C+SVGBvx6zAfmT0r+Bv8JMwP4kyFPir+cswF5KL3WLv14zAFBCLf56Tw9cparFX4upgaJUtPhrOS1QlY5W+vWTXrGgBFB/b72ev3/0igUdQPppP/nfowfKUUEFcP207y/yxKmgAYQ+PywoAFOfCH3A2MdCFzD3kdADBvq10AGG+pXQBgb7pdAEhvuF0AIc/VtoAK7+JciAs38KIuDugyAC/v4hiMCE/i7IwLRBsh68N2WQjMVisVgs9i5bln8LGScNcCrONQAAAABJRU5ErkJggg==";
+            Office.context.mailbox.item.body.prependAsync('<img src="/service/cid:sample.png" />', { coercionType: Office.CoercionType.Html }, (prependResult) => {
+              if (prependResult.status === Office.AsyncResultStatus.Failed) {
+                console.log(`Failed to prepend image to body: ${attachmentResult.error.message}`);
+                return;
+              }
 
+              console.log("Inline Base64-encoded image added to the beginning of the body.");
+            })
+          });
+        }
+
+        function appendImage() {
           // Get the current body of the message or appointment.
-          mailItem.body.getAsync(Office.CoercionType.Html, (bodyResult) => {
-            if (bodyResult.status === Office.AsyncResultStatus.Succeeded) {
-              // Insert the Base64-encoded image to the beginning of the body.
-              const options = { isInline: true, asyncContext: bodyResult.value };
-              mailItem.addFileAttachmentFromBase64Async(base64String, "sample.png", options, (attachResult) => {
-                if (attachResult.status === Office.AsyncResultStatus.Succeeded) {
-                  let body = attachResult.asyncContext;
-                  body = body.replace("<p class=MsoNormal>", `<p class=MsoNormal><img src="/service/cid:sample.png">`);
+          Office.context.mailbox.item.body.getAsync(Office.CoercionType.Html, (bodyResult) => {
+            if (bodyResult.status === Office.AsyncResultStatus.Failed) {
+              console.log(`Failed to get body: ${bodyResult.error.message}`);
+              return;
+            }
 
-                  mailItem.body.setAsync(body, { coercionType: Office.CoercionType.Html }, (setResult) => {
-                    if (setResult.status === Office.AsyncResultStatus.Succeeded) {
-                      console.log("Inline Base64-encoded image added to the body.");
-                    } else {
-                      console.log(setResult.error.message);
-                    }
-                  });
-                } else {
-                  console.log(attachResult.error.message);
+            // Add the Base64-encoded image to the end of the body.
+            const options = { isInline: true, asyncContext: bodyResult.value };
+            Office.context.mailbox.item.addFileAttachmentFromBase64Async(base64String, "sample.png", options, (attachResult) => {
+              if (attachResult.status === Office.AsyncResultStatus.Failed) {
+                console.log(`Failed to attach file: ${attachResult.error.message}`);
+                return;
+              }
+
+              let body = attachResult.asyncContext;
+              body += '<img src="/service/cid:sample.png" />';
+
+              Office.context.mailbox.item.body.setAsync(body, { coercionType: Office.CoercionType.Html }, (setResult) => {
+                if (setResult.status === Office.AsyncResultStatus.Failed) {
+                  console.log(`Failed to set body: ${setResult.error.message}`);
+                  return;
                 }
+                
+                console.log("Inline Base64-encoded image added to the end of the body.");
               });
-            } else {
-              console.log(bodyResult.error.message);
-            }
+            });
           });
         }
     language: typescript
@@ -47,11 +69,13 @@ template:
           <p class="ms-font-m">This sample adds an inline Base64-encoded image to the body of the message or appointment being composed.</p>
           <p><b>Required mode</b>: Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
-          <button id="add-image" class="ms-Button">
-            <span class="ms-Button-label">Add an inline Base64-encoded image</span>
+          <button id="prepend-image" class="ms-Button">
+            <span class="ms-Button-label">Prepend image to body</span>
+          </button>
+          <button id="append-image" class="ms-Button">
+            <span class="ms-Button-label">Append image to body</span>
           </button>
         </section>
     language: html
@@ -68,15 +92,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/20-item-body/append-text-on-send.yaml b/samples/outlook/20-item-body/append-text-on-send.yaml
index 7cdda638f..b283f7abd 100644
--- a/samples/outlook/20-item-body/append-text-on-send.yaml
+++ b/samples/outlook/20-item-body/append-text-on-send.yaml
@@ -6,12 +6,12 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.9'
 script:
-    content: |
-        $("#append-on-send").on("click", appendOnSend);
+    content: |-
+        document.getElementById("append-on-send").addEventListener("click", appendOnSend);
 
         function appendOnSend() {
           // This snippet appends text to the end of the message or appointment's body once it's sent.
-          const text = $("#text-field").val();
+          const text = (document.getElementById("text-field") as HTMLInputElement).value;
 
           // It's recommended to call getTypeAsync and pass its returned value to the options.coercionType parameter of the appendOnSendAsync call.
           Office.context.mailbox.item.body.getTypeAsync((asyncResult) => {
@@ -38,7 +38,6 @@ template:
             <p class="ms-font-m">This sample appends text to the end of the message or appointment's body once it's sent.</p>
             <p><b>Required mode</b>: Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p><b>Important</b>: To use <code>appendOnSendAsync</code>, you must set <code>AppendOnSend</code> as an extended permission in the <code>ExtendedPermissions</code> manifest element. To learn more about append-on-send and its configuration, see <a href="https://learn.microsoft.com/office/dev/add-ins/outlook/append-on-send" target="_blank">Implement append-on-send in your Outlook add-in</a>.</p>
@@ -65,15 +64,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/20-item-body/get-body-format.yaml b/samples/outlook/20-item-body/get-body-format.yaml
index ef8e58cd1..b077f1147 100644
--- a/samples/outlook/20-item-body/get-body-format.yaml
+++ b/samples/outlook/20-item-body/get-body-format.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get-body-format").on("click", getBodyFormat);
+    content: |-
+        document.getElementById("get-body-format").addEventListener("click", getBodyFormat);
 
         function getBodyFormat() {
           // Get the mail item's body format (plain text or HTML) and log it to the console.
@@ -27,7 +27,6 @@ template:
             <p class="ms-font-m">This sample gets the message or appointment's body format (plain text or HTML).</p>
             <p><b>Required mode</b>: Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-body-format" class="ms-Button">
@@ -48,15 +47,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/20-item-body/get-selected-data.yaml b/samples/outlook/20-item-body/get-selected-data.yaml
index dc6ea3ce2..90a1a202e 100644
--- a/samples/outlook/20-item-body/get-selected-data.yaml
+++ b/samples/outlook/20-item-body/get-selected-data.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get-selected-data").on("click", getSelectedData);
+    content: |-
+        document.getElementById("get-selected-data").addEventListener("click", getSelectedData);
 
         function getSelectedData() {
           Office.context.mailbox.item.getSelectedDataAsync(Office.CoercionType.Text, function(asyncResult) {
@@ -27,7 +27,6 @@ template:
             <p class="ms-font-m">This sample shows how to get the selected text in the item body or subject/title.</p>
             <p><b>Required mode</b>: Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Select text in the item body or subject then push the <b>Get selected text</b> button.</p>
@@ -49,15 +48,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/20-item-body/prepend-text-on-send.yaml b/samples/outlook/20-item-body/prepend-text-on-send.yaml
index 9e7fa7f1b..1b363be09 100644
--- a/samples/outlook/20-item-body/prepend-text-on-send.yaml
+++ b/samples/outlook/20-item-body/prepend-text-on-send.yaml
@@ -6,12 +6,12 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.13'
 script:
-    content: |
-        $("#prepend-on-send").on("click", prependOnSend);
+    content: |-
+        document.getElementById("prepend-on-send").addEventListener("click", prependOnSend);
 
         function prependOnSend() {
           // This snippet prepends text to the beginning of the message or appointment's body once it's sent.
-          const text = $("#text-field").val().toString();
+          const text = (document.getElementById("text-field") as HTMLInputElement).value;
 
           // It's recommended to call getTypeAsync and pass its returned value to the options.coercionType parameter of the prependOnSendAsync call.
           Office.context.mailbox.item.body.getTypeAsync((asyncResult) => {
@@ -38,7 +38,6 @@ template:
             <p class="ms-font-m">This sample prepends text to the beginning of the message or appointment's body once it's sent.</p>
             <p><b>Required mode</b>: Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p><b>Important</b>: To use <code>prependOnSendAsync</code>, you must set <code>AppendOnSend</code> as an extended permission in the <code>ExtendedPermissions</code> manifest element. <code>appendOnSendAsync</code> and <code>prependOnSendAsync</code> both use the <code>AppendOnSend</code> extended permission. To learn more about prepend-on-send, see <a href="https://learn.microsoft.com/office/dev/add-ins/outlook/append-on-send" target="_blank">Prepend or append content to a message or appointment body on send</a>.</p>
@@ -65,15 +64,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/20-item-body/prepend-text-to-item-body.yaml b/samples/outlook/20-item-body/prepend-text-to-item-body.yaml
index 0875e7129..e9b2a5b1c 100644
--- a/samples/outlook/20-item-body/prepend-text-to-item-body.yaml
+++ b/samples/outlook/20-item-body/prepend-text-to-item-body.yaml
@@ -6,15 +6,15 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#prepend").on("click", prependText);
+    content: |-
+        document.getElementById("prepend").addEventListener("click", prependText);
 
         function prependText() {
           /* This snippet adds text to the beginning of the message or appointment's body. 
             
             When prepending a link in HTML markup to the body, you can disable the online link preview by setting the anchor tag's id attribute to "LPNoLP". For example, '<a id="LPNoLP" href="https://www.contoso.com/">Click here!</a>'.
           */
-          const text = $("#text-field").val().toString();
+          const text = (document.getElementById("text-field") as HTMLInputElement).value;
 
           // It's recommended to call getTypeAsync and pass its returned value to the options.coercionType parameter of the prependAsync call.
           Office.context.mailbox.item.body.getTypeAsync((asyncResult) => {
@@ -41,7 +41,6 @@ template:
             <p class="ms-font-m">This sample adds text to the beginning of the message or appointment's body.</p>
             <p><b>Required mode</b>: Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <div class="ms-TextField">
@@ -67,15 +66,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/20-item-body/replace-selected-text.yaml b/samples/outlook/20-item-body/replace-selected-text.yaml
index 568298014..425dcee0b 100644
--- a/samples/outlook/20-item-body/replace-selected-text.yaml
+++ b/samples/outlook/20-item-body/replace-selected-text.yaml
@@ -6,15 +6,15 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#replace-selection").on("click", replaceSelection);
+    content: |-
+        document.getElementById("replace-selection").addEventListener("click", replaceSelection);
 
         function replaceSelection() {
           /* This snippet replaces selected text in a message or appointment's body with specified text.
             
             If you want to use a link in HTML markup as a value of the setSelectedDataAsync call's data parameter, you can disable online link preview by setting the anchor tag's id attribute to "LPNoLP". For example, '<a id="LPNoLP" href="https://www.contoso.com/">Click here!</a>'.
           */
-          const text = $("#text-field").val().toString();
+          const text = (document.getElementById("text-field") as HTMLInputElement).value;
 
           // It's recommended to call getTypeAsync and pass its returned value to the options.coercionType parameter of the prependAsync call.
           Office.context.mailbox.item.body.getTypeAsync((asyncResult) => {
@@ -41,7 +41,6 @@ template:
             <p class="ms-font-m">This sample replaces selected text in a message or appointment's body with specified text.</p>
             <p><b>Required mode</b>: Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <ol>
@@ -71,15 +70,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/25-item-save-and-close/close-async.yaml b/samples/outlook/25-item-save-and-close/close-async.yaml
index f308763c8..59b23949a 100644
--- a/samples/outlook/25-item-save-and-close/close-async.yaml
+++ b/samples/outlook/25-item-save-and-close/close-async.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.14'
 script:
-    content: |
-        $("#close-async").on("click", closeAsync);
+    content: |-
+        document.getElementById("close-async").addEventListener("click", closeAsync);
 
         function closeAsync() {
           // This snippet closes the current message being composed and discards any unsaved changes when the optional property, discardItem, is set to true.
@@ -24,12 +24,11 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p class="ms-font-m">This sample shows how to close the current message being composed and discard any unsaved changes.</p>
             <p><b>Required mode</b>: Message Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="close-async" class="ms-Button">
@@ -50,15 +49,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/25-item-save-and-close/close.yaml b/samples/outlook/25-item-save-and-close/close.yaml
index f0b8c091c..ffc78cc69 100644
--- a/samples/outlook/25-item-save-and-close/close.yaml
+++ b/samples/outlook/25-item-save-and-close/close.yaml
@@ -6,19 +6,18 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.3'
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
           
         function run() {
           Office.context.mailbox.item.close();
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to close the item in compose mode.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="run" class="ms-Button">
@@ -27,7 +26,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -39,15 +38,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/25-item-save-and-close/save.yaml b/samples/outlook/25-item-save-and-close/save.yaml
index 5493cfdf4..b6c26f24b 100644
--- a/samples/outlook/25-item-save-and-close/save.yaml
+++ b/samples/outlook/25-item-save-and-close/save.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.3'
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
           
         function run() {
           Office.context.mailbox.item.saveAsync(function (result) {
@@ -21,11 +21,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to save the item in compose mode.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="run" class="ms-Button">
@@ -34,7 +33,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -46,15 +45,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/30-recipients-and-attendees/get-all-attendees.yaml b/samples/outlook/30-recipients-and-attendees/get-all-attendees.yaml
index 98823ed82..1f967c9d6 100644
--- a/samples/outlook/30-recipients-and-attendees/get-all-attendees.yaml
+++ b/samples/outlook/30-recipients-and-attendees/get-all-attendees.yaml
@@ -7,7 +7,7 @@ api_set:
     Mailbox: '1.7'
 script:
     content: |-
-        $("#get-attendees").on("click", getAttendees);
+        document.getElementById("get-attendees").addEventListener("click", getAttendees);
 
         function getAttendees() {
           // This snippet gets an appointment's required and optional attendees and groups them by their response.
@@ -96,7 +96,6 @@ template:
             <p class="ms-font-m">This sample shows how to get all appointment attendees and organize them by their response.</p>
             <p><b>Required mode</b>: Appointment Organizer, Appointment Read</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-attendees" class="ms-Button">
@@ -117,15 +116,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/30-recipients-and-attendees/get-cc-message-read.yaml b/samples/outlook/30-recipients-and-attendees/get-cc-message-read.yaml
index 9a4ea06dd..a0982310c 100644
--- a/samples/outlook/30-recipients-and-attendees/get-cc-message-read.yaml
+++ b/samples/outlook/30-recipients-and-attendees/get-cc-message-read.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get-cc").on("click", getCc);
+    content: |-
+        document.getElementById("get-cc").addEventListener("click", getCc);
 
         function getCc() {
           const msgCc = Office.context.mailbox.item.cc;
@@ -23,7 +23,6 @@ template:
             <p class="ms-font-m">This sample shows how to get the <b>Cc</b> line recipients of the email.</p>
             <p><b>Required mode</b>: Message Read</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-cc" class="ms-Button">
@@ -44,15 +43,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/30-recipients-and-attendees/get-from-message-compose.yaml b/samples/outlook/30-recipients-and-attendees/get-from-message-compose.yaml
index accfe94c9..7e9748c8a 100644
--- a/samples/outlook/30-recipients-and-attendees/get-from-message-compose.yaml
+++ b/samples/outlook/30-recipients-and-attendees/get-from-message-compose.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.7'
 script:
-    content: |
-        $("#get-from").on("click", getFrom);
+    content: |-
+        document.getElementById("get-from").addEventListener("click", getFrom);
 
         function getFrom() {
           Office.context.mailbox.item.from.getAsync(function(asyncResult) {
@@ -21,12 +21,11 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p class="ms-font-m">This sample shows how to get who an email is <b>from</b>.</p>
             <p><b>Required mode</b>: Message Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-from" class="ms-Button">
@@ -47,15 +46,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/30-recipients-and-attendees/get-from-message-read.yaml b/samples/outlook/30-recipients-and-attendees/get-from-message-read.yaml
index b65ad8dda..ce60520d5 100644
--- a/samples/outlook/30-recipients-and-attendees/get-from-message-read.yaml
+++ b/samples/outlook/30-recipients-and-attendees/get-from-message-read.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get-from").on("click", getFrom);
+    content: |-
+        document.getElementById("get-from").addEventListener("click", getFrom);
 
         function getFrom() {
           const msgFrom = Office.context.mailbox.item.from;
@@ -21,7 +21,6 @@ template:
                 <b>from</b> property represents the delegator. <b>Tip</b>: Use <b>sender</b> to get the delegate.</p>
             <p><b>Required mode</b>: Message Read</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-from" class="ms-Button">
@@ -42,15 +41,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/30-recipients-and-attendees/get-optional-attendees-appointment-attendee.yaml b/samples/outlook/30-recipients-and-attendees/get-optional-attendees-appointment-attendee.yaml
index 0e969a6e9..5ce5b87d5 100644
--- a/samples/outlook/30-recipients-and-attendees/get-optional-attendees-appointment-attendee.yaml
+++ b/samples/outlook/30-recipients-and-attendees/get-optional-attendees-appointment-attendee.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get-optional-attendees").on("click", getOptionalAttendees);
+    content: |-
+        document.getElementById("get-optional-attendees").addEventListener("click", getOptionalAttendees);
 
         function getOptionalAttendees() {
           const apptOptionalAttendees = Office.context.mailbox.item.optionalAttendees;
@@ -29,7 +29,6 @@ template:
             <p class="ms-font-m">This sample shows how to get the <b>optional attendees</b>.</p>
             <p><b>Required mode</b>: Appointment Attendee</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-optional-attendees" class="ms-Button">
@@ -50,15 +49,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/30-recipients-and-attendees/get-organizer-appointment-attendee.yaml b/samples/outlook/30-recipients-and-attendees/get-organizer-appointment-attendee.yaml
index 079248e48..072d05ed5 100644
--- a/samples/outlook/30-recipients-and-attendees/get-organizer-appointment-attendee.yaml
+++ b/samples/outlook/30-recipients-and-attendees/get-organizer-appointment-attendee.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get-organizer").on("click", getOrganizer);
+    content: |-
+        document.getElementById("get-organizer").addEventListener("click", getOrganizer);
 
         function getOrganizer() {
           const apptOrganizer = Office.context.mailbox.item.organizer;
@@ -20,7 +20,6 @@ template:
             <p class="ms-font-m">This sample shows how to get the appointment <b>organizer</b>.</p>
             <p><b>Required mode</b>: Appointment Attendee</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-organizer" class="ms-Button">
@@ -41,15 +40,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/30-recipients-and-attendees/get-organizer-appointment-organizer.yaml b/samples/outlook/30-recipients-and-attendees/get-organizer-appointment-organizer.yaml
index 647c5e16a..9ddcf7cff 100644
--- a/samples/outlook/30-recipients-and-attendees/get-organizer-appointment-organizer.yaml
+++ b/samples/outlook/30-recipients-and-attendees/get-organizer-appointment-organizer.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.7'
 script:
-    content: |
-        $("#get-organizer").on("click", getOrganizer);
+    content: |-
+        document.getElementById("get-organizer").addEventListener("click", getOrganizer);
 
         function getOrganizer() {
           Office.context.mailbox.item.organizer.getAsync(function(asyncResult) {
@@ -26,7 +26,6 @@ template:
             <p class="ms-font-m">This sample shows how to get the appointment <b>organizer</b>.</p>
             <p><b>Required mode</b>: Appointment Organizer</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-organizer" class="ms-Button">
@@ -47,15 +46,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/30-recipients-and-attendees/get-required-attendees-appointment-attendee.yaml b/samples/outlook/30-recipients-and-attendees/get-required-attendees-appointment-attendee.yaml
index aa144d4cd..ae9a35cde 100644
--- a/samples/outlook/30-recipients-and-attendees/get-required-attendees-appointment-attendee.yaml
+++ b/samples/outlook/30-recipients-and-attendees/get-required-attendees-appointment-attendee.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get-required-attendees").on("click", getRequiredAttendees);
+    content: |-
+        document.getElementById("get-required-attendees").addEventListener("click", getRequiredAttendees);
 
         function getRequiredAttendees() {
           const apptRequiredAttendees = Office.context.mailbox.item.requiredAttendees;
@@ -29,7 +29,6 @@ template:
             <p class="ms-font-m">This sample shows how to get the <b>required attendees</b>.</p>
             <p><b>Required mode</b>: Appointment Attendee</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-required-attendees" class="ms-Button">
@@ -50,15 +49,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/30-recipients-and-attendees/get-sender-message-read.yaml b/samples/outlook/30-recipients-and-attendees/get-sender-message-read.yaml
index 699e365f4..6fa0dd908 100644
--- a/samples/outlook/30-recipients-and-attendees/get-sender-message-read.yaml
+++ b/samples/outlook/30-recipients-and-attendees/get-sender-message-read.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get-sender").on("click", getSender);
+    content: |-
+        document.getElementById("get-sender").addEventListener("click", getSender);
 
         function getSender() {
           const msgSender = Office.context.mailbox.item.sender;
@@ -20,7 +20,6 @@ template:
             <p class="ms-font-m">This sample shows how to get the email <b>sender</b>. In a delegate access scenario, the sender is the delegate. <b>Tip</b>: Use the <b>from</b> property to get the delegator.</p>
             <p><b>Required mode</b>: Message Read</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-sender" class="ms-Button">
@@ -41,15 +40,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml b/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml
index 6e12ea844..62ca0621e 100644
--- a/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml
+++ b/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml
@@ -6,9 +6,9 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get-bcc").on("click", getBcc);
-        $("#set-bcc").on("click", setBcc);
+    content: |-
+        document.getElementById("get-bcc").addEventListener("click", getBcc);
+        document.getElementById("set-bcc").addEventListener("click", setBcc);
 
         function getBcc() {
           Office.context.mailbox.item.bcc.getAsync(function(asyncResult) {
@@ -25,9 +25,7 @@ script:
         }
 
         function setBcc() {
-          const email = $("#emailBcc")
-            .val()
-            .toString();
+          const email = (document.getElementById("emailBcc") as HTMLInputElement).value;
           const emailArray = [email];
           Office.context.mailbox.item.bcc.setAsync(emailArray, function(asyncResult) {
             if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
@@ -44,7 +42,6 @@ template:
             <p class="ms-font-m">This sample shows how to get and set the <b>Bcc</b> line recipients of the email.</p>
             <p><b>Required mode</b>: Message Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <div class="ms-TextField">
@@ -72,15 +69,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml b/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml
index 6bd62eed1..04fdaf781 100644
--- a/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml
+++ b/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml
@@ -6,9 +6,9 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get-cc").on("click", getCc);
-        $("#set-cc").on("click", setCc);
+    content: |-
+        document.getElementById("get-cc").addEventListener("click", getCc);
+        document.getElementById("set-cc").addEventListener("click", setCc);
 
         function getCc() {
           Office.context.mailbox.item.cc.getAsync(function(asyncResult) {
@@ -25,9 +25,7 @@ script:
         }
 
         function setCc() {
-          const email = $("#emailCc")
-            .val()
-            .toString();
+          const email = (document.getElementById("emailCc") as HTMLInputElement).value;
           const emailArray = [email];
           Office.context.mailbox.item.cc.setAsync(emailArray, function(asyncResult) {
             if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
@@ -44,7 +42,6 @@ template:
             <p class="ms-font-m">This sample shows how to get and set the <b>Cc</b> line recipients of the email.</p>
             <p><b>Required mode</b>: Message Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <div class="ms-TextField">
@@ -72,15 +69,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml b/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml
index ff8c64b47..aa1180826 100644
--- a/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml
+++ b/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml
@@ -6,9 +6,9 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get-optional-attendees").on("click", getOptionalAttendees);
-        $("#set-optional-attendees").on("click", setOptionalAttendees);
+    content: |-
+        document.getElementById("get-optional-attendees").addEventListener("click", getOptionalAttendees);
+        document.getElementById("set-optional-attendees").addEventListener("click", setOptionalAttendees);
 
         function getOptionalAttendees() {
           Office.context.mailbox.item.optionalAttendees.getAsync(function(asyncResult) {
@@ -31,9 +31,7 @@ script:
         }
 
         function setOptionalAttendees() {
-          const email = $("#emailOptional")
-            .val()
-            .toString();
+          const email = (document.getElementById("emailOptional") as HTMLInputElement).value;
           const emailArray = [email];
           Office.context.mailbox.item.optionalAttendees.setAsync(emailArray, function(asyncResult) {
             if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
@@ -50,7 +48,6 @@ template:
             <p class="ms-font-m">This sample shows how to get and set the <b>optional attendees</b>.</p>
             <p><b>Required mode</b>: Appointment Organizer</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <div class="ms-TextField">
@@ -78,15 +75,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml b/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml
index bfc67f95f..cc3bf3fde 100644
--- a/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml
+++ b/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml
@@ -6,9 +6,9 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get-required-attendees").on("click", getRequiredAttendees);
-        $("#set-required-attendees").on("click", setRequiredAttendees);
+    content: |-
+        document.getElementById("get-required-attendees").addEventListener("click", getRequiredAttendees);
+        document.getElementById("set-required-attendees").addEventListener("click", setRequiredAttendees);
 
         function getRequiredAttendees() {
           Office.context.mailbox.item.requiredAttendees.getAsync(function(asyncResult) {
@@ -31,9 +31,7 @@ script:
         }
 
         function setRequiredAttendees() {
-          const email = $("#emailRequired")
-            .val()
-            .toString();
+          const email = (document.getElementById("emailRequired") as HTMLInputElement).value;
           const emailArray = [email];
           Office.context.mailbox.item.requiredAttendees.setAsync(emailArray, function(asyncResult) {
             if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
@@ -50,7 +48,6 @@ template:
             <p class="ms-font-m">This sample shows how to get and set the <b>required attendees</b>.</p>
             <p><b>Required mode</b>: Appointment Organizer</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <div class="ms-TextField">
@@ -78,15 +75,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml b/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml
index 5155be62d..39a3128ca 100644
--- a/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml
+++ b/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml
@@ -6,9 +6,9 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get-to").on("click", getTo);
-        $("#set-to").on("click", setTo);
+    content: |-
+        document.getElementById("get-to").addEventListener("click", getTo);
+        document.getElementById("set-to").addEventListener("click", setTo);
 
         function getTo() {
           Office.context.mailbox.item.to.getAsync(function(asyncResult) {
@@ -25,9 +25,7 @@ script:
         }
 
         function setTo() {
-          const email = $("#emailTo")
-            .val()
-            .toString();
+          const email = (document.getElementById("emailTo") as HTMLInputElement).value;
           const emailArray = [email];
           Office.context.mailbox.item.to.setAsync(emailArray, function(asyncResult) {
             if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
@@ -44,7 +42,6 @@ template:
             <p class="ms-font-m">This sample shows how to get and set the <b>To</b> line recipients of the email.</p>
             <p><b>Required mode</b>: Message Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <div class="ms-TextField">
@@ -72,15 +69,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/30-recipients-and-attendees/get-to-message-read.yaml b/samples/outlook/30-recipients-and-attendees/get-to-message-read.yaml
index 3713a6a14..cfa4204e8 100644
--- a/samples/outlook/30-recipients-and-attendees/get-to-message-read.yaml
+++ b/samples/outlook/30-recipients-and-attendees/get-to-message-read.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get-to").on("click", getTo);
+    content: |-
+        document.getElementById("get-to").addEventListener("click", getTo);
 
         function getTo() {
             const msgTo = Office.context.mailbox.item.to;
@@ -58,7 +58,6 @@ template:
             <p class="ms-font-m">This sample shows how to get the <b>To</b> line recipients of the email.</p>
             <p><b>Required mode</b>: Message Read</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-to" class="ms-Button">
@@ -79,15 +78,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/35-notifications/add-getall-remove.yaml b/samples/outlook/35-notifications/add-getall-remove.yaml
index c76c00564..a864ce4d1 100644
--- a/samples/outlook/35-notifications/add-getall-remove.yaml
+++ b/samples/outlook/35-notifications/add-getall-remove.yaml
@@ -1,23 +1,23 @@
 id: outlook-notifications-add-getall-remove
 name: Work with notification messages
-description: 'Adds different kinds of notification messages, gets all notifications, and replaces and removes an individual notification message.'
+description: Adds different kinds of notification messages, gets all notifications, and replaces and removes an individual notification message.
 host: OUTLOOK
 api_set:
     Mailbox: '1.10'
 script:
-    content: |
-        $("#addProgress").on("click", addProgress);
-        $("#addInformational").on("click", addInformational);
-        $("#addInformationalPersisted").on("click", addInformationalPersisted);
-        $("#addInsight").on("click", addInsight);
-        $("#addError").on("click", addError);
-        $("#getAll").on("click", getAll);
-        $("#replace").on("click", replace);
-        $("#remove").on("click", remove);
+    content: |-
+        document.getElementById("addProgress").addEventListener("click", addProgress);
+        document.getElementById("addInformational").addEventListener("click", addInformational);
+        document.getElementById("addInformationalPersisted").addEventListener("click", addInformationalPersisted);
+        document.getElementById("addInsight").addEventListener("click", addInsight);
+        document.getElementById("addError").addEventListener("click", addError);
+        document.getElementById("getAll").addEventListener("click", getAll);
+        document.getElementById("replace").addEventListener("click", replace);
+        document.getElementById("remove").addEventListener("click", remove);
           
         function addProgress() {
           // Adds a progress indicator to the mail item.
-          const id = $("#notificationId").val().toString();
+          const id = (document.getElementById("notificationId") as HTMLInputElement).value;
           const details =
             {
               type: Office.MailboxEnums.ItemNotificationMessageType.ProgressIndicator,
@@ -28,12 +28,12 @@ script:
 
         function addInformational() {
           // Adds an informational notification to the mail item.
-          const id = $("#notificationId").val().toString();
+          const id = (document.getElementById("notificationId") as HTMLInputElement).value;
           const details =
             {
               type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
               message: "Non-persistent informational notification message with id = " + id,
-              icon: "icon1",
+              icon: "PG.Icon.16",
               persistent: false
             };
           Office.context.mailbox.item.notificationMessages.addAsync(id, details, handleResult);
@@ -41,12 +41,12 @@ script:
 
         function addInformationalPersisted() {
           // Adds a persistent information notification to the mail item.
-          const id = $("#notificationId").val().toString();
+          const id = (document.getElementById("notificationId") as HTMLInputElement).value;
           const details =
             {
               type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
               message: "Persistent informational notification message with id = " + id,
-              icon: "icon1",
+              icon: "PG.Icon.16",
               persistent: true
             };
           Office.context.mailbox.item.notificationMessages.addAsync(id, details, handleResult);
@@ -54,13 +54,13 @@ script:
 
         function addInsight() {
           // Adds an informational message with actions to the mail item.
-          const id = $("#notificationId").val().toString();
+          const id = (document.getElementById("notificationId") as HTMLInputElement).value;
 
           const itemId = Office.context.mailbox.item.itemId;
           const details = {
             type: Office.MailboxEnums.ItemNotificationMessageType.InsightMessage,
             message: "This is an insight notification with id = " + id,
-            icon: "icon1",
+            icon: "PG.Icon.16",
             actions: [
               {
                 actionText: "Open insight",
@@ -77,7 +77,7 @@ script:
 
         function addError() {
           // Adds an error notification to the mail item.
-          const id = $("#notificationId").val().toString();
+          const id = (document.getElementById("notificationId") as HTMLInputElement).value;
           const details =
             {
               type: Office.MailboxEnums.ItemNotificationMessageType.ErrorMessage,
@@ -100,7 +100,7 @@ script:
 
         function replace() {
           // Replaces a notification message of a given key with another message.
-          const id = $("#notificationId").val().toString();
+          const id = (document.getElementById("notificationId") as HTMLInputElement).value;
           Office.context.mailbox.item.notificationMessages.replaceAsync(
             id,
             {
@@ -114,7 +114,7 @@ script:
 
         function remove() {
           // Removes a notification message from the current mail item.
-          const id = $("#notificationId").val().toString();
+          const id = (document.getElementById("notificationId") as HTMLInputElement).value;
           Office.context.mailbox.item.notificationMessages.removeAsync(id, handleResult);
         }
 
@@ -124,11 +124,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to add different kinds of notification messages, get all, replace, and remove an individual notification message.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h2>Try it out</h2>
           <div class="ms-TextField">
@@ -191,15 +190,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/40-attachments/attachments-compose.yaml b/samples/outlook/40-attachments/attachments-compose.yaml
index bd327161d..6d26d5131 100644
--- a/samples/outlook/40-attachments/attachments-compose.yaml
+++ b/samples/outlook/40-attachments/attachments-compose.yaml
@@ -1,20 +1,18 @@
 id: outlook-attachments-attachments-compose
 name: Manipulate attachments (Item Compose)
-description: 'Adds, gets, and removes attachments from a message or an appointment in Compose mode.'
+description: Adds, gets, and removes attachments from a message or an appointment in Compose mode.
 host: OUTLOOK
 api_set:
-    Mailbox: '1.1'
+    Mailbox: '1.8'
 script:
-    content: |
-        $("#add").on("click", add);
-        $("#addBase64").on("click", addBase64);
-        $("#get").on("click", get);
-        $("#remove").on("click", remove);
+    content: |-
+        document.getElementById("add").addEventListener("click", add);
+        document.getElementById("addBase64").addEventListener("click", addBase64);
+        document.getElementById("get").addEventListener("click", get);
+        document.getElementById("remove").addEventListener("click", remove);
 
         function add() {
-          const attachmentUrl = $("#attachmentUrl")
-            .val()
-            .toString();
+          const attachmentUrl = (document.getElementById("attachmentUrl") as HTMLInputElement).value;
           Office.context.mailbox.item.addFileAttachmentAsync(
             attachmentUrl,
             getFileName(attachmentUrl),
@@ -85,9 +83,7 @@ script:
 
         function remove() {
           Office.context.mailbox.item.removeAttachmentAsync(
-            $("#attachmentId")
-              .val()
-              .toString(),
+            (document.getElementById("attachmentId") as HTMLInputElement).value,
             (result) => {
               if (result.status === Office.AsyncResultStatus.Failed) {
                 console.error(result.error.message);
@@ -113,7 +109,6 @@ template:
             <p>This sample shows how to add, get, and remove attachments from a message or an appointment in Compose mode.</p>
             <p><b>Required mode</b>: Item Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <hr>
@@ -145,7 +140,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -157,15 +152,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/40-attachments/get-attachment-content.yaml b/samples/outlook/40-attachments/get-attachment-content.yaml
index fa30b735c..b4c3f5fde 100644
--- a/samples/outlook/40-attachments/get-attachment-content.yaml
+++ b/samples/outlook/40-attachments/get-attachment-content.yaml
@@ -5,19 +5,13 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.8'
 script:
-    content: |
-        $("#attachment-content-compose").on("click", getAttachmentContentCompose);
-        $("#attachment-content-read").on("click", getAttachmentContentRead);
-
-        const item = Office.context.mailbox.item;
+    content: |-
+        document.getElementById("attachment-content-compose").addEventListener("click", getAttachmentContentCompose);
+        document.getElementById("attachment-content-read").addEventListener("click", getAttachmentContentRead);
 
         function getAttachmentContentCompose() {
-          // Gets the attachments of the current message or appointment in compose mode.
-          const options = { asyncContext: { currentItem: item } };
-          // The getAttachmentsAsync call can only be used in compose mode.
-          item.getAttachmentsAsync(options, callback);
-
-          function callback(result) {
+          // Gets the attachments of the current message or appointment in compose mode. The getAttachmentsAsync call can only be used in compose mode.
+          Office.context.mailbox.item.getAttachmentsAsync((result) => {
             if (result.status === Office.AsyncResultStatus.Failed) {
               console.log(result.error.message);
               return;
@@ -30,14 +24,14 @@ script:
 
             for (let i = 0; i < result.value.length; i++) {
               // Log the attachment type and its contents to the console.
-              result.asyncContext.currentItem.getAttachmentContentAsync(result.value[i].id, handleAttachmentsCallback);
+              Office.context.mailbox.item.getAttachmentContentAsync(result.value[i].id, handleAttachmentsCallback);
             }
-          }
+          });
         }
 
         function getAttachmentContentRead() {
-          // Gets the attachments of the current message or appointment in read mode.
-          // The item.attachments call can only be used in read mode.
+          // Gets the attachments of the current message or appointment in read mode. The item.attachments call can only be used in read mode.
+          const item = Office.context.mailbox.item;
           const attachments = item.attachments;
           if (attachments.length <= 0) {
             console.log("Mail item has no attachments.");
@@ -82,7 +76,6 @@ template:
             <p>This sample gets the attachment content from a message or an appointment in read or compose mode.</p>
             <p><b>Required mode</b>: Compose or Read</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="attachment-content-compose" class="ms-Button">
@@ -106,15 +99,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/40-attachments/get-attachments-read.yaml b/samples/outlook/40-attachments/get-attachments-read.yaml
index ce46b045d..1177cb2b2 100644
--- a/samples/outlook/40-attachments/get-attachments-read.yaml
+++ b/samples/outlook/40-attachments/get-attachments-read.yaml
@@ -5,21 +5,32 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
 
         function run() {
-          const attachments = Office.context.mailbox.item.attachments;
-          console.log(attachments);
+            const item = Office.context.mailbox.item;
+
+            if (item.attachments.length > 0) {
+                for (let i = 0; i < item.attachments.length; i++) {
+                    const attachment = item.attachments[i];
+                    console.log(`${i+1}. Name: ${attachment.name}`);
+                    console.log(`ID: ${attachment.id}`);
+                    console.log(`Type: ${attachment.attachmentType}`);
+                    console.log(`Inline content: ${attachment.isInline}`);
+                    console.log(`Size: ${attachment.size}`);
+                }
+            } else {
+                console.log("This mail item doesn't contain any attachments.");
+            }
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to get the attachments of a message or an appointment in Read mode.</p>
           <p><b>Required mode</b>: Item Read</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="run" class="ms-Button">
@@ -28,7 +39,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -40,15 +51,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/45-categories/work-with-categories.yaml b/samples/outlook/45-categories/work-with-categories.yaml
index 1627d760b..c547ef97a 100644
--- a/samples/outlook/45-categories/work-with-categories.yaml
+++ b/samples/outlook/45-categories/work-with-categories.yaml
@@ -1,15 +1,15 @@
 order: 1
 id: outlook-categories-work-with-categories
 name: Work with item categories
-description: 'Gets, adds, and removes categories assigned to the item.'
+description: Gets, adds, and removes categories assigned to the item.
 host: OUTLOOK
 api_set:
     Mailbox: '1.8'
 script:
-    content: |
-        $("#get-categories").on("click", getCategories);
-        $("#add-categories").on("click", addCategories);
-        $("#remove-categories").on("click", removeCategories);
+    content: |-
+        document.getElementById("get-categories").addEventListener("click", getCategories);
+        document.getElementById("add-categories").addEventListener("click", addCategories);
+        document.getElementById("remove-categories").addEventListener("click", removeCategories);
 
         function getCategories() {
           Office.context.mailbox.item.categories.getAsync(function(asyncResult) {
@@ -81,7 +81,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p class="ms-font-m">This sample shows how to get, add, and remove <b>categories</b> assigned to the item.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="add-categories" class="ms-Button">
@@ -108,15 +107,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/45-categories/work-with-master-categories.yaml b/samples/outlook/45-categories/work-with-master-categories.yaml
index 7cc730cfe..2e83b3645 100644
--- a/samples/outlook/45-categories/work-with-master-categories.yaml
+++ b/samples/outlook/45-categories/work-with-master-categories.yaml
@@ -1,15 +1,15 @@
 order: 2
 id: outlook-categories-work-with-master-categories
 name: Work with the categories master list
-description: 'Gets, adds, and removes categories in the master list for the mailbox.'
+description: Gets, adds, and removes categories in the master list for the mailbox.
 host: OUTLOOK
 api_set:
     Mailbox: '1.8'
 script:
-    content: |
-        $("#get-master-categories").on("click", getMasterCategories);
-        $("#add-master-categories").on("click", addMasterCategories);
-        $("#remove-master-categories").on("click", removeMasterCategories);
+    content: |-
+        document.getElementById("get-master-categories").addEventListener("click", getMasterCategories);
+        document.getElementById("add-master-categories").addEventListener("click", addMasterCategories);
+        document.getElementById("remove-master-categories").addEventListener("click", removeMasterCategories);
 
         function getMasterCategories() {
           Office.context.mailbox.masterCategories.getAsync(function(asyncResult) {
@@ -61,7 +61,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p class="ms-font-m">This sample shows how to get, add, and remove <b>master categories</b> on the mailbox.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="add-master-categories" class="ms-Button">
@@ -88,15 +87,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/50-recurrence/get-recurrence-read.yaml b/samples/outlook/50-recurrence/get-recurrence-read.yaml
index 592a0e7e4..0d37bbe0a 100644
--- a/samples/outlook/50-recurrence/get-recurrence-read.yaml
+++ b/samples/outlook/50-recurrence/get-recurrence-read.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.7'
 script:
-    content: |
-        $("#get").on("click", get);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
 
         function get() {
           const recurrence = Office.context.mailbox.item.recurrence;
@@ -27,7 +27,6 @@ template:
             <p class="ms-font-m">This sample shows how to get the item's recurrence pattern, if any.</p>
             <p><b>Required modes</b>: Appointment Attendee, Message Read</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get" class="ms-Button">
@@ -48,15 +47,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/50-recurrence/get-series-id.yaml b/samples/outlook/50-recurrence/get-series-id.yaml
index de482c80a..e78ac2628 100644
--- a/samples/outlook/50-recurrence/get-series-id.yaml
+++ b/samples/outlook/50-recurrence/get-series-id.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.7'
 script:
-    content: |
-        $("#get-series-id").on("click", getSeriesId);
+    content: |-
+        document.getElementById("get-series-id").addEventListener("click", getSeriesId);
 
         function getSeriesId() {
           const seriesId = Office.context.mailbox.item.seriesId;
@@ -26,7 +26,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p class="ms-font-m">This sample shows how to get the item's <b>series ID</b>, if any.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-series-id" class="ms-Button">
@@ -47,15 +46,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/50-recurrence/get-set-recurrence-appointment-organizer.yaml b/samples/outlook/50-recurrence/get-set-recurrence-appointment-organizer.yaml
index c710d26bd..d9eb6f01a 100644
--- a/samples/outlook/50-recurrence/get-set-recurrence-appointment-organizer.yaml
+++ b/samples/outlook/50-recurrence/get-set-recurrence-appointment-organizer.yaml
@@ -6,9 +6,9 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.7'
 script:
-    content: |
-        $("#get").on("click", get);
-        $("#set").on("click", set);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
+        document.getElementById("set").addEventListener("click", set);
 
         function get() {
           Office.context.mailbox.item.recurrence.getAsync(function(asyncResult) {
@@ -66,7 +66,6 @@ template:
             <p class="ms-font-m">This sample shows how to get and set the item's recurrence pattern, if any.</p>
             <p><b>Required mode</b>: Appointment Organizer</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get" class="ms-Button">
@@ -92,15 +91,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/55-display-items/display-existing-appointment.yaml b/samples/outlook/55-display-items/display-existing-appointment.yaml
index 676d08577..aaa259233 100644
--- a/samples/outlook/55-display-items/display-existing-appointment.yaml
+++ b/samples/outlook/55-display-items/display-existing-appointment.yaml
@@ -6,20 +6,20 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.9'
 script:
-    content: |
+    content: |-
         // Pre-populate with current item ID.
-        $("#itemId").val(Office.context.mailbox.item.itemId);
+        (document.getElementById("itemId") as HTMLInputElement).value = Office.context.mailbox.item.itemId;
 
-        $("#run").on("click", run);
-        $("#run-async").on("click", runAsync);
+        document.getElementById("run").addEventListener("click", run);
+        document.getElementById("run-async").addEventListener("click", runAsync);
 
         function run() {
-          const itemId = $("#itemId").val();
+          const itemId = (document.getElementById("itemId") as HTMLInputElement).value;
           Office.context.mailbox.displayAppointmentForm(itemId);
         }
 
         function runAsync() {
-          const itemId = $("#itemId").val();
+          const itemId = (document.getElementById("itemId") as HTMLInputElement).value;
 
           // The async version will return error 9049 if the item is not found.
           // The async version is only available starting with requirement set 1.9.
@@ -29,11 +29,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to display an existing appointment in a separate window.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <div class="ms-TextField">
@@ -49,7 +48,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -61,15 +60,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-      office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-      office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-      core-js@2.4.1/client/core.min.js
-      @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-      jquery@3.1.1
-      @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/55-display-items/display-existing-message.yaml b/samples/outlook/55-display-items/display-existing-message.yaml
index 78837a042..4509b080b 100644
--- a/samples/outlook/55-display-items/display-existing-message.yaml
+++ b/samples/outlook/55-display-items/display-existing-message.yaml
@@ -6,20 +6,20 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.9'
 script:
-    content: |
+    content: |-
         // Pre-populate with current item ID.
-        $("#itemId").val(Office.context.mailbox.item.itemId);
+        (document.getElementById("itemId") as HTMLInputElement).value = Office.context.mailbox.item.itemId;
 
-        $("#run").on("click", run);
-        $("#run-async").on("click", runAsync);
+        document.getElementById("run").addEventListener("click", run);
+        document.getElementById("run-async").addEventListener("click", runAsync);
 
         function run() {
-          const itemId = $("#itemId").val();
+          const itemId = (document.getElementById("itemId") as HTMLInputElement).value;
           Office.context.mailbox.displayMessageForm(itemId);
         }
 
         function runAsync() {
-         const itemId = $("#itemId").val();
+         const itemId = (document.getElementById("itemId") as HTMLInputElement).value;
 
          // The async version will return error 9049 if the item is not found.
          // The async version is only available starting with requirement set 1.9.
@@ -29,11 +29,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to display an existing message in a separate window.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <div class="ms-TextField">
@@ -46,10 +45,10 @@ template:
           <button id="run-async" class="ms-Button">
             <div class="ms-Button-label">Display message form (async)</div>
           </button>
-        </section>  
+        </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -61,15 +60,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-      office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-      office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-      core-js@2.4.1/client/core.min.js
-      @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-      jquery@3.1.1
-      @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/55-display-items/display-new-appointment.yaml b/samples/outlook/55-display-items/display-new-appointment.yaml
index 122a64606..f562ea6c9 100644
--- a/samples/outlook/55-display-items/display-new-appointment.yaml
+++ b/samples/outlook/55-display-items/display-new-appointment.yaml
@@ -6,9 +6,9 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.9'
 script:
-    content: |
-        $("#run").on("click", run);
-        $("#run-async").on("click", runAsync);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
+        document.getElementById("run-async").addEventListener("click", runAsync);
 
         function run() {
           const start = new Date();
@@ -57,7 +57,6 @@ template:
             <p>This sample shows how to display a new appointment and populate attendees, location, body, and a few other
                 properties.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="run" class="ms-Button">
@@ -69,7 +68,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -81,15 +80,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/55-display-items/display-new-message.yaml b/samples/outlook/55-display-items/display-new-message.yaml
index 3cc7c4a23..0302dc756 100644
--- a/samples/outlook/55-display-items/display-new-message.yaml
+++ b/samples/outlook/55-display-items/display-new-message.yaml
@@ -1,14 +1,14 @@
 order: 1
 id: outlook-display-items-display-new-message
 name: Create a new message
-description: 'Opens a new message form with a sample content, recipients, and an inline image attachment'
+description: Opens a new message form with a sample content, recipients, and an inline image attachment
 host: OUTLOOK
 api_set:
     Mailbox: '1.9'
 script:
-    content: |
-        $("#run").on("click", run);
-        $("#run-async").on("click", runAsync);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
+        document.getElementById("run-async").addEventListener("click", runAsync);
 
         function run() {
           Office.context.mailbox.displayNewMessageForm({
@@ -52,11 +52,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to display a new message, populate recipients, subject, and body, and add an inline image attachment.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="run" class="ms-Button">
@@ -68,7 +67,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -80,15 +79,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/55-display-items/display-reply-forms.yaml b/samples/outlook/55-display-items/display-reply-forms.yaml
index e3ab6a78a..3759106b0 100644
--- a/samples/outlook/55-display-items/display-reply-forms.yaml
+++ b/samples/outlook/55-display-items/display-reply-forms.yaml
@@ -6,11 +6,11 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.9'
 script:
-    content: |
-        $("#display-reply-form").on("click", displayReplyForm);
-        $("#display-reply-form-async").on("click", displayReplyFormAsync);
-        $("#display-reply-all-form").on("click", displayReplyAllForm);
-        $("#display-reply-all-form-async").on("click", displayReplyAllFormAsync);
+    content: |-
+        document.getElementById("display-reply-form").addEventListener("click", displayReplyForm);
+        document.getElementById("display-reply-form-async").addEventListener("click", displayReplyFormAsync);
+        document.getElementById("display-reply-all-form").addEventListener("click", displayReplyAllForm);
+        document.getElementById("display-reply-all-form-async").addEventListener("click", displayReplyAllFormAsync);
 
         // The async version is only available starting with requirement set 1.9.
         function displayReplyForm() {
@@ -42,7 +42,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to create reply or reply-all messages and populate the body of the reply.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="display-reply-form" class="ms-Button">
@@ -61,7 +60,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -73,15 +72,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/55-display-items/display-reply-with-attachments.yaml b/samples/outlook/55-display-items/display-reply-with-attachments.yaml
index c0e1636b1..bb2dbd573 100644
--- a/samples/outlook/55-display-items/display-reply-with-attachments.yaml
+++ b/samples/outlook/55-display-items/display-reply-with-attachments.yaml
@@ -1,46 +1,167 @@
 order: 6
 id: outlook-display-items-display-reply-with-attachments
 name: Create a reply with attachments
-description: Opens a reply message forms and adds sample attachments.
+description: Opens a reply or reply-all message form and adds sample attachments.
 host: OUTLOOK
 api_set:
     Mailbox: '1.9'
 script:
-    content: |
-        $("#run").on("click", run);
-        $("#run-async").on("click", runAsync);
+    content: |-
+        document.getElementById("reply").addEventListener("click", reply);
+        document.getElementById("reply-async").addEventListener("click", replyAsync);
+        document.getElementById("reply-all").addEventListener("click", replyAll);
+        document.getElementById("reply-all-async").addEventListener("click", replyAllAsync);
+
+        function reply() {
+          // Define attachments.
+          const base64Attachment = {
+            base64file:
+              "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",
+            inLine: true,
+            name: "script_lab.png",
+            type: Office.MailboxEnums.AttachmentType.Base64
+          };
+          const fileAttachment = {
+            inLine: true,
+            name: "dog.jpg",
+            type: Office.MailboxEnums.AttachmentType.File,
+            url: "https://i.imgur.com/9S36xvA.jpg"
+          };
+          const itemAttachment = {
+            itemId: Office.context.mailbox.item.itemId,
+            name: "test_email.msg",
+            type: Office.MailboxEnums.AttachmentType.Item
+          };
 
-        function run() {
+          // Create the reply with attachments.
           Office.context.mailbox.item.displayReplyForm({
-            htmlBody: "This is a reply with an inline image and an item attachment.<br><img src='/service/cid:dog.jpg'>",
-            attachments: [
-              { type: "file", url: "https://i.imgur.com/9S36xvA.jpg", name: "dog.jpg", inLine: true },
-              { type: "item", itemId: Office.context.mailbox.item.itemId, name: "test_email.msg" }
-            ],
+            htmlBody:
+              "This is a reply with an inline Base64-encoded attachment, an inline image, and an item attachment.<br><img src='/service/cid:script_lab.png'><br><img src='/service/cid:dog.jpg'>",
+            attachments: [base64Attachment, fileAttachment, itemAttachment],
             callback: (result) => {
               if (result.status === Office.AsyncResultStatus.Failed) {
                 console.error(`Action failed with message ${result.error.message}`);
                 return;
               }
 
-              console.log("Created reply with attachments.");
+              console.log("Created a reply with attachments.");
             }
           });
         }
 
-        function runAsync() {
-          // The async version is only available starting with requirement set 1.9.
+        function replyAll() {
+          // Define attachments.
+          const base64Attachment = {
+            base64file:
+              "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",
+            inLine: true,
+            name: "script_lab.png",
+            type: Office.MailboxEnums.AttachmentType.Base64
+          };
+          const fileAttachment = {
+            inLine: true,
+            name: "dog.jpg",
+            type: Office.MailboxEnums.AttachmentType.File,
+            url: "https://i.imgur.com/9S36xvA.jpg"
+          };
+          const itemAttachment = {
+            itemId: Office.context.mailbox.item.itemId,
+            name: "test_email.msg",
+            type: Office.MailboxEnums.AttachmentType.Item
+          };
+
+          // Create the reply with attachments.
+          Office.context.mailbox.item.displayReplyAllForm({
+            htmlBody:
+              "This is a reply with an inline Base64-encoded attachment, an inline image, and an item attachment.<br><img src='/service/cid:script_lab.png'><br><img src='/service/cid:dog.jpg'>",
+            attachments: [base64Attachment, fileAttachment, itemAttachment],
+            callback: (result) => {
+              if (result.status === Office.AsyncResultStatus.Failed) {
+                console.error(`Action failed with message ${result.error.message}`);
+                return;
+              }
+
+              console.log("Created a reply-all form with attachments.");
+            }
+          });
+        }
+
+        function replyAsync() {
+          // Define attachments.
+          const base64Attachment = {
+            base64file:
+              "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",
+            inLine: true,
+            name: "script_lab.png",
+            type: Office.MailboxEnums.AttachmentType.Base64
+          };
+          const fileAttachment = {
+            inLine: true,
+            name: "dog.jpg",
+            type: Office.MailboxEnums.AttachmentType.File,
+            url: "https://i.imgur.com/9S36xvA.jpg"
+          };
+          const itemAttachment = {
+            itemId: Office.context.mailbox.item.itemId,
+            name: "test_email.msg",
+            type: Office.MailboxEnums.AttachmentType.Item
+          };
+
+          // The async version was introduced in requirement set 1.9.
           // It provides a callback when the new appointment form has been created.
           Office.context.mailbox.item.displayReplyFormAsync(
             {
-              htmlBody: "This is a reply with an inline image and an item attachment.<br><img src='/service/cid:dog.jpg'>",
-              attachments: [
-                { type: "file", url: "http://i.imgur.com/9S36xvA.jpg", name: "dog.jpg", inLine: true },
-                { type: "item", itemId: Office.context.mailbox.item.itemId, name: "test_email.msg" }
-              ]
+              htmlBody:
+                "This is a reply with an inline Base64-encoded attachment, an inline image, and an item attachment.<br><img src='/service/cid:script_lab.png'><br><img src='/service/cid:dog.jpg'>",
+              attachments: [base64Attachment, fileAttachment, itemAttachment]
             },
             (asyncResult) => {
-              console.log(JSON.stringify(asyncResult));
+              if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+                console.error(`Action failed with message ${asyncResult.error.message}`);
+                return;
+              }
+
+              console.log("Created reply with attachments.");
+            }
+          );
+        }
+
+        function replyAllAsync() {
+          // Define attachments.
+          const base64Attachment = {
+            base64file:
+              "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",
+            inLine: true,
+            name: "script_lab.png",
+            type: Office.MailboxEnums.AttachmentType.Base64
+          };
+          const fileAttachment = {
+            inLine: true,
+            name: "dog.jpg",
+            type: Office.MailboxEnums.AttachmentType.File,
+            url: "https://i.imgur.com/9S36xvA.jpg"
+          };
+          const itemAttachment = {
+            itemId: Office.context.mailbox.item.itemId,
+            name: "test_email.msg",
+            type: Office.MailboxEnums.AttachmentType.Item
+          };
+
+          // The async version was introduced in requirement set 1.9.
+          // It provides a callback when the new appointment form has been created.
+          Office.context.mailbox.item.displayReplyAllFormAsync(
+            {
+              htmlBody:
+                "This is a reply with an inline Base64-encoded attachment, an inline image, and an item attachment.<br><img src='/service/cid:script_lab.png'><br><img src='/service/cid:dog.jpg'>",
+              attachments: [base64Attachment, fileAttachment, itemAttachment]
+            },
+            (asyncResult) => {
+              if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+                console.error(`Action failed with message ${asyncResult.error.message}`);
+                return;
+              }
+
+              console.log("Created a reply-all form with attachments.");
             }
           );
         }
@@ -49,16 +170,22 @@ template:
     content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to create a reply message and add an inline image attachment and an item attachment.</p>
+            <p><b>Required mode</b>: Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
-            <button id="run" class="ms-Button">
-                <span class="ms-Button-label">Create a reply</span>
+            <button id="reply" class="ms-Button">
+              <span class="ms-Button-label">Create a reply</span>
+            </button>
+            <button id="reply-async" class="ms-Button">
+              <span class="ms-Button-label">Create a reply (async)</span>
+            </button>
+            <button id="reply-all" class="ms-Button">
+              <span class="ms-Button-label">Create a reply-all form</span>
+            </button>
+            <button id="reply-all-async" class="ms-Button">
+              <span class="ms-Button-label">Create a reply-all form (async)</span>
             </button>
-            <button id="run-async" class="ms-Button">
-                        <span class="ms-Button-label">Create a reply (async)</span>
-                </button>
         </section>
     language: html
 style:
@@ -74,15 +201,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/60-sensitivity-label/sensitivity-label.yaml b/samples/outlook/60-sensitivity-label/sensitivity-label.yaml
index 93d0c8d6e..6bda2298e 100644
--- a/samples/outlook/60-sensitivity-label/sensitivity-label.yaml
+++ b/samples/outlook/60-sensitivity-label/sensitivity-label.yaml
@@ -6,9 +6,9 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.13'
 script:
-    content: |
-        $("#get-sensitivity-label").on("click", getCurrentSensitivityLabel);
-        $("#set-sensitivity-label").on("click", setSensitivityLabel);
+    content: |-
+        document.getElementById("get-sensitivity-label").addEventListener("click", getCurrentSensitivityLabel);
+        document.getElementById("set-sensitivity-label").addEventListener("click", setSensitivityLabel);
 
         function getCurrentSensitivityLabel() {
           // This snippet gets the current mail item's sensitivity label.
@@ -63,7 +63,6 @@ template:
             <p class="ms-font-m">This sample shows how to get and set the sensitivity label on a message or appointment being composed. To learn more about the sensitivity label API, see <a href="https://learn.microsoft.com/office/dev/add-ins/outlook/sensitivity-label" target="_blank">Manage the sensitivity label of your message or appointment in compose mode</a>.</p>
             <p><b>Required mode</b>: Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-sensitivity-label" class="ms-Button">
@@ -87,15 +86,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/60-sensitivity-label/sensitivity-labels-catalog.yaml b/samples/outlook/60-sensitivity-label/sensitivity-labels-catalog.yaml
index 6784a4f01..4467e3f77 100644
--- a/samples/outlook/60-sensitivity-label/sensitivity-labels-catalog.yaml
+++ b/samples/outlook/60-sensitivity-label/sensitivity-labels-catalog.yaml
@@ -6,9 +6,9 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.13'
 script:
-    content: |
-        $("#get-sensitivity-labels-enabled").on("click", getSensitivityLabelsCatalogIsEnabled);
-        $("#get-sensitivity-labels-catalog").on("click", getSensitivityLabelsCatalog);
+    content: |-
+        document.getElementById("get-sensitivity-labels-enabled").addEventListener("click", getSensitivityLabelsCatalogIsEnabled);
+        document.getElementById("get-sensitivity-labels-catalog").addEventListener("click", getSensitivityLabelsCatalog);
 
         function getSensitivityLabelsCatalogIsEnabled() {
           // This snippet determines if the sensitivity labels catalog is enabled on the current mailbox.
@@ -46,7 +46,6 @@ template:
             <p class="ms-font-m">This sample shows how to determine if sensitivity labels are enabled on the mailbox and retrieves all available labels from the catalog. To learn more about the sensitivity label API, see <a href="https://learn.microsoft.com/office/dev/add-ins/outlook/sensitivity-label" target="_blank">Manage the sensitivity label of your message or appointment in compose mode</a>.</p>
              <p><b>Required mode</b>: Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-sensitivity-labels-enabled" class="ms-Button">
@@ -70,15 +69,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/65-delegates-and-shared-folders/get-shared-properties.yaml b/samples/outlook/65-delegates-and-shared-folders/get-shared-properties.yaml
index af2859ac3..2a937c32d 100644
--- a/samples/outlook/65-delegates-and-shared-folders/get-shared-properties.yaml
+++ b/samples/outlook/65-delegates-and-shared-folders/get-shared-properties.yaml
@@ -3,10 +3,10 @@ name: Identify a shared folder or shared mailbox context
 description: Identifies whether the current mail item is in a shared folder or shared mailbox by getting its properties.
 host: OUTLOOK
 api_set:
-    Mailbox: '1.8'
+    Mailbox: '1.13'
 script:
-    content: |
-        $("#get").on("click", get);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
 
         function get() {
           Office.context.mailbox.item.getSharedPropertiesAsync((result) => {
@@ -32,7 +32,6 @@ template:
                     href="https://learn.microsoft.com/office/dev/add-ins/outlook/delegate-access#message-compose-mode"
                     target="_blank">Implement shared folders and shared mailbox scenarios in an Outlook add-in</a>.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out on a message or appointment from a shared folder or shared mailbox.</h3>
             <button id="get" class="ms-Button">
@@ -41,7 +40,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -53,15 +52,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/70-mime-headers/get-internet-headers-message-read.yaml b/samples/outlook/70-mime-headers/get-internet-headers-message-read.yaml
index d68f00e9b..efdf1f74d 100644
--- a/samples/outlook/70-mime-headers/get-internet-headers-message-read.yaml
+++ b/samples/outlook/70-mime-headers/get-internet-headers-message-read.yaml
@@ -5,8 +5,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.8'
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
 
         function run() {
           Office.context.mailbox.item.getAllInternetHeadersAsync(function (asyncResult) {
@@ -61,15 +61,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml b/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml
index 03acb511b..78c540b7a 100644
--- a/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml
+++ b/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml
@@ -1,14 +1,14 @@
 id: outlook-mime-headers-manage-custom-internet-headers-message-compose
 name: Work with custom internet headers
-description: 'Sets, gets, and removes custom internet headers on a message in Compose mode.'
+description: Sets, gets, and removes custom internet headers on a message in Compose mode.
 host: OUTLOOK
 api_set:
     Mailbox: '1.8'
 script:
-    content: |
-        $("#set-custom-headers").on("click", setCustomHeaders);
-        $("#get-selected-custom-headers").on("click", getSelectedCustomHeaders);
-        $("#remove-selected-custom-headers").on("click", removeSelectedCustomHeaders);
+    content: |-
+        document.getElementById("set-custom-headers").addEventListener("click", setCustomHeaders);
+        document.getElementById("get-selected-custom-headers").addEventListener("click", getSelectedCustomHeaders);
+        document.getElementById("remove-selected-custom-headers").addEventListener("click", removeSelectedCustomHeaders);
 
         // Set custom internet headers.
         function setCustomHeaders() {
@@ -92,15 +92,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/75-regex-matches/contextual.yaml b/samples/outlook/75-regex-matches/contextual.yaml
index 468f2361c..c601055e2 100644
--- a/samples/outlook/75-regex-matches/contextual.yaml
+++ b/samples/outlook/75-regex-matches/contextual.yaml
@@ -1,14 +1,14 @@
 id: outlook-regex-matches-contextual
-name: 'Get regex matches (Item Read, contextual)'
+name: Get regex matches (Item Read, contextual)
 description: Gets regex matches when the add-in is opened as a contextual add-in.
 host: OUTLOOK
 api_set:
     Mailbox: '1.6'
 script:
-    content: |
-        $("#getRegExMatches").on("click", getRegExMatches);
-        $("#getRegExMatchesByName").on("click", getRegExMatchesByName);
-        $("#getSelectedRegExMatches").on("click", getSelectedRegExMatches);
+    content: |-
+        document.getElementById("getRegExMatches").addEventListener("click", getRegExMatches);
+        document.getElementById("getRegExMatchesByName").addEventListener("click", getRegExMatchesByName);
+        document.getElementById("getSelectedRegExMatches").addEventListener("click", getSelectedRegExMatches);
 
         function getRegExMatches() {
             // This API only works when you click on the highlighted word "ScriptLab".
@@ -50,7 +50,6 @@ template:
                     for Microsoft 365</a>.</p>
             <p><b>Required mode</b>: Item Read, contextual add-in</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <p><b>Tip</b>: Try this out as a <a target="_blank"
                     href="https://learn.microsoft.com/outlook/add-ins/contextual-outlook-add-ins">contextual add-in</a>.</p>
@@ -66,7 +65,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -78,15 +77,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/80-events/drag-drop-item.yaml b/samples/outlook/80-events/drag-drop-item.yaml
new file mode 100644
index 000000000..8496c37ad
--- /dev/null
+++ b/samples/outlook/80-events/drag-drop-item.yaml
@@ -0,0 +1,72 @@
+id: outlook-events-drag-drop-item
+name: Drag and drop an item into the task pane
+description: Handles the drag-and-drop event when a user drags and drops messages and file attachments into the add-in task pane.
+host: OUTLOOK
+api_set:
+    Mailbox: '1.5'
+script:
+    content: |
+        Office.onReady(() => {
+            dragAndDropEventHandler(event);
+        });
+
+        function dragAndDropEventHandler(event) {
+            Office.context.mailbox.addHandlerAsync(Office.EventType.DragAndDropEvent, (event) => {
+            console.log(`Event type: ${event.type}`);
+
+            const eventData = event.dragAndDropEventData;
+            console.log(`x-coordinate: ${eventData.pageX}, y-coordinate: ${eventData.pageY}`);
+
+            if (eventData.type == "drop") {
+              console.log("Items dropped into task pane.");
+              const files = eventData.dataTransfer.files;
+              files.forEach((file) => {
+                const content = file.fileContent;
+                const name = file.name;
+                const fileType = file.type;
+                console.log(`File name: ${name}`);
+                console.log(`File type: ${fileType}`);
+                console.log(`Contents: ${content.text().then((text) => { console.log(text); })}`);
+              });
+            }
+          });
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            <p class="ms-font-m">Drag and drop messages and file attachments into the add-in task pane.</p>
+            <p>To learn more about the drag-and-drop feature, see <a
+                    href="https://learn.microsoft.com/office/dev/add-ins/outlook/drag-drop-items">Drag and drop messages and
+                    attachments into the task pane of an Outlook add-in</a>.</p>
+            <p><b>Required mode</b>: Compose or Read</p>
+          <p><b>Supported Outlook clients</b>: Outlook on the web and the new Outlook on Windows</p>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <ol>
+                <li>Drag a message or file attachment from your mailbox to the task pane. As you drag the item across the task pane, the event name and the coordinates of your mouse pointer are displayed in the console.</li> 
+                <li>Drop the message or file attachment into the task pane. The properties
+                of the dropped item are displayed in the console.</li>
+            </ol>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-attendee.yaml b/samples/outlook/85-tokens-for-exchange-on-premises/get-icaluid-as-attendee.yaml
similarity index 80%
rename from samples/outlook/85-tokens-and-service-calls/get-icaluid-as-attendee.yaml
rename to samples/outlook/85-tokens-for-exchange-on-premises/get-icaluid-as-attendee.yaml
index 29844b3c0..e8c65bb22 100644
--- a/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-attendee.yaml
+++ b/samples/outlook/85-tokens-for-exchange-on-premises/get-icaluid-as-attendee.yaml
@@ -1,13 +1,13 @@
 order: 9
 id: outlook-tokens-and-service-calls-get-icaluid-as-attendee
-name: Get an appointment's iCalUId as an attendee
-description: Uses Exchange Web Services (EWS) to get an appointment's iCalUId value where the user is an attendee.
+name: Get an appointment's iCalUId as an attendee (Exchange on-premises only)
+description: Uses Exchange Web Services (EWS) in an Exchange on-premises environment to get an appointment's iCalUId value where the user is an attendee.
 host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
 
         function run() {
           const ewsId = Office.context.mailbox.item.itemId;
@@ -42,7 +42,7 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
           <p>This sample uses Exchange Web Services (EWS) to get an appointment's iCalUId value if the user is an attendee.</p>
           <p><b>Important</b>: Exchange user identity and callback tokens are only supported in Exchange on-premises environments.
@@ -50,7 +50,6 @@ template:
             to get an access token. Then, use <a href="https://learn.microsoft.com/graph/use-the-api" target="_blank">Microsoft Graph</a> to get the iCalUId property.
           </p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="run" class="ms-Button">
@@ -59,7 +58,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -71,15 +70,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-organizer.yaml b/samples/outlook/85-tokens-for-exchange-on-premises/get-icaluid-as-organizer.yaml
similarity index 81%
rename from samples/outlook/85-tokens-and-service-calls/get-icaluid-as-organizer.yaml
rename to samples/outlook/85-tokens-for-exchange-on-premises/get-icaluid-as-organizer.yaml
index fa894d07a..2ac46bca0 100644
--- a/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-organizer.yaml
+++ b/samples/outlook/85-tokens-for-exchange-on-premises/get-icaluid-as-organizer.yaml
@@ -1,13 +1,13 @@
 order: 8
 id: outlook-tokens-and-service-calls-get-icaluid-as-organizer
-name: Get an appointment's iCalUId as the organizer
-description: Uses Exchange Web Services (EWS) to get an appointment's iCalUId value where the user is the organizer.
+name: Get an appointment's iCalUId as the organizer (Exchange on-premises only)
+description: Uses Exchange Web Services (EWS) in an Exchange on-premises environment to get an appointment's iCalUId value where the user is the organizer.
 host: OUTLOOK
 api_set:
     Mailbox: '1.3'
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
 
         function run() {
           Office.context.mailbox.item.saveAsync((result) => {
@@ -49,7 +49,7 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
           <p>This sample uses Exchange Web Services (EWS) to get an appointment's iCalUId value if the user is the organizer.</p>
           <p><b>Important</b>: Exchange user identity and callback tokens are only supported in Exchange on-premises environments.
@@ -57,7 +57,6 @@ template:
             to get an access token. Then, use <a href="https://learn.microsoft.com/graph/use-the-api" target="_blank">Microsoft Graph</a> to get the iCalUId property.
           </p>
         </section>
-
         <button id="run" class="ms-Button">
             <span class="ms-Button-label">Get iCalUId property</span>
         </button>
@@ -75,15 +74,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml b/samples/outlook/85-tokens-for-exchange-on-premises/ids-and-urls.yaml
similarity index 75%
rename from samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml
rename to samples/outlook/85-tokens-for-exchange-on-premises/ids-and-urls.yaml
index 3554d5389..d87c66aff 100644
--- a/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml
+++ b/samples/outlook/85-tokens-for-exchange-on-premises/ids-and-urls.yaml
@@ -1,13 +1,13 @@
 order: 1
 id: outlook-tokens-and-service-calls-ids-and-urls
-name: Endpoint URLs and item IDs
-description: 'Retrieves and displays the Exchange Web Services (EWS) endpoint URL and item IDs, and converts item IDs for different protocols.'
+name: Endpoint URLs and item IDs in Exchange on-premises environments
+description: Retrieves the Exchange Web Services (EWS) endpoint URL and item IDs and converts item IDs for different protocols.
 host: OUTLOOK
 api_set:
     Mailbox: '1.5'
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
           
         function run() {
             // Get the EWS URL and EWS item ID.
@@ -25,7 +25,7 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to retrieve the EWS endpoint URL and item IDs, and convert item IDs for different protocols.</p>
           <p><b>Important</b>: Exchange user identity and callback tokens are only supported in Exchange on-premises environments.
@@ -33,7 +33,6 @@ template:
             to get an access token.
           </p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="run" class="ms-Button">
@@ -42,7 +41,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -54,15 +53,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/85-tokens-and-service-calls/make-ews-request-async.yaml b/samples/outlook/85-tokens-for-exchange-on-premises/make-ews-request-async.yaml
similarity index 77%
rename from samples/outlook/85-tokens-and-service-calls/make-ews-request-async.yaml
rename to samples/outlook/85-tokens-for-exchange-on-premises/make-ews-request-async.yaml
index c884b2be9..b56e7e86d 100644
--- a/samples/outlook/85-tokens-and-service-calls/make-ews-request-async.yaml
+++ b/samples/outlook/85-tokens-for-exchange-on-premises/make-ews-request-async.yaml
@@ -1,13 +1,13 @@
 order: 6
 id: outlook-tokens-and-service-calls-make-ews-request-async
-name: Get a message using Exchange Web Services (EWS)
-description: Gets a message using EWS without any back-end code.
+name: Get a message using Exchange Web Services (EWS) in Exchange on-premises environments
+description: Uses EWS in an Exchange on-premises environment to get a message without any backend code.
 host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
           
         function run() {
             const ewsId = Office.context.mailbox.item.itemId;
@@ -31,15 +31,14 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
-          <p>This sample shows how to get a message using EWS, without any back-end code.</p>
+          <p>This sample shows how to get a message using EWS, without any backend code.</p>
           <p><b>Important</b>: This API is only supported in Exchange on-premises environments.
             In Exchange Online environments, use <a href="https://learn.microsoft.com/office/dev/add-ins/develop/enable-nested-app-authentication-in-your-add-in" target="_blank">nested app authentication (NAA)</a>
             to get an access token. Then, use <a href="https://learn.microsoft.com/graph/use-the-api" target="_blank">Microsoft Graph</a> to get the message.
           </p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="run" class="ms-Button">
@@ -48,7 +47,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -60,15 +59,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/85-tokens-and-service-calls/send-message-using-make-ews-request-async.yaml b/samples/outlook/85-tokens-for-exchange-on-premises/send-message-using-make-ews-request-async.yaml
similarity index 81%
rename from samples/outlook/85-tokens-and-service-calls/send-message-using-make-ews-request-async.yaml
rename to samples/outlook/85-tokens-for-exchange-on-premises/send-message-using-make-ews-request-async.yaml
index 7c8d56692..a9d4582cf 100644
--- a/samples/outlook/85-tokens-and-service-calls/send-message-using-make-ews-request-async.yaml
+++ b/samples/outlook/85-tokens-for-exchange-on-premises/send-message-using-make-ews-request-async.yaml
@@ -1,13 +1,13 @@
 order: 7
 id: outlook-tokens-and-service-calls-send-message-using-make-ews-request-async
-name: Send a message using Exchange Web Services (EWS)
-description: Sends a message using EWS without any back-end code.
+name: Send a message using Exchange Web Services (EWS) in Exchange on-premises environments
+description: Uses EWS in an Exchange on-premises environment to send a message without any backend code.
 host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
           
         function run() {
             const request = '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:m="http://schemas.microsoft.com/exchange/services/2006/messages" xmlns:t="http://schemas.microsoft.com/exchange/services/2006/types" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">'+
@@ -34,7 +34,7 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to send a message using EWS, without any back-end code.</p>
           <p><b>Important</b>: This API is only supported in Exchange on-premises environments.
@@ -42,7 +42,6 @@ template:
             to get an access token. Then, use <a href="https://learn.microsoft.com/graph/use-the-api" target="_blank">Microsoft Graph</a> to send the message.
           </p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="run" class="ms-Button">
@@ -51,7 +50,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -63,15 +62,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/85-tokens-and-service-calls/user-callback-token.yaml b/samples/outlook/85-tokens-for-exchange-on-premises/user-callback-token.yaml
similarity index 74%
rename from samples/outlook/85-tokens-and-service-calls/user-callback-token.yaml
rename to samples/outlook/85-tokens-for-exchange-on-premises/user-callback-token.yaml
index c629df0d8..c60954ab4 100644
--- a/samples/outlook/85-tokens-and-service-calls/user-callback-token.yaml
+++ b/samples/outlook/85-tokens-for-exchange-on-premises/user-callback-token.yaml
@@ -1,13 +1,13 @@
 order: 4
 id: outlook-tokens-and-service-calls-user-callback-token
-name: Get a callback token
-description: Gets a callback token to call Outlook services from an add-in's backend service.
+name: Get a callback token in Exchange on-premises environments
+description: Gets a callback token to call Outlook services from an add-in's backend service in an Exchange on-premises environment.
 host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
 
         function run() {
             Office.context.mailbox.getCallbackTokenAsync((result) => {
@@ -21,7 +21,7 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to get a callback token to call Outlook services from an add-in's backend service.</p>
           <p><b>Important</b>: Exchange user identity and callback tokens are only supported in Exchange on-premises environments.
@@ -30,7 +30,6 @@ template:
             to get an access token instead.
           </p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="run" class="ms-Button">
@@ -39,7 +38,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -51,15 +50,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/85-tokens-and-service-calls/user-identity-token.yaml b/samples/outlook/85-tokens-for-exchange-on-premises/user-identity-token.yaml
similarity index 71%
rename from samples/outlook/85-tokens-and-service-calls/user-identity-token.yaml
rename to samples/outlook/85-tokens-for-exchange-on-premises/user-identity-token.yaml
index 5ee1cc96d..35efaf934 100644
--- a/samples/outlook/85-tokens-and-service-calls/user-identity-token.yaml
+++ b/samples/outlook/85-tokens-for-exchange-on-premises/user-identity-token.yaml
@@ -1,13 +1,13 @@
 order: 3
 id: outlook-tokens-and-service-calls-user-identity-token
-name: Get a user identity token
-description: Gets a user identity token to use for authentication flows in an Exchange on-premises environment.
+name: Get a user identity token in Exchange on-premises environments
+description: Gets a user identity token for authentication flows in an Exchange on-premises environment.
 host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
           
         function run() {
             Office.context.mailbox.getUserIdentityTokenAsync((result) => {
@@ -21,7 +21,7 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to get a user identity token to use in authentication flows.</p>
           <p><b>Important</b>: This API is only supported in Exchange on-premises environments.
@@ -29,7 +29,6 @@ template:
             to get an access token.
           </p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <button id="run" class="ms-Button">
@@ -38,7 +37,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -50,15 +49,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/delay-message-delivery.yaml b/samples/outlook/90-other-item-apis/delay-message-delivery.yaml
index fb2d9add5..016265921 100644
--- a/samples/outlook/90-other-item-apis/delay-message-delivery.yaml
+++ b/samples/outlook/90-other-item-apis/delay-message-delivery.yaml
@@ -6,13 +6,13 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.13'
 script:
-    content: |
-        $("#get-date").on("click", getDeliveryDate);
-        $("#set-time-five-minutes").on("click", () => computeDelay("set-time-five-minutes"));
-        $("#set-time-fifteen-minutes").on("click", () => computeDelay("set-time-fifteen-minutes"));
-        $("#set-time-thirty-minutes").on("click", () => computeDelay("set-time-thirty-minutes"));
-        $("#set-time-sixty-minutes").on("click", () => computeDelay("set-time-sixty-minutes"));
-        $("#set-time-one-day").on("click", () => computeDelay("set-time-one-day"));
+    content: |-
+        document.getElementById("get-date").addEventListener("click", getDeliveryDate);
+        document.getElementById("set-time-five-minutes").addEventListener("click", () => computeDelay("set-time-five-minutes"));
+        document.getElementById("set-time-fifteen-minutes").addEventListener("click", () => computeDelay("set-time-fifteen-minutes"));
+        document.getElementById("set-time-thirty-minutes").addEventListener("click", () => computeDelay("set-time-thirty-minutes"));
+        document.getElementById("set-time-sixty-minutes").addEventListener("click", () => computeDelay("set-time-sixty-minutes"));
+        document.getElementById("set-time-one-day").addEventListener("click", () => computeDelay("set-time-one-day"));
 
         let totalDelay = 0;
 
@@ -69,7 +69,6 @@ template:
             <p class="ms-font-m">This sample gets and sets the delivery date and time of a message in compose mode. To learn more about this API, see <a href="https://learn.microsoft.com/office/dev/add-ins/outlook/delay-delivery" target="_blank">Manage the delivery date and time of a message</a>.</p>
             <p><b>Required mode</b>: Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <div class="ms-TextField">
@@ -108,15 +107,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml b/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml
index 224dde397..6366043dc 100644
--- a/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml
+++ b/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml
@@ -1,15 +1,15 @@
 order: 13
 id: outlook-other-item-apis-get-add-remove-enhancedlocation-appointment
 name: Manage the locations of an appointment
-description: 'Gets, adds, and removes locations on an appointment (enhancedLocation API).'
+description: Gets, adds, and removes locations on an appointment (enhancedLocation API).
 host: OUTLOOK
 api_set:
     Mailbox: '1.8'
 script:
-    content: |
-        $("#get").on("click", get);
-        $("#add").on("click", add);
-        $("#remove").on("click", remove);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
+        document.getElementById("add").addEventListener("click", add);
+        document.getElementById("remove").addEventListener("click", remove);
 
         function get() {
           Office.context.mailbox.item.enhancedLocation.getAsync((result) => {
@@ -106,15 +106,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/90-other-item-apis/get-conversation-id-message.yaml b/samples/outlook/90-other-item-apis/get-conversation-id-message.yaml
index fe09e4a7e..b95c68138 100644
--- a/samples/outlook/90-other-item-apis/get-conversation-id-message.yaml
+++ b/samples/outlook/90-other-item-apis/get-conversation-id-message.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
 
         function get() {
           console.log(`Conversation ID: ${Office.context.mailbox.item.conversationId}`);
@@ -39,15 +39,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-conversation-index.yaml b/samples/outlook/90-other-item-apis/get-conversation-index.yaml
index dfde09e69..9966ed3f1 100644
--- a/samples/outlook/90-other-item-apis/get-conversation-index.yaml
+++ b/samples/outlook/90-other-item-apis/get-conversation-index.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.14'
 script:
-    content: |
-        $("#get-conversation-index").click(getConversationIndex);
+    content: |-
+        document.getElementById("get-conversation-index").addEventListener("click", getConversationIndex);
 
         function getConversationIndex() {
           // This snippet returns the Base64-encoded position of the current message in a conversation thread (PR_CONVERSATION_INDEX).
@@ -33,7 +33,6 @@ template:
             <p class="ms-font-m">This sample shows how to get the Base64-encoded position of the current message in a conversation thread.</p>
             <p><b>Required mode</b>: Message Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-conversation-index" class="ms-Button">
@@ -54,15 +53,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-date-time-created-read.yaml b/samples/outlook/90-other-item-apis/get-date-time-created-read.yaml
index f9737ec77..172ec5713 100644
--- a/samples/outlook/90-other-item-apis/get-date-time-created-read.yaml
+++ b/samples/outlook/90-other-item-apis/get-date-time-created-read.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
 
         function get() {
           console.log(`Creation date and time: ${Office.context.mailbox.item.dateTimeCreated}`);
@@ -39,15 +39,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-date-time-modified-read.yaml b/samples/outlook/90-other-item-apis/get-date-time-modified-read.yaml
index 8f57ec3d9..0ec907837 100644
--- a/samples/outlook/90-other-item-apis/get-date-time-modified-read.yaml
+++ b/samples/outlook/90-other-item-apis/get-date-time-modified-read.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
 
         function get() {
           console.log(`Date and time item last modified: ${Office.context.mailbox.item.dateTimeModified}`);
@@ -39,15 +39,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-diagnostic-information.yaml b/samples/outlook/90-other-item-apis/get-diagnostic-information.yaml
index df218e563..0d9622fa0 100644
--- a/samples/outlook/90-other-item-apis/get-diagnostic-information.yaml
+++ b/samples/outlook/90-other-item-apis/get-diagnostic-information.yaml
@@ -7,7 +7,7 @@ api_set:
     Mailbox: '1.1'
 script:
     content: |-
-        $("#get-diagnostics").on("click", getDiagnostics);
+        document.getElementById("get-diagnostics").addEventListener("click", getDiagnostics);
 
         function getDiagnostics() {
           // This function gets a mailbox's diagnostic information, such as Outlook client and version, and logs it to the console.
@@ -40,7 +40,6 @@ template:
             <p class="ms-font-m">This sample shows how to get a mailbox's diagnostic information.</p>
             <p><b>Required mode</b>: Compose, Read</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-diagnostics" class="ms-Button">
@@ -61,15 +60,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-eml-format.yaml b/samples/outlook/90-other-item-apis/get-eml-format.yaml
index bbc644545..03c7207ed 100644
--- a/samples/outlook/90-other-item-apis/get-eml-format.yaml
+++ b/samples/outlook/90-other-item-apis/get-eml-format.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.14'
 script:
-    content: |
-        $("#get-eml-format").on("click", getEmlFormat);
+    content: |-
+        document.getElementById("get-eml-format").addEventListener("click", getEmlFormat);
 
         function getEmlFormat() {
           Office.context.mailbox.item.getAsFileAsync((asyncResult) => {
@@ -26,7 +26,6 @@ template:
             <p class="ms-font-m">This sample shows how to get the Base64-encoded EML format of a message in read mode.</p>
             <p><b>Required mode</b>: Message Read</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-eml-format" class="ms-Button">
@@ -47,15 +46,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-end-read.yaml b/samples/outlook/90-other-item-apis/get-end-read.yaml
index 5ecf03fad..2a94acc22 100644
--- a/samples/outlook/90-other-item-apis/get-end-read.yaml
+++ b/samples/outlook/90-other-item-apis/get-end-read.yaml
@@ -6,11 +6,19 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
+    content: |-
+        document.getElementById("get-utc").addEventListener("click", getUtc);
+        document.getElementById("get-local").addEventListener("click", getLocal);
+
+        function getUtc() {
+            const time = Office.context.mailbox.item.end;
+            console.log(`Appointment ends (UTC): ${time.toUTCString()}`);
+        }
 
-        function get() {
-          console.log(`Appointment ends: ${Office.context.mailbox.item.end}`);
+        function getLocal() {
+            const time = Office.context.mailbox.item.end;
+            const localTime = Office.context.mailbox.convertToLocalClientTime(time);
+            console.log(`Appointment ends (local): ${localTime.month + 1}/${localTime.date}/${localTime.year}, ${localTime.hours}:${localTime.minutes}:${localTime.seconds}`);
         }
     language: typescript
 template:
@@ -22,8 +30,11 @@ template:
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get" class="ms-Button">
-              <div class="ms-Button-label">Get end date and time</div>
-          </button>
+              <div class="ms-Button-label">Get end date and time (UTC)</div>
+            </button>
+            <button id="get-local" class="ms-Button">
+              <div class="ms-Button-label">Get end date and time (local)</div>
+            </button>
         </section>
     language: html
 style:
@@ -39,15 +50,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-in-reply-to.yaml b/samples/outlook/90-other-item-apis/get-in-reply-to.yaml
index 0aa9c286f..70f961e5e 100644
--- a/samples/outlook/90-other-item-apis/get-in-reply-to.yaml
+++ b/samples/outlook/90-other-item-apis/get-in-reply-to.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.14'
 script:
-    content: |
-        $("#get-in-reply-to").click(getInReplyTo);
+    content: |-
+        document.getElementById("get-in-reply-to").addEventListener("click", getInReplyTo);
 
         function getInReplyTo() {
           // This snippet gets the ID of the message being replied to by the current message (PR_IN_REPLY_TO_ID).
@@ -26,7 +26,6 @@ template:
             <p class="ms-font-m">This sample shows how to get the ID of the message being replied to by the current message.</p>
             <p><b>Required mode</b>: Message Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-in-reply-to" class="ms-Button">
@@ -47,15 +46,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-internet-message-id-read.yaml b/samples/outlook/90-other-item-apis/get-internet-message-id-read.yaml
index 9ac5c60c4..aa5c12ad2 100644
--- a/samples/outlook/90-other-item-apis/get-internet-message-id-read.yaml
+++ b/samples/outlook/90-other-item-apis/get-internet-message-id-read.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
 
         function get() {
           console.log(`Internet message ID: ${Office.context.mailbox.item.internetMessageId}`);
@@ -39,15 +39,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-item-class-async.yaml b/samples/outlook/90-other-item-apis/get-item-class-async.yaml
index 6eaa618e9..a812e22ca 100644
--- a/samples/outlook/90-other-item-apis/get-item-class-async.yaml
+++ b/samples/outlook/90-other-item-apis/get-item-class-async.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.14'
 script:
-    content: |
-        $("#get-item-class-async").click(getItemClassAsync);
+    content: |-
+        document.getElementById("get-item-class-async").addEventListener("click", getItemClassAsync);
 
         function getItemClassAsync() {
           // This snippet returns the Exchange Web Services item class property (PR_MESSAGE_CLASS) of the current message.
@@ -28,7 +28,6 @@ template:
             <p class="ms-font-m">This sample shows how to get the Exchange Web Services (EWS) item class of the current message being composed.</p>
             <p><b>Required mode</b>: Message Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-item-class-async" class="ms-Button">
@@ -49,15 +48,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-item-class-read.yaml b/samples/outlook/90-other-item-apis/get-item-class-read.yaml
index 3ffb5f9d2..fb319fb09 100644
--- a/samples/outlook/90-other-item-apis/get-item-class-read.yaml
+++ b/samples/outlook/90-other-item-apis/get-item-class-read.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
 
         function get() {
           console.log(`Item class: ${Office.context.mailbox.item.itemClass}`);
@@ -39,15 +39,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-item-type.yaml b/samples/outlook/90-other-item-apis/get-item-type.yaml
index 2908d7964..93713bd74 100644
--- a/samples/outlook/90-other-item-apis/get-item-type.yaml
+++ b/samples/outlook/90-other-item-apis/get-item-type.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
 
         function get() {
             const itemType = Office.context.mailbox.item.itemType;
@@ -46,15 +46,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-loaded-message-properties.yaml b/samples/outlook/90-other-item-apis/get-loaded-message-properties.yaml
new file mode 100644
index 000000000..eaf183cf9
--- /dev/null
+++ b/samples/outlook/90-other-item-apis/get-loaded-message-properties.yaml
@@ -0,0 +1,148 @@
+order: 31
+id: outlook-other-item-apis-get-loaded-message-properties
+name: Get properties of a loaded message (Message Compose, Message Read)
+description: Gets the properties of the currently loaded message.
+host: OUTLOOK
+api_set:
+    Mailbox: '1.15'
+script:
+    content: |-
+        let list;
+
+        Office.onReady((info) => {
+          if (info.host === Office.HostType.Outlook) {
+            list = document.getElementById("selected-items");
+
+            // Register an event handler to identify when messages are selected.
+            Office.context.mailbox.addHandlerAsync(Office.EventType.SelectedItemsChanged, run, (asyncResult) => {
+              if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+                console.log(asyncResult.error.message);
+                return;
+              }
+
+              console.log("Event handler added.");
+            });
+
+            run();
+          }
+        });
+
+        function run() {
+          // Clear the list of previously selected messages, if any.
+          clearList(list);
+
+          // Get the subject line and sender's email address of each selected message and log them to a list in the task pane.
+          Office.context.mailbox.getSelectedItemsAsync((asyncResult) => {
+            if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+              console.log(asyncResult.error.message);
+              return;
+            }
+
+            const selectedItems = asyncResult.value;
+
+            getItemInfo(selectedItems);
+          });
+        }
+
+        // Gets the subject line and sender's email address of each selected message.
+        async function getItemInfo(selectedItems) {
+          for (const item of selectedItems) {
+            addToList(item.subject);
+            await getSenderEmailAddress(item);
+          }
+        }
+
+        // Gets the sender's email address of each selected message.
+        async function getSenderEmailAddress(item) {
+          const itemId = item.itemId;
+          await new Promise((resolve) => {
+            Office.context.mailbox.loadItemByIdAsync(itemId, (result) => {
+              if (result.status === Office.AsyncResultStatus.Failed) {
+                console.log(result.error.message);
+                return;
+              }
+
+              const loadedItem = result.value;
+              const sender = loadedItem.from.emailAddress;
+              appendToListItem(sender);
+
+              // Unload the current message before processing another selected message.
+              loadedItem.unloadAsync((asyncResult) => {
+                if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+                  console.log(asyncResult.error.message);
+                  return;
+                }
+
+                resolve();
+              });
+            });
+          });
+        }
+
+        // Clears the list in the task pane.
+        function clearList(list) {
+          while (list.firstChild) {
+            list.removeChild(list.firstChild);
+          }
+        }
+
+        // Adds an item to a list in the task pane.
+        function addToList(item) {
+          const listItem = document.createElement("li");
+          listItem.textContent = item;
+          list.appendChild(listItem);
+        }
+
+        // Appends data to the last item of the list in the task pane.
+        function appendToListItem(data) {
+          const listItem = list.lastChild;
+          listItem.textContent += ` (${data})`;
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            <p>This sample shows how to get the properties of the currently loaded message.</p>
+            <p><b>Required mode</b>: Message Compose, Message Read</p>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <ol>
+                <li>
+                    <p>Turn on the Reading Pane in Outlook. For guidance, see <a
+                            href="https://support.microsoft.com/office/2fd687ed-7fc4-4ae3-8eab-9f9b8c6d53f0" target="_blank">Use
+                            and configure the Reading Pane to preview messages</a>.</p>
+                </li>
+                <li>
+                    <p>Select a message from your mailbox. To select multiple messages, hold <kbd>Ctrl</kbd> (Windows) while
+                        selecting each message. You can select a maximum of 100 messages at a time.</p>
+                </li>
+            </ol>
+            <p>The subject and email address of the sender are automatically logged to the "Selected messages" section of the
+                task pane.</p>
+            <p>To learn more about the item multi-select feature, see <a
+                    href="https://learn.microsoft.com/office/dev/add-ins/outlook/item-multi-select" target="_blank">Activate
+                    your Outlook add-in on multiple messages</a>.</p>
+            <h3>Selected messages</h3>
+            <ul id="selected-items"></ul>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/90-other-item-apis/get-location-read.yaml b/samples/outlook/90-other-item-apis/get-location-read.yaml
index 527a6c6a1..e476e5644 100644
--- a/samples/outlook/90-other-item-apis/get-location-read.yaml
+++ b/samples/outlook/90-other-item-apis/get-location-read.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
 
         function get() {
           console.log(`Appointment location: ${Office.context.mailbox.item.location}`);
@@ -39,15 +39,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-message-properties.yaml b/samples/outlook/90-other-item-apis/get-message-properties.yaml
index 823aef4f9..bae101012 100644
--- a/samples/outlook/90-other-item-apis/get-message-properties.yaml
+++ b/samples/outlook/90-other-item-apis/get-message-properties.yaml
@@ -1,12 +1,12 @@
 order: 23
 id: outlook-other-item-apis-get-message-properties
-name: 'Get properties of selected messages (Message Compose, Message Read)'
+name: Get properties of selected messages (Message Compose, Message Read)
 description: Gets the properties of multiple selected messages.
 host: OUTLOOK
 api_set:
     Mailbox: '1.14'
 script:
-    content: |
+    content: |-
         Office.onReady(() => {
           // Registers an event handler to identify when messages are selected.
           Office.context.mailbox.addHandlerAsync(Office.EventType.SelectedItemsChanged, getMessageProperties, (asyncResult) => {
@@ -49,7 +49,7 @@ template:
             <h3>Try it out</h3>
             <ol>
                 <li><p>Turn on the Reading Pane in Outlook. For guidance, see <a href="https://support.microsoft.com/office/2fd687ed-7fc4-4ae3-8eab-9f9b8c6d53f0" target="_blank">Use and configure the Reading Pane to preview messages</a>.</p></li>
-                <li><p>Hold <b>Ctrl</b> (Windows) or <b>Command</b> (Mac) while selecting multiple messages from your mailbox. You can select a maximum of 100 messages at a time.</p></li>
+                <li><p>Hold <kbd>Ctrl</kbd> (Windows) or <kbd>Cmd</kbd> (Mac) while selecting multiple messages from your mailbox. You can select a maximum of 100 messages at a time.</p></li>
             </ol>
             <p>The properties of the selected messages are automatically logged to the console.</p>
             <p>To learn more about the item multi-select feature, see <a href="https://learn.microsoft.com/office/dev/add-ins/outlook/item-multi-select" target="_blank">Activate your Outlook add-in on multiple messages</a>.</p>
@@ -68,15 +68,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/90-other-item-apis/get-normalized-subject-read.yaml b/samples/outlook/90-other-item-apis/get-normalized-subject-read.yaml
index ae9463b04..cb2e43aa0 100644
--- a/samples/outlook/90-other-item-apis/get-normalized-subject-read.yaml
+++ b/samples/outlook/90-other-item-apis/get-normalized-subject-read.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
 
         function get() {
           console.log(`Normalized subject: ${Office.context.mailbox.item.normalizedSubject}`);
@@ -39,15 +39,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-set-end-appointment-organizer.yaml b/samples/outlook/90-other-item-apis/get-set-end-appointment-organizer.yaml
index 7f6406320..3b63f5e14 100644
--- a/samples/outlook/90-other-item-apis/get-set-end-appointment-organizer.yaml
+++ b/samples/outlook/90-other-item-apis/get-set-end-appointment-organizer.yaml
@@ -6,17 +6,33 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
-        $("#set").on("click", set);
+    content: |-
+        document.getElementById("get-utc").addEventListener("click", getUtc);
+        document.getElementById("get-local").addEventListener("click", getLocal);
+        document.getElementById("set").addEventListener("click", set);
 
-        function get() {
+        function getUtc() {
           Office.context.mailbox.item.end.getAsync((result) => {
             if (result.status !== Office.AsyncResultStatus.Succeeded) {
               console.error(`Action failed with message ${result.error.message}`);
               return;
             }
-            console.log(`Appointment ends: ${result.value}`);
+
+            const time = result.value;
+            console.log(`Appointment ends (UTC): ${time.toUTCString()}`);
+          });
+        }
+
+        function getLocal() {
+          Office.context.mailbox.item.end.getAsync((result) => {
+            if (result.status !== Office.AsyncResultStatus.Succeeded) {
+              console.error(`Action failed with message ${result.error.message}`);
+              return;
+            }
+
+            const time = result.value;
+            const localTime = Office.context.mailbox.convertToLocalClientTime(time);
+            console.log(`Appointment ends (local): ${localTime.month + 1}/${localTime.date}/${localTime.year}, ${localTime.hours}:${localTime.minutes}:${localTime.seconds}`);
           });
         }
 
@@ -50,9 +66,12 @@ template:
             <button id="set" class="ms-Button">
               <div class="ms-Button-label">Set end date and time</div>
             </button>
-            <button id="get" class="ms-Button">
-            <div class="ms-Button-label">Get end date and time</div>
-          </button>
+            <button id="get-utc" class="ms-Button">
+              <div class="ms-Button-label">Get end date and time (UTC)</div>
+            </button>
+            <button id="get-local" class="ms-Button">
+              <div class="ms-Button-label">Get end date and time (local)</div>
+            </button>
         </section>
     language: html
 style:
@@ -68,15 +87,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/90-other-item-apis/get-set-location-appointment-organizer.yaml b/samples/outlook/90-other-item-apis/get-set-location-appointment-organizer.yaml
index a1bb80b59..0602dd47c 100644
--- a/samples/outlook/90-other-item-apis/get-set-location-appointment-organizer.yaml
+++ b/samples/outlook/90-other-item-apis/get-set-location-appointment-organizer.yaml
@@ -6,9 +6,9 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
-        $("#set").on("click", set);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
+        document.getElementById("set").addEventListener("click", set);
 
         function get() {
           Office.context.mailbox.item.location.getAsync((result) => {
@@ -60,15 +60,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-set-sensitivity-level.yaml b/samples/outlook/90-other-item-apis/get-set-sensitivity-level.yaml
index 5599e3f12..532504b1a 100644
--- a/samples/outlook/90-other-item-apis/get-set-sensitivity-level.yaml
+++ b/samples/outlook/90-other-item-apis/get-set-sensitivity-level.yaml
@@ -6,9 +6,9 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.14'
 script:
-    content: |
-        $("#getSensitivity").on("click", getSensitivity);
-        $("#setSensitivityPrivate").on("click", setSensitivityPrivate);
+    content: |-
+        document.getElementById("getSensitivity").addEventListener("click", getSensitivity);
+        document.getElementById("setSensitivityPrivate").addEventListener("click", setSensitivityPrivate);
 
         function getSensitivity() {
             Office.context.mailbox.item.sensitivity.getAsync(function(asyncResult) {
@@ -42,7 +42,6 @@ template:
                 </p>
             </p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <button id="getSensitivity" class="ms-Button">
             <div class="ms-Button-label">Get sensitivity level</div>
@@ -65,15 +64,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-set-start-appointment-organizer.yaml b/samples/outlook/90-other-item-apis/get-set-start-appointment-organizer.yaml
index 67c349a94..b956d94e0 100644
--- a/samples/outlook/90-other-item-apis/get-set-start-appointment-organizer.yaml
+++ b/samples/outlook/90-other-item-apis/get-set-start-appointment-organizer.yaml
@@ -6,17 +6,33 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
-        $("#set").on("click", set);
+    content: |-
+        document.getElementById("get-utc").addEventListener("click", getUtc);
+        document.getElementById("get-local").addEventListener("click", getLocal);
+        document.getElementById("set").addEventListener("click", set);
 
-        function get() {
+        function getUtc() {
           Office.context.mailbox.item.start.getAsync((result) => {
             if (result.status !== Office.AsyncResultStatus.Succeeded) {
               console.error(`Action failed with message ${result.error.message}`);
               return;
             }
-            console.log(`Appointment starts: ${result.value}`);
+
+            const time = result.value;
+            console.log(`Appointment starts (UTC): ${time.toUTCString()}`);
+          });
+        }
+
+        function getLocal() {
+          Office.context.mailbox.item.start.getAsync((result) => {
+            if (result.status !== Office.AsyncResultStatus.Succeeded) {
+              console.error(`Action failed with message ${result.error.message}`);
+              return;
+            }
+
+            const time = result.value;
+            const localTime = Office.context.mailbox.convertToLocalClientTime(time);
+            console.log(`Appointment starts (local): ${localTime.month + 1}/${localTime.date}/${localTime.year}, ${localTime.hours}:${localTime.minutes}:${localTime.seconds}`);
           });
         }
 
@@ -43,9 +59,12 @@ template:
             <button id="set" class="ms-Button">
               <div class="ms-Button-label">Set start date and time</div>
             </button>
-            <button id="get" class="ms-Button">
-            <div class="ms-Button-label">Get start date and time</div>
-          </button>
+            <button id="get-utc" class="ms-Button">
+              <div class="ms-Button-label">Get start date and time (UTC)</div>
+            </button>
+            <button id="get-local" class="ms-Button">
+              <div class="ms-Button-label">Get start date and time (local)</div>
+            </button>
         </section>
     language: html
 style:
@@ -61,15 +80,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-set-subject-compose.yaml b/samples/outlook/90-other-item-apis/get-set-subject-compose.yaml
index 7d9a57941..7a78c2b10 100644
--- a/samples/outlook/90-other-item-apis/get-set-subject-compose.yaml
+++ b/samples/outlook/90-other-item-apis/get-set-subject-compose.yaml
@@ -6,9 +6,9 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
-        $("#set").on("click", set);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
+        document.getElementById("set").addEventListener("click", set);
 
         function get() {
           Office.context.mailbox.item.subject.getAsync((result) => {
@@ -60,15 +60,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-start-read.yaml b/samples/outlook/90-other-item-apis/get-start-read.yaml
index c6c9a3e46..076caa4ba 100644
--- a/samples/outlook/90-other-item-apis/get-start-read.yaml
+++ b/samples/outlook/90-other-item-apis/get-start-read.yaml
@@ -6,11 +6,19 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
+    content: |-
+        document.getElementById("get-utc").addEventListener("click", getUtc);
+        document.getElementById("get-local").addEventListener("click", getLocal);
+
+        function getUtc() {
+            const time = Office.context.mailbox.item.start;
+            console.log(`Appointment starts (UTC): ${time.toUTCString()}`);
+        }
 
-        function get() {
-          console.log(`Appointment starts: ${Office.context.mailbox.item.start}`);
+        function getLocal() {
+            const time = Office.context.mailbox.item.start;
+            const localTime = Office.context.mailbox.convertToLocalClientTime(time);
+            console.log(`Appointment starts (local): ${localTime.month + 1}/${localTime.date}/${localTime.year}, ${localTime.hours}:${localTime.minutes}:${localTime.seconds}`);
         }
     language: typescript
 template:
@@ -21,9 +29,12 @@ template:
         </section>
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
-            <button id="get" class="ms-Button">
-              <div class="ms-Button-label">Get start date and time</div>
-          </button>
+            <button id="get-utc" class="ms-Button">
+                <div class="ms-Button-label">Get start date and time (UTC)</div>
+            </button>
+            <button id="get-local" class="ms-Button">
+                <div class="ms-Button-label">Get start date and time (local)</div>
+            </button>
         </section>
     language: html
 style:
@@ -39,15 +50,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/get-subject-read.yaml b/samples/outlook/90-other-item-apis/get-subject-read.yaml
index 117129950..446e6fc0a 100644
--- a/samples/outlook/90-other-item-apis/get-subject-read.yaml
+++ b/samples/outlook/90-other-item-apis/get-subject-read.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#get").on("click", get);
+    content: |-
+        document.getElementById("get").addEventListener("click", get);
 
         function get() {
           console.log(`Subject: ${Office.context.mailbox.item.subject}`);
@@ -39,15 +39,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/item-id-compose.yaml b/samples/outlook/90-other-item-apis/item-id-compose.yaml
index 0b01c082b..f277cc15d 100644
--- a/samples/outlook/90-other-item-apis/item-id-compose.yaml
+++ b/samples/outlook/90-other-item-apis/item-id-compose.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.8'
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
           
         function run() {
             Office.context.mailbox.item.getItemIdAsync((result) => {
@@ -21,12 +21,11 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to get an item ID in compose mode.</p>
           <p><b>Required mode</b>: Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <p>Before you can get the item ID, you must first save the mail item.</p>
@@ -36,7 +35,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -48,15 +47,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/send-async.yaml b/samples/outlook/90-other-item-apis/send-async.yaml
new file mode 100644
index 000000000..84360408c
--- /dev/null
+++ b/samples/outlook/90-other-item-apis/send-async.yaml
@@ -0,0 +1,53 @@
+order: 30
+id: outlook-send-async
+name: Send the current message or appointment (Compose)
+description: Sends the current message or appointment.
+host: OUTLOOK
+api_set:
+    Mailbox: '1.15'
+script:
+    content: |-
+        document.getElementById("send-async").addEventListener("click", sendAsync);
+
+        function sendAsync() {
+          // This snippet sends the current message or appointment being composed.
+          Office.context.mailbox.item.sendAsync((asyncResult) => {
+            if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+              console.log("Action failed with error: " + asyncResult.error.message);
+              return;
+            }
+          });
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            <p class="ms-font-m">This sample shows how to programmatically send the current message or appointment being composed.</p>
+            <p><b>Required mode</b>: Compose</p>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <button id="send-async" class="ms-Button">
+                <span class="ms-Button-label">Send</span>
+            </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/session-data-apis.yaml b/samples/outlook/90-other-item-apis/session-data-apis.yaml
index d59ddb9fd..1a38250ca 100644
--- a/samples/outlook/90-other-item-apis/session-data-apis.yaml
+++ b/samples/outlook/90-other-item-apis/session-data-apis.yaml
@@ -1,17 +1,17 @@
 order: 20
 id: outlook-other-item-apis-session-data-apis
 name: Work with session data APIs (Compose)
-description: 'Sets, gets, gets all, removes, and clears session data in Compose mode.'
+description: Sets, gets, gets all, removes, and clears session data in Compose mode.
 host: OUTLOOK
 api_set:
     Mailbox: '1.11'
 script:
-    content: |
-        $("#setSessionData").on("click", setSessionData);
-        $("#getSessionData").on("click", getSessionData);
-        $("#getAllSessionData").on("click", getAllSessionData);
-        $("#removeSessionData").on("click", removeSessionData);
-        $("#clearSessionData").on("click", clearSessionData);
+    content: |-
+        document.getElementById("setSessionData").addEventListener("click", setSessionData);
+        document.getElementById("getSessionData").addEventListener("click", getSessionData);
+        document.getElementById("getAllSessionData").addEventListener("click", getAllSessionData);
+        document.getElementById("removeSessionData").addEventListener("click", removeSessionData);
+        document.getElementById("clearSessionData").addEventListener("click", clearSessionData);
         function setSessionData() {
             Office.context.mailbox.item.sessionData.setAsync(
               "Date",
@@ -106,12 +106,8 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/90-other-item-apis/set-selected-data.yaml b/samples/outlook/90-other-item-apis/set-selected-data.yaml
index baa5c050f..8336180c8 100644
--- a/samples/outlook/90-other-item-apis/set-selected-data.yaml
+++ b/samples/outlook/90-other-item-apis/set-selected-data.yaml
@@ -6,8 +6,8 @@ host: OUTLOOK
 api_set:
     Mailbox: '1.1'
 script:
-    content: |
-        $("#set-selected-data").on("click", setSelectedData);
+    content: |-
+        document.getElementById("set-selected-data").addEventListener("click", setSelectedData);
 
         function setSelectedData() {
           Office.context.mailbox.item.setSelectedDataAsync("Replaced", function(asyncResult) {
@@ -25,7 +25,6 @@ template:
             <p class="ms-font-m">This sample shows how to replace the selected text in the item body or subject/title.</p>
             <p><b>Required mode</b>: Compose</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Select text in the item body or subject then push the <b>Replace selected text</b> button.</p>
@@ -47,15 +46,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml b/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml
index 210aa7e81..f11357527 100644
--- a/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml
+++ b/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml
@@ -1,17 +1,17 @@
 order: 19
 id: outlook-other-item-apis-work-with-client-signatures
 name: Work with client signatures (Compose)
-description: 'Checks if the client signature is enabled, disables the client signature, gets the compose type, and sets a signature in Compose mode.'
+description: Checks if the client signature is enabled, disables the client signature, gets the compose type, and sets a signature in Compose mode.
 host: OUTLOOK
 api_set:
     Mailbox: '1.10'
 script:
-    content: |
-        $("#isClientSignatureEnabled").on("click", isClientSignatureEnabled);
-        $("#disableClientSignature").on("click", disableClientSignature);
-        $("#getComposeType").on("click", getComposeType);
-        $("#setSignature").on("click", setSignature);
-        $("#setSignatureWithInlineImage").on("click", setSignatureWithInlineImage);
+    content: |-
+        document.getElementById("isClientSignatureEnabled").addEventListener("click", isClientSignatureEnabled);
+        document.getElementById("disableClientSignature").addEventListener("click", disableClientSignature);
+        document.getElementById("getComposeType").addEventListener("click", getComposeType);
+        document.getElementById("setSignature").addEventListener("click", setSignature);
+        document.getElementById("setSignatureWithInlineImage").addEventListener("click", setSignatureWithInlineImage);
 
         function isClientSignatureEnabled() {
           // Check if the client signature is currently enabled.
@@ -53,7 +53,7 @@ script:
 
         function setSignature() {
           // Set the signature for the current item.
-          const signature = $("#signature").val();
+          const signature = (document.getElementById("signature") as HTMLInputElement).value;
           console.log(`Setting signature to "${signature}".`);
           Office.context.mailbox.item.body.setSignatureAsync(signature, function(asyncResult) {
             if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
@@ -73,7 +73,7 @@ script:
             { isInline: true },
             function(result) {
               if (result.status == Office.AsyncResultStatus.Succeeded) {
-                const signature = $("#signature").val() + "<img src='/service/cid:myImage.png'>";
+                const signature = (document.getElementById("signature") as HTMLInputElement).value + "<img src='/service/cid:myImage.png'>";
                 console.log(`Setting signature to "${signature}".`);
                 Office.context.mailbox.item.body.setSignatureAsync(
                   signature,
@@ -99,7 +99,6 @@ template:
                 </p>
             </p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="isClientSignatureEnabled" class="ms-Button">
@@ -136,15 +135,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/outlook/99-preview-apis/get-set-isalldayevent.yaml b/samples/outlook/99-preview-apis/get-set-isalldayevent.yaml
index 7dbed18a8..275967e00 100644
--- a/samples/outlook/99-preview-apis/get-set-isalldayevent.yaml
+++ b/samples/outlook/99-preview-apis/get-set-isalldayevent.yaml
@@ -6,9 +6,9 @@ host: OUTLOOK
 api_set:
     Mailbox: preview
 script:
-    content: |
-        $("#getIsAllDayEvent").on("click", getIsAllDayEvent);
-        $("#setIsAllDayEventTrue").on("click", setIsAllDayEventTrue);
+    content: |-
+        document.getElementById("getIsAllDayEvent").addEventListener("click", getIsAllDayEvent);
+        document.getElementById("setIsAllDayEventTrue").addEventListener("click", setIsAllDayEventTrue);
 
         function getIsAllDayEvent() {
             Office.context.mailbox.item.isAllDayEvent.getAsync(function(asyncResult) {
@@ -39,7 +39,6 @@ template:
                 </p>
             </p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <button id="getIsAllDayEvent" class="ms-Button">
             <div class="ms-Button-label">Get isAllDayEvent</div>
@@ -62,15 +61,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
+libraries: |-
     https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
-    @types/office-js-preview
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js-preview/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/99-preview-apis/get-token-status.yaml b/samples/outlook/99-preview-apis/get-token-status.yaml
new file mode 100644
index 000000000..488c867fa
--- /dev/null
+++ b/samples/outlook/99-preview-apis/get-token-status.yaml
@@ -0,0 +1,114 @@
+order: 2
+id: outlook-get-token-status
+name: Get the status of EWS tokens in an organization
+description: Gets the status of Exchange Web Services (EWS) callback tokens in an organization.
+host: OUTLOOK
+api_set:
+    Mailbox: preview
+script:
+    content: |
+        document.getElementById("get-status").addEventListener("click",
+        getTokenStatus);
+
+        function getTokenStatus() {
+          Office.context.mailbox.diagnostics.ews.getTokenStatusAsync({ isRest: false }, (result) => {
+            if (result.status === Office.AsyncResultStatus.Failed) {
+              console.log(result.error.message);
+              return;
+            }
+            const status = result.value;
+            switch (status) {
+              case Office.MailboxEnums.TokenStatus.Enabled:
+                console.log("EWS callback tokens are enabled.");
+                break;
+              case Office.MailboxEnums.TokenStatus.Disabled:
+                console.log("EWS callback tokens are disabled.");
+                break;
+              case Office.MailboxEnums.TokenStatus.Removed:
+                console.log(
+                  "The organization has an Exchange Online environment. Legacy Exchange tokens are no longer supported.",
+                );
+                break;
+            }
+          });
+        }
+    language: typescript
+template:
+    content: |-
+        <section>
+            <p>This sample shows how to determine if Exchange Web Services (EWS) callback tokens are supported in an
+                organization.
+          </p>
+          <p><b>Supported Outlook clients</b>: Web and Windows (new and classic (Version 2510, Build 19328.20000 or later))</p>
+          <p>
+            <b>Required mode</b>: Compose or Read
+          </p>
+        </section>
+        <section>
+            <h3>Try it out</h3>
+            <button id="get-status">Get token status
+          </button>
+        </section>
+    language: html
+style:
+    content: |-
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            font-size: 14px;
+            line-height: 1.5;
+            padding: 10px;
+        }
+
+        section {
+            margin-bottom: 20px;
+        }
+
+        h3 {
+            margin-top: 0;
+            margin-bottom: 10px;
+            font-size: 16px;
+        }
+
+        p {
+            margin: 0 0 10px 0;
+        }
+
+        button {
+            background-color: #0078d4;
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            font-size: 14px;
+            cursor: pointer;
+            border-radius: 2px;
+            margin-left: 20px;
+            margin-bottom: 5px;
+            min-width: 80px;
+            display: block;
+        }
+
+        button:hover {
+            background-color: #106ebe;
+        }
+
+        button:active {
+            background-color: #005a9e;
+        }
+
+        input {
+            padding: 8px;
+            margin: 5px 0;
+            border: 1px solid #ccc;
+            border-radius: 2px;
+            font-size: 14px;
+        }
+
+        .header {
+            text-align: center;
+            background-color: #f3f2f1;
+            padding: 10px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js-preview/index.d.ts
\ No newline at end of file
diff --git a/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml b/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml
index faa5debbf..3763ab1c4 100644
--- a/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml
+++ b/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml
@@ -6,16 +6,14 @@ host: OUTLOOK
 api_set:
     Mailbox: preview
 script:
-    content: |
-        $("#set-body").on("click", setDisplayedBody);
-        $("#set-subject").on("click", setDisplayedSubject);
+    content: |-
+        document.getElementById("set-body").addEventListener("click", setDisplayedBody);
+        document.getElementById("set-subject").addEventListener("click", setDisplayedSubject);
 
         function setDisplayedBody() {
           // This snippet temporarily sets the content displayed in the body of a message in read mode.
           // The set content will remain visible until the user switches to a different message in the Reading Pane or closes the window of the current message.
-          const bodyText = $("#body-text-field")
-            .val()
-            .toString();
+          const bodyText = (document.getElementById("body-text-field") as HTMLInputElement).value;
           Office.context.mailbox.item.display.body.setAsync(bodyText, (asyncResult) => {
             if (asyncResult.status === Office.AsyncResultStatus.Failed) {
               console.log(`Action failed with error: ${asyncResult.error.message}`);
@@ -29,9 +27,7 @@ script:
         function setDisplayedSubject() {
           // This snippet temporarily sets the content displayed in the subject field of a message in read mode.
           // The set content will remain visible until the user switches to a different message in the Reading Pane or closes the window of the current message.
-          const subjectText = $("#subject-text-field")
-            .val()
-            .toString();
+          const subjectText = (document.getElementById("subject-text-field") as HTMLInputElement).value;
           Office.context.mailbox.item.display.subject.setAsync(subjectText, (asyncResult) => {
             if (asyncResult.status === Office.AsyncResultStatus.Failed) {
               console.log(`Action failed with error: ${asyncResult.error.message}`);
@@ -49,7 +45,6 @@ template:
                 message in read mode.</p>
             <p><b>Required mode</b>: Message Read</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <div class="ms-TextField">
@@ -83,15 +78,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
+libraries: |-
     https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
-    @types/office-js-preview
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js-preview/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/outlook/default.yaml b/samples/outlook/default.yaml
index f338af07c..7ccf69f33 100644
--- a/samples/outlook/default.yaml
+++ b/samples/outlook/default.yaml
@@ -5,8 +5,8 @@ author: OfficeDev
 host: OUTLOOK
 api_set: null
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
 
         function run() {
             const userProfile = Office.context.mailbox.userProfile;
@@ -14,7 +14,7 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <button id="run" class="ms-Button">
             <span class="ms-Button-label">Run</span>
         </button>
@@ -32,15 +32,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/powerpoint/basics/basic-api-call-js.yaml b/samples/powerpoint/basics/basic-api-call-js.yaml
index 2a14f6c5d..5f421f9bb 100644
--- a/samples/powerpoint/basics/basic-api-call-js.yaml
+++ b/samples/powerpoint/basics/basic-api-call-js.yaml
@@ -6,8 +6,8 @@ host: POWERPOINT
 api_set:
     PowerPointApi: '1.4'
 script:
-    content: |
-        $("#run").on("click", () => tryCatch(run));
+    content: |-
+        document.getElementById("run").addEventListener("click", () => tryCatch(run));
 
         function run() {
           // This function gets the collection of shapes on the first slide,
@@ -59,15 +59,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/powerpoint/basics/basic-api-call-ts.yaml b/samples/powerpoint/basics/basic-api-call-ts.yaml
index c63c13f6e..0761647c6 100644
--- a/samples/powerpoint/basics/basic-api-call-ts.yaml
+++ b/samples/powerpoint/basics/basic-api-call-ts.yaml
@@ -6,8 +6,8 @@ host: POWERPOINT
 api_set:
     PowerPointApi: '1.4'
 script:
-    content: |
-        $("#run").on("click", () => tryCatch(run));
+    content: |-
+        document.getElementById("run").addEventListener("click", () => tryCatch(run));
 
         const run: Function = async () => {
           // This function gets the collection of shapes on the first slide,
@@ -59,15 +59,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/powerpoint/basics/basic-common-api-call.yaml b/samples/powerpoint/basics/basic-common-api-call.yaml
index 46d295927..0f9d08860 100644
--- a/samples/powerpoint/basics/basic-common-api-call.yaml
+++ b/samples/powerpoint/basics/basic-common-api-call.yaml
@@ -7,8 +7,8 @@ host: POWERPOINT
 api_set:
     Selection: '1.1'
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
 
         function run() {
             Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => {
@@ -21,7 +21,7 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <button id="run" class="ms-Button">
             <span class="ms-Button-label">Run</span>
         </button>
@@ -39,15 +39,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/powerpoint/default.yaml b/samples/powerpoint/default.yaml
index e86a53323..556474193 100644
--- a/samples/powerpoint/default.yaml
+++ b/samples/powerpoint/default.yaml
@@ -5,8 +5,8 @@ author: OfficeDev
 host: POWERPOINT
 api_set: {}
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
 
         function run() {
             Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => {
@@ -19,7 +19,7 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <button id="run" class="ms-Button">
             <span class="ms-Button-label">Run</span>
         </button>
@@ -37,15 +37,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/powerpoint/document/create-presentation.yaml b/samples/powerpoint/document/create-presentation.yaml
index 481c61256..fedd25925 100644
--- a/samples/powerpoint/document/create-presentation.yaml
+++ b/samples/powerpoint/document/create-presentation.yaml
@@ -1,21 +1,21 @@
 id: powerpoint-create-presentation
 name: Create presentation
-description: 'Creates a new, empty presentation and creates a new presentation by copying an existing one.'
+description: Creates a new, empty presentation and creates a new presentation by copying an existing one.
 author: OfficeDev
 host: POWERPOINT
 api_set:
-    PowerPoint: '1.1'
+    PowerPointApi: '1.1'
 script:
-    content: |
-        $("#create-new-blank-presentation").on("click", () => tryCatch(createBlankPresentation));
-        $("#file").on("change", () => tryCatch(createPresentationFromExisting));
+    content: |-
+        document.getElementById("create-new-blank-presentation").addEventListener("click", () => tryCatch(createBlankPresentation));
+        document.getElementById("file").addEventListener("change", () => tryCatch(createPresentationFromExisting));
 
         function createBlankPresentation() {
             PowerPoint.createPresentation();
         }
 
         function createPresentationFromExisting() {
-            const myFile = <HTMLInputElement>document.getElementById("file");
+            const myFile = document.getElementById("file") as HTMLInputElement;
             const reader = new FileReader();
 
             reader.onload = (event) => {
@@ -45,7 +45,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to create a new, empty presentation and how to create a new presentation by copying an existing one.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p><b>Create empty presentation</b></p>
@@ -72,15 +71,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/powerpoint/hyperlinks/manage-hyperlinks.yaml b/samples/powerpoint/hyperlinks/manage-hyperlinks.yaml
index eff37c9dc..d5125be3a 100644
--- a/samples/powerpoint/hyperlinks/manage-hyperlinks.yaml
+++ b/samples/powerpoint/hyperlinks/manage-hyperlinks.yaml
@@ -5,8 +5,8 @@ host: POWERPOINT
 api_set:
     PowerPointApi: '1.6'
 script:
-    content: |
-        $("#get-hyperlinks").on("click", () => tryCatch(getHyperlinks));
+    content: |-
+        document.getElementById("get-hyperlinks").addEventListener("click", () => tryCatch(getHyperlinks));
 
         async function getHyperlinks() {
           // Gets the hyperlinks found in the first selected slide.
@@ -38,7 +38,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p class="ms-font-m">Demonstrates how to get the hyperlinks located in a slide.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>First, add at least one hyperlink to a slide then select at least one slide.</p>
@@ -58,17 +57,11 @@ style:
             margin-bottom: 5px;
             margin-left: 20px;
             min-width: 80px;
-        }  
+        }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/powerpoint/images/insert-image.yaml b/samples/powerpoint/images/insert-image.yaml
index f0d1912fd..a1debdc9e 100644
--- a/samples/powerpoint/images/insert-image.yaml
+++ b/samples/powerpoint/images/insert-image.yaml
@@ -6,8 +6,8 @@ author: OfficeDev
 host: POWERPOINT
 api_set: {}
 script:
-    content: |
-        $('#insert').on("click", run);
+    content: |-
+        document.getElementById('insert').addEventListener("click", run);
 
         function run() {
             Office.context.document.setSelectedDataAsync(getImageAsBase64String(), {
@@ -35,7 +35,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>Insert an image into the current slide.</p>
         </section>
-
         <button id="insert" class="ms-Button">
             <span class="ms-Button-label">Run</span>
         </button>
@@ -53,15 +52,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/powerpoint/images/insert-svg.yaml b/samples/powerpoint/images/insert-svg.yaml
index beb7aa18a..563929e69 100644
--- a/samples/powerpoint/images/insert-svg.yaml
+++ b/samples/powerpoint/images/insert-svg.yaml
@@ -6,8 +6,8 @@ author: OfficeDev
 host: POWERPOINT
 api_set: {}
 script:
-    content: |
-        $('#insert').on("click", newImage);
+    content: |-
+        document.getElementById('insert').addEventListener("click", newImage);
 
         function newImage() {
             Office.context.document.setSelectedDataAsync(getImageAsBase64String(), {
@@ -36,7 +36,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to insert an SVG image using an XML string as the source.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="insert" class="ms-Button">
@@ -57,15 +56,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/powerpoint/scenarios/searches-wikipedia-api.yaml b/samples/powerpoint/scenarios/searches-wikipedia-api.yaml
index b3b3cc0d3..41e403296 100644
--- a/samples/powerpoint/scenarios/searches-wikipedia-api.yaml
+++ b/samples/powerpoint/scenarios/searches-wikipedia-api.yaml
@@ -6,120 +6,150 @@ author: cakriwut
 host: POWERPOINT
 api_set: {}
 script:
-    content: |
+    content: |-
         /*
          * Copyright (c) Riwut Libinuko. All rights reserved. Licensed under the MIT license.
         */
 
         declare let moment: any;
-        $("#search").on("click", run);
+
+        document.getElementById("search").addEventListener("click", run);
 
         async function run() {
           Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, {}, getSelectedText);
         }
 
-        /* Extract selected text and call SearchWiki */
+        /* Extract selected text and call SearchWiki. */
         function getSelectedText(result) {
-          $("#result").empty();
-          $("#result").append('<ul class="ms-List"></ul>');
+          const resultElement = document.getElementById("result");
+          if (resultElement) {
+            resultElement.innerHTML = "";
+            const listElement = document.createElement("ul");
+            listElement.className = "ms-List";
+            listElement.id = "ms-List"; // Ensure the list has an ID for later reference
+            resultElement.appendChild(listElement);
+          }
+
           if (result.status === Office.AsyncResultStatus.Succeeded) {
             searchWiki(result.value);
           } else {
             console.error(result.error.message);
-          } 
+          }
         }
 
-        /* Searching Wiki */
-
+        /* Searching Wiki. */
         function searchWiki(pattern) {
-          let url = build_wiki_search_url(http://github.com/pattern);
+          const url = build_wiki_search_url(http://github.com/pattern);
 
           fetch(url)
-            .then((response) => {
-              return response.json();
-            })
+            .then((response) => response.json())
             .then((data) => {
-              $.each(data.query.search, function(i, val) {
-                let date = moment(val.timestamp).format("YYYY-MM-DD hh:mm A");
-                let listItem = build_list_item(val.title, val.pageid, val.snippet, date);
-                $(".ms-List").append(listItem);
+              data.query.search.forEach((val) => {
+                const date = moment(val.timestamp).format("YYYY-MM-DD hh:mm A");
+                const listItem = build_list_item(val.title, val.pageid, val.snippet, date);
+                const listElement = document.getElementById("ms-List");
+                if (listElement) {
+                  const tempDiv = document.createElement("div");
+                  tempDiv.innerHTML = listItem;
+                  const listItemNode = tempDiv.firstElementChild;
+                  if (listItemNode) {
+                    listElement.appendChild(listItemNode);
+                  }
+                }
               });
+
               return data.query;
             })
-            .then(function(data) {
-              $(".ms-ListItem").each(function(i, item) {
-                if ($(this).find(".listItem-link a").length === 0) {
-                  getWikiLink($(this).data("pageid"), $(this));
+            .then((data) => {
+              const listItems = document.querySelectorAll(".ms-ListItem");
+              listItems.forEach((item) => {
+                const link = item.querySelector(".listItem-link a");
+                if (!link || link.innerHTML.length === 0) {
+                  const pageId = item instanceof HTMLElement ? item.dataset.pageid : undefined;
+                  if (pageId) {
+                    getWikiLink(pageId, item);
+                  }
                 }
               });
-            });
+            })
+            .catch((error) => console.error("Error fetching Wikipedia data:", error));
         }
 
-        // Search for Wiki Page link based on the given pageId
-        // Update itemHTML from the returned result
-
+        // Search for Wiki Page link based on the given pageId.
+        // Update itemHTML from the returned result.
         function getWikiLink(pageid, itemHTML) {
-          let pageinfo = build_wiki_pageinfo(pageid);
+          const pageinfo = build_wiki_pageinfo(pageid);
           fetch(pageinfo)
-            .then((response) => {
-              return response.json();
-            })
+            .then((response) => response.json())
             .then((data) => {
-              let itemUrl = data.query.pages[pageid].fullurl;
-              let images = data.query.pages[pageid].images;
-              let title = $(itemHTML)
-                .find(".listItem-link")
-                .html();
-              $(itemHTML)
-                .find(".listItem-link")
-                .html('<a href="' + itemUrl + '">' + title + "</a>");
-              if (typeof images !== "undefined") {
-                $(itemHTML)
-                  .find(".ms-ListItem-image")
-                  .attr("data-image", images[0].title);
+              const itemUrl = data.query.pages[pageid].fullurl;
+              const images = data.query.pages[pageid].images;
+              const titleElement = itemHTML.querySelector(".listItem-link");
+              const title = titleElement ? titleElement.innerHTML : "";
+
+              if (titleElement && itemUrl) {
+                titleElement.innerHTML = `<a href="http://github.com/$%7BitemUrl%7D" target="_blank">${title}</a>`;
+              }
+
+              if (images && images.length > 0) {
+                const imageElement = itemHTML.querySelector(".ms-ListItem-image");
+                if (imageElement) {
+                  imageElement.setAttribute("data-image", images[0].title);
+                }
               }
             })
-            .then((data) => {
+            .then(() => {
               getWikiImages(pageid, itemHTML);
-            });
+            })
+            .catch((error) => console.error("Error fetching Wiki link:", error));
         }
 
-        // Search for Wiki image based on the given pageId, first image
-        // Update itemHTML from the returned result
-
+        // Search for Wiki image based on the given pageId, first image.
+        // Update itemHTML from the returned result.
         function getWikiImages(pageid, itemHTML) {
-          let pageInfo = build_wiki_image_search(pageid);
+          const pageInfo = build_wiki_image_search(pageid);
           fetch(pageInfo)
-            .then((response) => {
-              return response.json();
-            })
+            .then((response) => response.json())
             .then(async (data) => {
-              if (typeof data.query.pages[pageid].original !== "undefined") {
-                let img = data.query.pages[pageid].original.source;
-                $(itemHTML)
-                  .find(".ms-ListItem-image")
-                  .append('<img width="70px" src="' + img + '" />');
-                return true;
+              const pageData = data.query.pages[pageid];
+              if (pageData && pageData.original && pageData.original.source) {
+                const originalImage = pageData.original.source;
+                const imageElement = itemHTML.querySelector(".ms-ListItem-image");
+
+                if (originalImage && imageElement) {
+                  const imgElement = document.createElement("img");
+                  imgElement.width = 70; // Set the width to 70px.
+                  imgElement.src = originalImage;
+                  imageElement.appendChild(imgElement);
+                  return true;
+                }
               } else {
-                let img = $(itemHTML)
-                  .find(".ms-ListItem-image")
-                  .data("image");
-                pageInfo = build_wiki_file_search(img);
-                let pageInfoResult = await fetch(pageInfo);
-                return pageInfoResult.json();
+                const imageElement = itemHTML.querySelector(".ms-ListItem-image");
+                const img = imageElement ? imageElement.dataset.image : undefined;
+                if (img) {
+                  const pageInfoResult = await fetch(build_wiki_file_search(img));
+                  return pageInfoResult.json();
+                }
               }
             })
             .then((data) => {
-              if (typeof data.query !== "undefined") {
-                let key = Object.keys(data.query.pages)[0];
-                if (data.query.pages[key].title !== "Undefined") {
-                  let img = data.query.pages[key].thumbnail.source;
-                  $(itemHTML)
-                    .find(".ms-ListItem-image")
-                    .append('<img width="70px" src="' + img + '" />');
+              if (data && data.query) {
+                const key = Object.keys(data.query.pages)[0];
+                const page = data.query.pages[key];
+                if (page && page.thumbnail && page.thumbnail.source) {
+                  const thumbnail = page.thumbnail.source;
+                  const imageElement = itemHTML.querySelector(".ms-ListItem-image");
+
+                  if (thumbnail && imageElement) {
+                    const imgElement = document.createElement("img");
+                    imgElement.width = 70; // Set the width to 70px.
+                    imgElement.src = thumbnail;
+                    imageElement.appendChild(imgElement);
+                  }
                 }
               }
-            });
+            })
+            .catch((error) => console.error("Error fetching Wiki images:", error));
         }
 
         /* Wikipedia API query */
@@ -131,52 +161,45 @@ script:
 
         /* Wikipedia Search Query pattern */
         function build_wiki_search_url(http://github.com/pattern) {
-          let qry = "pageimages&list=search&srsearch=";
+          const qry = "pageimages&list=search&srsearch=";
           return wiki_base(qry + pattern);
         }
 
         /* Wikipedia Image Query pattern */
         function build_wiki_image_search(pattern) {
-          let qry = "pageimages&piprop=original&pilicense=any&pageids=";
+          const qry = "pageimages&piprop=original&pilicense=any&pageids=";
           return wiki_base(qry + pattern);
         }
 
         /* Wikipedia File Query pattern */
         function build_wiki_file_search(pattern) {
-          let qry = "pageimages|pageterms&pilicense=any&titles=";
+          const qry = "pageimages|pageterms&pilicense=any&titles=";
           return wiki_base(qry + pattern);
         }
 
         /* Wikipedia Page Info Query pattern */
         function build_wiki_pageinfo(pattern) {
-          let qry = "info|images&inprop=url&pageids=";
+          const qry = "info|images&inprop=url&pageids=";
           return wiki_base(qry + pattern);
         }
 
         /* Render */
         function build_list_item(title, pageid, summary, ts) {
-          return (
-            '<li class="ms-ListItem ms-ListItem--image" tabindex="0" data-pageid="' +
-            pageid +
-            '">' +
-            '<div class="ms-ListItem-image" ></div>' +
-            '<span class="ms-ListItem-secondaryText listItem-link">' +
-            title +
-            "</span>" +
-            "<span>" +
-            summary +
-            "</span>" +
-            '<div class="ms-ListItem-selectionTarget" > </div>' +
-            '<div class="ms-ListItem-actions" >' +
-            '<div class="ms-ListItem-action" >' +
-            '<i class="ms-Icon ms-Icon--Flag" > </i>' +
-            "</div>" +
-            '<div class="ms-ListItem-action" >' +
-            '<i class="ms-Icon ms-Icon--Pinned" > </i>' +
-            "</div>" +
-            "</div>" +
-            "</li>"
-          );
+          return `
+            <li class="ms-ListItem ms-ListItem--image" tabindex="0" data-pageid="${pageid}">
+              <div class="ms-ListItem-image"></div>
+              <span class="ms-ListItem-secondaryText listItem-link">${title}</span>
+              <span>${summary}</span>
+              <div class="ms-ListItem-selectionTarget"></div>
+              <div class="ms-ListItem-actions">
+                <div class="ms-ListItem-action">
+                  <i class="ms-Icon ms-Icon--Flag"></i>
+                </div>
+                <div class="ms-ListItem-action">
+                  <i class="ms-Icon ms-Icon--Pinned"></i>
+                </div>
+              </div>
+            </li>`;
         }
     language: typescript
 template:
@@ -184,11 +207,9 @@ template:
         <header class="ms-Fabric ms-welcome__header ms-bgColor-neutralLighter" style="text-align: center">
           <h1 class="ms-font-su">Search Wikipedia</h1>
         </header>
-
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how to query external API (Wikipedia) with the text currently selected in the presentation.</p>
          </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Try it out</h3>
           <p>Select any text in the presentation and press <b>Search</b> to see related Wikipedia entries.</p>
@@ -201,12 +222,11 @@ template:
             </li>
           </ol>
         </section>
-
         <section class="ms-Fabric sample ms-font-m">
           <h3>Result</h3>
           <div id="result">
           </div>
-        </section>   
+        </section>
     language: html
 style:
     content: |-
@@ -221,17 +241,11 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
 
-    https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js
\ No newline at end of file
+    https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js
diff --git a/samples/powerpoint/shapes/add-modify-tables.yaml b/samples/powerpoint/shapes/add-modify-tables.yaml
new file mode 100644
index 000000000..c9da7247f
--- /dev/null
+++ b/samples/powerpoint/shapes/add-modify-tables.yaml
@@ -0,0 +1,417 @@
+order: 4
+id: powerpoint-shapes-add-modify-tables
+name: Add and modify tables
+description: Shows how to add and modify tables in a presentation.
+host: POWERPOINT
+api_set:
+    PowerPointApi: '1.8'
+script:
+    content: |
+        document.getElementById("add-basic-table").addEventListener("click", () => tryCatch(addBasicTable));
+        document.getElementById("table-width-height").addEventListener("click", () => tryCatch(tableWidthHeight));
+        document
+          .getElementById("table-column-widths-row-heights")
+          .addEventListener("click", () => tryCatch(tableColumnWidthsRowHeights));
+        document.getElementById("table-values").addEventListener("click", () => tryCatch(tableValues));
+        document.getElementById("table-merge-areas").addEventListener("click", () => tryCatch(tableMergeAreas));
+        document.getElementById("table-cell-fill-font").addEventListener("click", () => tryCatch(tableCellFillFont));
+        document.getElementById("table-borders").addEventListener("click", () => tryCatch(tableBorders));
+        document.getElementById("table-indent-margin").addEventListener("click", () => tryCatch(tableIndentMargin));
+        document.getElementById("table-cell-alignment").addEventListener("click", () => tryCatch(tableCellAlignment));
+        document.getElementById("table-text-runs").addEventListener("click", () => tryCatch(tableTextRuns));
+        document.getElementById("table-from-shape").addEventListener("click", () => tryCatch(getTableFromShape));
+        document.getElementById("update-table-values").addEventListener("click", () => tryCatch(updateTableValues));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+
+        async function addBasicTable() {
+          // Adds a basic table.
+          await PowerPoint.run(async (context) => {
+            const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+            // Add a simple table, specifying the row and column count.
+            shapes.addTable(3, 4);
+            await context.sync();
+          });
+        }
+
+        async function tableWidthHeight() {
+          // Specifies the width and height of a table.
+          await PowerPoint.run(async (context) => {
+            const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+            // Add a table, specifying the width and height.
+            shapes.addTable(3, 4, {
+              width: 600,
+              height: 400
+            });
+            await context.sync();
+          });
+        }
+
+        async function tableColumnWidthsRowHeights() {
+          // Specifies the column widths and row heights of a table.
+          await PowerPoint.run(async (context) => {
+            const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+            // Add a table, specifying column widths and row heights.
+            shapes.addTable(3, 4, {
+              columns: [{ columnWidth: 100 }, { columnWidth: 200 }, { columnWidth: 100 }, { columnWidth: 200 }],
+              rows: [{ rowHeight: 60 }, { rowHeight: 120 }, { rowHeight: 180 }]
+            });
+            await context.sync();
+          });
+        }
+
+        async function tableValues() {
+          // Specifies a table's values.
+          await PowerPoint.run(async (context) => {
+            const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+            // Add a table, specifying cell values.
+            const shape = shapes.addTable(3, 4, {
+              values: [
+                ["A", "BB", "CCC", "DDDD"],
+                ["E", "FF", "GGG", "HHHH"],
+                ["1", "12", "123", "1234"]
+              ]
+            });
+            await context.sync();
+          });
+        }
+
+        async function tableMergeAreas() {
+          // Specifies the merge areas of a table.
+          await PowerPoint.run(async (context) => {
+            const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+            // Add a table, specifying one 2x2 merged area.
+            shapes.addTable(3, 4, {
+              values: [
+                ["A", "BB", "CCC", "DDDD"],
+                ["E", "FF", "", "HHHH"],
+                ["1", "", "", "1234"]
+              ],
+              mergedAreas: [{ rowIndex: 1, columnIndex: 1, rowCount: 2, columnCount: 2 }]
+            });
+            await context.sync();
+          });
+        }
+
+        async function tableCellFillFont() {
+          // Specifies the font formatting and fill colors of the cells in a table.
+          await PowerPoint.run(async (context) => {
+            const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+            // Add a table, specifying font formatting and fill colors.
+            shapes.addTable(3, 4, {
+              values: [
+                ["A", "BB", "CCC", "DDDD"],
+                ["E", "FF", "GGG", "HHHH"],
+                ["1", "12", "123", "1234"]
+              ],
+              specificCellProperties: [
+                [
+                  { fill: { color: "red" }, font: { color: "yellow", name: "Calibri" } },
+                  { fill: { color: "#0048ba" }, font: { color: "yellow", name: "Coolvetica" } },
+                  { fill: { color: "red" }, font: { color: "yellow", italic: true } },
+                  { fill: { color: "red" }, font: { color: "#9966cc", strikethrough: true } }
+                ],
+                [
+                  { fill: { color: "#fbceb1" }, font: { color: "yellow", doubleStrikethrough: true } },
+                  { fill: { color: "red" }, font: { color: "yellow", subscript: true } },
+                  { fill: { color: "#0048ba" }, font: { color: "yellow", superscript: true } },
+                  { fill: { color: "red" }, font: { color: "yellow" } }
+                ],
+                [
+                  { fill: { color: "red" }, font: { color: "#b0bf1a" } },
+                  { fill: { color: "#9966cc" }, font: { color: "yellow" } },
+                  { fill: { color: "#b0bf1a" }, font: { color: "yellow" } },
+                  { fill: { color: "red" }, font: { color: "#fbceb1" } }
+                ]
+              ]
+            });
+            await context.sync();
+          });
+        }
+
+        async function tableBorders() {
+          // Specifies a table's borders.
+          await PowerPoint.run(async (context) => {
+            const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+            // Add a table, specifying border styles.
+            shapes.addTable(3, 4, {
+              values: [
+                ["A", "BB", "CCC", "DDDD"],
+                ["E", "FF", "GGG", "HHHH"],
+                ["1", "12", "123", "1234"]
+              ],
+              uniformCellProperties: {
+                borders: {
+                  left: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+                  right: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+                  top: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 },
+                  bottom: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 }
+                }
+              }
+            });
+            await context.sync();
+          });
+        }
+
+        async function tableIndentMargin() {
+          // Specifying the indents for a table.
+          await PowerPoint.run(async (context) => {
+            const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+            // Add a table, specifying the indent level for cells.
+            shapes.addTable(3, 4, {
+              values: [
+                ["A", "BB", "CCC", "DDDD"],
+                ["E", "FF", "GGG", "HHHH"],
+                ["1", "12", "123", "1234"]
+              ],
+              specificCellProperties: [
+                [{ indentLevel: 0 }, { indentLevel: 1 }, { indentLevel: 2 }, { indentLevel: 3 }],
+                [{ indentLevel: 0 }, { indentLevel: 1 }, { indentLevel: 2 }, { indentLevel: 3 }],
+                [{ indentLevel: 0 }, { indentLevel: 1 }, { indentLevel: 2 }, { indentLevel: 3 }]
+              ]
+            });
+            await context.sync();
+          });
+        }
+
+        async function tableCellAlignment() {
+          // Specifies the horizontal and vertical alignments of the cells in a table.
+          await PowerPoint.run(async (context) => {
+            const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+            // Add a table, specifying horizontal and vertical alignment.
+            shapes.addTable(3, 4, {
+              values: [
+                ["A", "BB", "CCC", "DDDD"],
+                ["E", "FF", "GGG", "HHHH"],
+                ["1", "12", "123", "1234"]
+              ],
+              uniformCellProperties: {
+                horizontalAlignment: PowerPoint.ParagraphHorizontalAlignment.justify,
+                verticalAlignment: PowerPoint.TextVerticalAlignment.middle
+              }
+            });
+            await context.sync();
+          });
+        }
+
+        async function tableTextRuns() {
+          // Specifies the text runs of the cells in a table.
+          await PowerPoint.run(async (context) => {
+            const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+            // Add a table, specifying text runs.
+            shapes.addTable(3, 4, {
+              specificCellProperties: [
+                [
+                  { text: "Title text", font: { bold: true } },
+                  { text: "Title text", font: { bold: true } },
+                  { text: "Title text", font: { bold: true } },
+                  { text: "Title text", font: { bold: true } }
+                ],
+                [
+                  { text: "Bold text", font: { bold: true } },
+                  {
+                    textRuns: [
+                      { text: "Text runs with " },
+                      { text: "Underlined text", font: { underline: PowerPoint.ShapeFontUnderlineStyle.double } },
+                      { text: " and plain text" }
+                    ]
+                  },
+                  { text: "Italicized text", font: { italic: true } },
+                  { text: "Plain text" }
+                ],
+                [
+                  { text: "Bold text", font: { bold: true } },
+                  { text: "Underlined text", font: { underline: PowerPoint.ShapeFontUnderlineStyle.dotted } },
+                  {
+                    font: { bold: true },
+                    textRuns: [
+                      { text: "Text runs with " },
+                      { text: "italicized text", font: { italic: true } },
+                      { text: " and (inherited) bold text" }
+                    ]
+                  },
+                  { text: "Italicized text", font: { italic: true } }
+                ]
+              ]
+            });
+            await context.sync();
+          });
+        }
+
+        async function getTableFromShape() {
+          // Gets the table from a shape.
+          await PowerPoint.run(async (context) => {
+            const shapes = context.presentation.getSelectedShapes();
+            const shapeCount = shapes.getCount();
+            shapes.load("items");
+            await context.sync();
+
+            if (shapeCount.value > 0) {
+              const shape = shapes.getItemAt(0);
+              shape.load("type");
+              await context.sync();
+
+              // The shape type can indicate whether the shape is a table.
+              const isTable = shape.type === PowerPoint.ShapeType.table;
+
+              if (isTable) {
+                // Get the Table object for the Shape which is a table.
+                const table = shape.getTable();
+                table.load();
+                await context.sync();
+
+                // Get the Table row and column count.
+                console.log("Table RowCount: " + table.rowCount + " and columnCount: " + table.columnCount);
+              } else console.log("Selected shape isn't table.");
+            } else console.log("No shape selected.");
+          });
+        }
+
+        async function updateTableValues() {
+          // Updates a table's values.
+          await PowerPoint.run(async (context) => {
+            const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+            // Add a table (which is a type of Shape).
+            const shape = shapes.addTable(4, 3);
+            let table = shape.getTable();
+            table.load();
+            await context.sync();
+
+            // Update values in the table.
+            for (let rowIndex = 0; rowIndex < table.rowCount; rowIndex++) {
+              for (let columnIndex = 0; columnIndex < table.columnCount; columnIndex++) {
+                const cell = table.getCellOrNullObject(rowIndex, columnIndex);
+                cell.text = generateRandomString();
+              }
+            }
+
+            await context.sync();
+          });
+        }
+
+        function generateRandomString(length: number = 5): string {
+          // Generates a random string.
+          const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+          let result = "";
+
+          while (result.length < length) {
+            const randomIndex = Math.floor(Math.random() * characters.length);
+            result += characters.charAt(randomIndex);
+          }
+
+          return result;
+        }
+
+        async function setup() {
+          await PowerPoint.run(async (context) => {
+            // Adds a new slide with some content.
+            const slideCountResult = context.presentation.slides.getCount();
+            context.presentation.slides.add();
+            await context.sync();
+
+            const newSlide = context.presentation.slides.getItemAt(slideCountResult.value);
+            newSlide.load("id");
+            newSlide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.hexagon);
+            await context.sync();
+
+            console.log(`Added slide - ID: ${newSlide.id}`);
+
+            // Switch to the new slide.
+            context.presentation.setSelectedSlides([newSlide.id]);
+            await context.sync();
+          });
+        }
+
+        // Default helper for invoking an action and handling errors.
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            <p>This sample shows how to add and modify tables.</p>
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+            <h3>Set up</h3>
+            <button id="setup" class="ms-Button">
+                <span class="ms-Button-label">Set up</span>
+          </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <button id="add-basic-table" class="ms-Button">
+                <span class="ms-Button-label">Add basic table</span>
+          </button>
+            <button id="table-width-height" class="ms-Button">
+                <span class="ms-Button-label">Set width and height</span>
+            </button>
+            <button id="table-column-widths-row-heights" class="ms-Button">
+                <span class="ms-Button-label">Set column widths and row heights</span>
+            </button>
+            <button id="table-values" class="ms-Button">
+                <span class="ms-Button-label">Set table values</span>
+            </button>
+            <button id="table-merge-areas" class="ms-Button">
+                <span class="ms-Button-label">Add table with merge areas</span>
+            </button>
+            <button id="table-cell-fill-font" class="ms-Button">
+                <span class="ms-Button-label">Set cell fill and font</span>
+            </button>
+            <button id="table-borders" class="ms-Button">
+                <span class="ms-Button-label">Set table borders</span>
+            </button>
+            <button id="table-indent-margin" class="ms-Button">
+                <span class="ms-Button-label">Set table indents and margins</span>
+            </button>
+            <button id="table-cell-alignment" class="ms-Button">
+                <span class="ms-Button-label">Set horizontal and vertical alignments</span>
+            </button>
+            <button id="table-text-runs" class="ms-Button">
+                <span class="ms-Button-label">Set text runs</span>
+            </button>
+            <button id="table-from-shape" class="ms-Button">
+                <span class="ms-Button-label">Get selected table and log to console</span>
+            </button>
+            <button id="update-table-values" class="ms-Button">
+                <span class="ms-Button-label">Update values in table</span>
+            </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
+    office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css
+
+    core-js@2.4.1/client/core.min.js
+    @types/core-js
diff --git a/samples/powerpoint/shapes/binding-to-shapes.yaml b/samples/powerpoint/shapes/binding-to-shapes.yaml
new file mode 100644
index 000000000..7eec3ed7b
--- /dev/null
+++ b/samples/powerpoint/shapes/binding-to-shapes.yaml
@@ -0,0 +1,370 @@
+order: 5
+id: powerpoint-shapes-binding-to-shapes
+name: Binding to shapes
+description: Shows how to create binding references for images and work with z-order.
+host: POWERPOINT
+api_set:
+    PowerPointApi: '1.8'
+script:
+    content: |
+        document
+          .getElementById("insert-image-and-create-binding")
+          .addEventListener("click", () => tryCatch(insertImageWithBinding));
+        document.getElementById("replace-binding1").addEventListener("click", () =>
+          tryCatch(() => {
+            replaceBinding(1);
+          })
+        );
+        document.getElementById("replace-binding2").addEventListener("click", () =>
+          tryCatch(() => {
+            replaceBinding(2);
+          })
+        );
+        document.getElementById("replace-binding3").addEventListener("click", () =>
+          tryCatch(() => {
+            replaceBinding(3);
+          })
+        );
+        document.getElementById("load-bindings").addEventListener("click", () => tryCatch(loadBindings));
+        document.getElementById("bring-to-front").addEventListener("click", () => tryCatch(bringToFront));
+        document.getElementById("bring-forward").addEventListener("click", () => tryCatch(bringForward));
+        document.getElementById("send-backward").addEventListener("click", () => tryCatch(sendBackward));
+        document.getElementById("send-to-back").addEventListener("click", () => tryCatch(sendToBack));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+
+        const flowerImage = getImageAsBase64String();
+
+        const greenery1 = returnGreenery1AsBase64();
+
+        const greenery2 = returnGreenery2AsBase64();
+
+        const greenery3 = returnGreenery3AsBase64();
+
+        async function insertImageWithBinding() {
+          // Inserts an image with binding.
+          await PowerPoint.run(async (context) => {
+            const bindingId = (document.getElementById("temp-binding-id") as HTMLInputElement).value;
+            const slide = context.presentation.getSelectedSlides().getItemAt(0);
+            const myShape = slide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.rectangle, {
+              top: 100,
+              left: 30,
+              width: 200,
+              height: 200
+            });
+
+            myShape.fill.setImage(flowerImage);
+            context.presentation.bindings.add(myShape, PowerPoint.BindingType.shape, bindingId);
+            await context.sync();
+
+            const bindingsDropdown = document.getElementById("bindings-dropdown") as HTMLSelectElement;
+
+            const option = new Option(`Binding ${bindingId}`, bindingId);
+
+            // When a binding ID already exists, the binding is updated to refer to the new shape
+            // so select the existing item rather than add a new one.
+            const foundIndex = findDropdownItem(bindingsDropdown, option.text);
+            if (foundIndex < 0) {
+              bindingsDropdown.add(option);
+              bindingsDropdown.selectedIndex = bindingsDropdown.options.length - 1;
+            } else {
+              bindingsDropdown.selectedIndex = foundIndex;
+            }
+          });
+        }
+
+        async function replaceBinding(greenery) {
+          // Update image in binding with selected replacement image.
+          await PowerPoint.run(async (context) => {
+            if (greenery === 1)
+              context.presentation.bindings
+                .getItem((document.getElementById("bindings-dropdown") as HTMLSelectElement).value)
+                .getShape()
+                .fill.setImage(greenery1);
+            else if (greenery === 2)
+              context.presentation.bindings
+                .getItem((document.getElementById("bindings-dropdown") as HTMLSelectElement).value)
+                .getShape()
+                .fill.setImage(greenery2);
+            else
+              context.presentation.bindings
+                .getItem((document.getElementById("bindings-dropdown") as HTMLSelectElement).value)
+                .getShape()
+                .fill.setImage(greenery3);
+
+            await context.sync();
+          });
+        }
+
+        async function getShapeForBindingId(bindingId: string): Promise<PowerPoint.Shape | undefined> {
+          // Gets shape associated with binding ID.
+          return PowerPoint.run(async (context) => {
+            const binding = context.presentation.bindings.getItem(bindingId);
+            const shape = binding.getShape();
+            return shape;
+          });
+        }
+
+        async function loadBindings() {
+          // Loads bindings.
+          await PowerPoint.run(async (context) => {
+            const bindings = context.presentation.bindings;
+            bindings.load("items");
+            await context.sync();
+
+            const bindingCount = bindings.items.length;
+            if (bindingCount === 0) {
+              console.log(`There are no bindings.`);
+            } else if (bindingCount === 1) {
+              console.log("There's 1 binding.");
+            } else {
+              console.log(`There are ${bindingCount} bindings.`);
+            }
+
+            bindings.items.forEach((binding) => {
+              getShapeForBindingId(binding.id).then((shape) => {
+                if (shape) {
+                  console.log(`Binding ID: ${binding.id} refers to shape ID ${shape.id}`);
+                } else {
+                  console.log(`Binding ID: ${binding.id} doesn't refers to shape.`);
+                }
+              });
+            });
+
+            populateBindingsDropdown(bindings.items);
+          });
+        }
+
+        function findDropdownItem(dropdown: HTMLSelectElement, text: string): number {
+          // Finds dropdown items.
+          for (let index = 0; index < dropdown.options.length; ++index) {
+            if (dropdown.options[index].text === text) {
+              return index;
+            }
+          }
+
+          return -1;
+        }
+
+        async function populateBindingsDropdown(bindings: PowerPoint.Binding[]) {
+          // Populates bindings dropdown list.
+          const bindingsDropdown = document.getElementById("bindings-dropdown") as HTMLSelectElement;
+          bindingsDropdown.options.length = 0;
+          bindings.forEach((binding) => {
+            const option = new Option(`Binding ${binding.id}`, binding.id);
+            bindingsDropdown.add(option);
+          });
+
+          bindingsDropdown.selectedIndex = 0;
+        }
+
+        function bringToFront() {
+          // Brings the shape to the front.
+          changeZOrder(PowerPoint.ShapeZOrder.bringToFront);
+        }
+
+        function bringForward() {
+          // Brings the shape forward.
+          changeZOrder(PowerPoint.ShapeZOrder.bringForward);
+        }
+
+        function sendBackward() {
+          // Sends the shape backward.
+          changeZOrder(PowerPoint.ShapeZOrder.sendBackward);
+        }
+
+        function sendToBack() {
+          // Sends the shape to the back.
+          changeZOrder(PowerPoint.ShapeZOrder.sendToBack);
+        }
+
+        async function changeZOrder(operation: PowerPoint.ShapeZOrder) {
+          // Changes the z-order position of the selected shapes.
+          return PowerPoint.run(async (context) => {
+            const selectedShapes = context.presentation.getSelectedShapes();
+            selectedShapes.load();
+            await context.sync();
+
+            if (selectedShapes.items.length === 0) {
+              console.log("No shapes are selected.");
+            } else {
+              let direction = 1; // Start with bottom-most (lowest number).
+
+              // Start with top-most when sending to back or bringing forward.
+
+              switch (operation) {
+                case PowerPoint.ShapeZOrder.bringForward:
+
+                case PowerPoint.ShapeZOrder.sendToBack:
+                  direction = -1; // Reverse direction.
+
+                  break;
+              }
+
+              // Change the z-order position for each of the selected shapes,
+
+              // starting with the bottom-most when bringing to front or sending backward,
+
+              // or top-most when sending to back or bringing forward,
+
+              // so the selected shapes retain their relative z-order positions after they're changed.
+
+              selectedShapes.items
+                .sort((a, b) => (a.zOrderPosition - b.zOrderPosition) * direction)
+                .forEach((shape) => {
+                  try {
+                    const originalZOrderPosition = shape.zOrderPosition;
+                    shape.setZOrder(operation);
+
+                    console.log(`Changed z-order of shape ${shape.id}.`);
+                  } catch (err) {
+                    console.log(`Unable to change z-order of shape ${shape.id}. ${err.message}`);
+                  }
+                });
+
+              await context.sync();
+            }
+          });
+        }
+
+        function logSelectedShapesZOrder(selectedShapes: PowerPoint.ShapeScopedCollection) {
+          // Logs the z-order position of the selected shapes.
+          console.log(`Selected shapes:`);
+
+          selectedShapes.items.forEach((shape, index) => {
+            console.log(`  [${index}] shape ID ${shape.id}, z-order position: ${shape.zOrderPosition}`);
+          });
+        }
+
+        function getImageAsBase64String() {
+          // A production add-in code could get an image from an
+
+          // online source and pass it to a library function that
+
+          // converts to Base64.
+
+          return "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";
+        }
+
+        function returnGreenery1AsBase64() {
+          return "/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCACmAPoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD4r0LWZNPM1xavBbwt92IyAEKechjxz71m+IfEdnrslvZ20jPbli1y6HKrgcfNj5ueT2roPGfhvT7PVbKGEwgzITLGEVoyM/KcevUcVwfiq2ks7q8stHlKW9vGu4RgDjHzrnrwTXxOEp0sTUVeO717eWvfyPy3BRoYmpGtHSTV1fS3TXu76r7yTRtdfRQ3miSeF8usinkZ/Qg12GheJ9Pmt5bh5GshHhmt2Ybs/Q+vtXjtrpdxezRW8RJVQWlUOQFHbPv7V19gjwrsvbN55HXakluQRIRxyDyPevQxmDo1N3q+3+R6uOwNGSvf3n2/y/rv3INY+IFyb++NrG0LStnfO4JVccYFQ+E7RdYiMU05ESEzyscFvLAxxnqc547ZrO8ReEbuzuhLeHy57gFlTH3SOikfTvUHgQzSa2IjxEsbl3IzsU8Nj3PQD1xXeqdKGHbpaWX5Ho+xoLCSnhmlZb+mn/DHrQ8OXd9ZyJokOywjTJ3XRVk9wxOM+2MVxl3pt/p95LCLSKUFQ7XE0wVTn1J6nr0r07wLqvkK9uIJzDAOhYZdX459MYzXRal4Wt9QWSGfTY4EhkEjJOgLOjgcq38OeDwT1r5OWZfVqrhON1/Wu58NHM54OtKnVjePfr89df8Ag6nzp/ZNzDqkMt7AUt5ZRuuY3/dL327lPB4711HiTUJdQ1AIhS3s7RRBCLUAPIwUZJYdcE9a0vFWu2GmafLounuXEkmCVOTsDZXdjue31PrXPWvi3T7a5awuUjgaNjsl5KcgblJ7HI+nNfRxlOvFVeXVbenc+ojUq4qMa3s9Ve3pprb8D0bR/E5014bTULOaN7hcTgKPlcDhgc459OvNbGu6lZahFGt3KqI6qltGCPMfb1Zh2HJ/xrzi5+I2nFGtriCS8mPLtblWT2OcjBrn5dS0/XLiBVsJLUKxWOK3AZnyf4jxz7CvGhlsnP2jTj6ao8KOUSqT9rOLh5rX7tb+XoaPjO+tv7T0yK2+extxtll2h0c78/L7qDUms6PJZaexZEuLcgusgcEue2fQms/Ubae8SC1gt4IfJZtsMlwu+RiR97HA6AAf41es9Q1G3igtL+yluZ2iIaOaLYE5PJZsdBj/ABr15c0YQ5Htvqe3yyp06fI17t7q+r63/rQ43TdW+wmZriyYxsy7AeGBwc1JquurcQFI4GUMMbmIH8q3Nb8KX0ljLfWvl39tGTLcLESDCCcAjPUAnkjirsXw4+2abPJ5riaNgoDg/NkdQoH3fcmu1VaLtUbPSeKwiarTfW3XyOR017jy0jsvN3S9Ah+8f5V6B4O0eTULQubmO5v4JCDzu8sEdRngntntj3rktF0AeHbtl1ZTEZg0cb9k6ZbA7HkfjW3tl0aRLy2kMSoeJ4jkY+ornxl6icKbs3s7bnPjpKteFF77O2/lf8D2HwE8mmX0kl5IX2golw6hgePmQ/hz9Kk8eahZJpr3EUFhJNOY/LtrcsVkPR+vUAEnd61wcXiXU45wkixToMNMgTAmHbBB44IOap6l8QE06RDHpEqRStxvlEjyMvRSxGQBnoPWvkY4GvKsprXyTsv6/rTp8THLa1TEKqld9k0lp9z+5fd04zxN4LvdU8US3Lb1t7qMXIdl+YDO3bjvgjGa6zwh8LrXUtHldbSG8WMMWaVT5jY9gciotY1XXNfe31GG2ZJ7SMr5UBz5aEkhdvU9ST9as+EviKtjBOn2eYXOCQsKsQSevT+R/Cvoa9XF+yj7JXtbRH0uJrY+eFUaL1jZWT29bfn+BxGo+HJNH1py0UsNrtGxlO7bIRwp/H1rd0DX2sbFbLUomubdP9XIOXUHsR3HWtdPEMGsSTFbCazkZsyzzAoT8wYkKKyPE2mWj5eCUv5gDRyZIwM8rn3rf2n1iKp11r/Wp0Os8Ry0cTGz019Ov9P5HQ6F4njtVP2UfatJaQiSMKVaKRcHKj3z0rtv+FoaFqEEyXD3UMTg/IysMk8kew9hXlOhSjwzYPIYDP577Vt2Y8kDls9e+K39c+G9/r4tWGotb7ufsyw5SNz1+YHJx0yR2rxMRhMK616zsuj799LP7/1PDxeCwU6ydeTiukr7230Sevnp95neLfFRiUy6cvl6ZApUrdDcJHZuw6r+HvWbB4i8SXGnvHFK9vDIQ8flSNvjUdAD3Hsa7PTPApvwbQRrc2sEeXt2mEpf1OMcdCSQScVS8X6ReeHdNuUsrNbSW1jV45PLL7lyBjDE888V0U6+HbjRjFN93/W510cThbxw8Ipyvu/1877779jBubfVNXtP7Q1W/v70XGQbbdtR9pwCccBc54A5Ndd4Z0SK3stM1Gx8vzEkElwGZVbdnDISegxwPwrirPxzf2UPlXO2/sTzG7Ha6dyM4x1zwRVnRtbtdZvZ7O7RbNZcPFJI+A3+y3b0IrTE0K8qbW0V22t2tpt+hricPiZU3FpKK7bW2tbTZfkez+Ib7+0bN7WR5pSysQJBsQKR/Ge5FcQukuAANRlA98ZrldfifT3WCW9mIRN0dsk5JPpgZ4HSugtPCkL2kLTWKtMUUuSE5bHPXnr68149PCxw1NN1NH5f8E8OlhIYOkrVNH5L9WZOta0upazGtjOY7WJDuu5FzIcLjIz0AAAH4158NQn1Fo7W2DmSZhuc8E4OeP55ru/FPh5dOtUIhd7K4cRsAwRxkZHI6j2xXEQaLqVh4gJit5bkW4D8Db8jDj2BINfVYF0lSvT7aX8v+D/wD67L/Yeybg1otL+Xf5v07Gp4atrjRbq5liMVyHbewGV8scjdkjnr0r0fTLFp4mnW0SKUnbE/+syeucD7o5zXJ3Piu2sLqDzNOfeqhBGIxtdh6nPXpxXpdnrkUujW17DcRxQ7fNZVUbkZh83OfvZ4wfQYrycZ7ao+eUP+CeFmlWs+Wo4ay6/pp/kcnqngXVfEczxX+ohtQijwsyxbYUZuVJ53HPTpx6VxnhJo/Bt2RPbi8MqkTyKeY8McbfXpznrmu18TeNleBodLuA97d4WSQoxaBADkkkDLEk8YwPwrhpNct9KY6RcWv214CUaeFtrHk4zkHP8AOu/Dxq1KHs6kd+mx24FYqpQlSqx91291Kzt1fTS+y/p9rL4w0tJUubO5njuYhkRRxMCw6kHtj68VtWfjbSJ7NryTUJkljTMdihdFz3ATJAJ6cHFeMS+JUtrxJLSE2vltkyO3mNjpgjgYPcV02leJNMmhMkmnzyPjpaFWUt2+8QV/EHFcuIyuHKtH96+70FiMojGCfLL71f022+Zi6vZXOm3ga2gDS3aecrngQbiflHbI7Gtj4R+C77U/HluslrDttozKy3v3GB+UEepyc1T0vxEt54pU3bxxOclNrZSFtu1FB9h39Sa9En0c6e8TQNM16pLqyzEfKRzt2nqM812YnGSw9qU1rJbnVjcXVoUnh5K0px3/AKfT/gj/ABX8PUuvFgiM1tHvhbz0xhwR9xmA5UZJGT+tZ+s/D0eArC21mW5jdEmEcu1uY0YEb1GOT7de9aXh6/0jwjoOsXGoXkstxdM5nkkYvM/zY5J+9j/GvNPEGtxavrbWtlfXM2lrEWZXkYx8f3VJ4PGPrV01Opon7q303PKwUMVWn7JTfs4aNuOkklr6PXTfp6HS6ZYJY6zFKMfccxuOgbadpB/l+Fb0miCSxntrhi3m4kEclyFORljng4OO3HWuT8OSy2mn2MgRpYxclzCxzhFxhQe3LE/lXTweJ7bSklhtdhklkVy1/GAobOf9Zuzn2715OKhV51ya2/R/gXiY1ef3Hdr9H+BT13UbXw/okSRGV4byIAwEZK5O1yT3GBx659qpad4qs9PvxJDqX2nzioMRQuenOBkEHj6YrT1/+zv7Evbi/wBWS6uZlL+QAHMj9toU/Lj17CvPhpU+lRxNHJukWTLkttLrnIOfTaR0rsw9OnXpNT3/AD/D+vy6cJRo4ik1O9238/vXTv8A0rHijULi8m89FkkswWbY4+bk9QaxIruG5LW8n7kyYZJGOBn0btg+vY12Ws7bzS0iAmyF587CIuB13d/oK5m70My+UXKWibNyu+SzZ6DA7e9enQqxlCz0PZwlSn7NRatb+vmd34R1u2Wyay1KG5F5DGVjeGBpd6jpnHQjpnp0rldR8QzXniGOERTWOnorwqjDDoepkb3yOcdAMV2vg/wxPp+jJFcFhMzEurAkKTgKM5/QevGar3/htItYjnmmbEcZEweElSuCGbd14BHboK8iFfDqtNRV9/v8l0PDp18LDE1Gle97evkvP+tC7pkxstJihiktbiJ5FL3Mb7WwO5PrmsC1ijv2+wmVJI2uXjkkg+VWIkIDY+mKwNSbS7SW4jto5opo3KyPJlEjI68HkmrnhiG4tY7u8yTmQCNAeC+ASx9OMfn7V0qk4U3OUtel1Z/1qdCwvs4Sqp6vXVW1/Huemw6Jc6WIPsEVu1sWCiCRQQRn+8ecnqTmsbUPDt7qP2m1mnh1KBi2bTytmEzn5HwPmA598d66/wAJ6v8A2tp0T3BSAxu0cjHP7skgh+PYEA9snpWr4o1vS10yERXMdzrNumxWtmLpI2MKzNztA98kgV8lHFVqNdLlvK+r/W/6nyEcVXpVuTlvK+9vxv8ArdPzPF9K0E2OlxxtHJLcIWES54Vd5IdvUt6ele1eGHF7aFVOLeaFGjniHzEYy/PY7sL7AmvLpfE9rYXk9hrDLZajCQZJo1Lwy5UEOpHIyDnGKqaZ4ldbu5jXUHttPcjyJUjx5X+1jqM8816eLw9fGRcmrdVu079rf1uerjsNXx8XKSt1Ts2nftbf/K/U9Q8b6raeH7CxuYLdre4uAVEKcs0gGGLN0AGeT3q3rN3Za1olvE16/wAtrmaGA7iG28OMZxg459q4e+umvLG7lk1WPWpfsrRJCkisX3dPlHQZ5JOOleY6pr2vW9otjJqdz5boQYQdjIueA2OcegPpWOHwEsTGKUknF+f4af13OLB5O8TGCjO0ovd369rq+nn9/Q72f4a6ddalLdxO2ovJEDOqkptYD5uFPJ747VxN14fNhcva3jNG8aExSgZ3r/CpGc57A1L4A1LWLYXEllcF3gmWQ2R6SAggse/sce1bmp+K5tTkP9rWqw3TSFLaCOHK5xnJc/Svej9YoVXBy5kkvVfI+lisZhqzpSnzxSXqvl6fKxW8N+Ho9K1CzvHileWNt86sRg8fdA9Rwc+or0VNR8NMoLO4YjJDQNkH34rgLb4g292oS4s5be5fg/Z9pQn2BIxVeXV70SOBZXwGT1OD/KvMxGFrYmd69015o4sThK+LneveLXZo6dbO+8X3C3d7ssLG2VViso23ygn7oIOOSBnPYYrX/wCEHls7i0nS6mt4ZMlldP3jOP4jt6/j04AottYsn1G5khiQW28yyyQH5o2B6lScj7wGPfjNdvN4n0/WI1ms7qGKVV2/ZmyNx24AYHJH1Ga8jE4itSahCNo9u3rufO4nE4mk4xpwtHtbb8+vfU8c8fpJGczYLRSiJ5O8yEHDZPJIxwevNa3hvTr+W2ihtd5slhVri4RdoLYyxOPTGMe3vR8RLRb3xBBbF4biWWJ/NiiPCFsBeexGOD1rofhwsUGkW6xvJcPFCIZPLX5hICdzbe4J59xXp18TKGBhUitT06uIcMvhJLXt69fw09TMu/BV3dSEC7u0aMbt0tson2ngAFsgqT35x6c1wXibwPL4dtTqEUNxc2zMyyTy8vHJxyw6EcivXpvFmj6LcxSyX73Cl2PlRyO6hiAOcjIRcZxycn0rzvx94rudYRo4YWhsplZ4o24aYAjcfYnAAFVl2IxM6qUlaL+X9dzTLMRjZVoxtaD3urf13/pnHL4TjsdLJuw7TSIHDRsAqg8g992e/Su8s9CjksDAqx7EjAe2UBVC4wSfXnv7V53pU2vGGe6LPFpzOSN8Xmp7YB6DpzxXTar4ytp9OitLu1u74yKGXZLsiU56gdTg/wAJr1sVTxE5JRd9enT5Oy/E+gxlPE1JKKlza626bd7LT1ONt9I8zXoI3Gx1QSyIRjzNoJyD05wPzNd9b/EAvA9vqNodOhABee337s5Hpyo/OqNvB9r1K2e3tobWe3iVzPMS+0MTgYB5PPQe/pWT4v0rVLlonE4u7dmJEcZEaqw65yB68Z960qezxc4xraWXfZ+XT7zWo6eNqQhW0su+3p027lzxnJpGsR2aac0kxDs8mAQqAjpk8kk8/h71yPh6WPT9ekjvSzW5V4WMXJyORx35FSR6lqunXPlfZY4pz8ynbkY9Rzg/WptJ0cTs804MjiUHcp6HruJFehThGhS5G9PXU9OlTWGoOlKV4201u9TrbXxfY6TbyIv2S8gY5Ub2V0PqMDntwfSubk8VXOsyOpigSFH3fZQMK46ZJJyT+PGeKoa1EtpdSL9nUEqZBhiP0rHtM3LmUxgqhHyjofaqpYeklzpasMPgqKi6qWr6s7fSL2yWdFeyuGZjgxJIrgDuQcema6rVNJt9St5fsyvbxPtijhILKmQNpbOOff3NcMNRtoJIri3w0u4ERjKsvr/+uut1DxANP015bbUZZFkGUiUrvLdhgDIx3NeViY1OeLp6X/rzPHxVKp7SEqSab73/AOCcjfaVd2QtLS5uZptPWVkMcoxtdeqk9+351t2Gu2slisWoxnzo1CeYF3bgBgAjqD2rC1jVbvWYYllYwRgt+6Q9iBlm75PH5VjXLXUY2rKSqEAMR82ewzXqex9rBKej8j1Vh3iIJVWk/L1/q56/4a1q+8Q6WyWF39nkgby2Mqhm2DlT6H2OMjnmsbxR481Cz1F7G4ujMrRCN47aEIzg9ULEk898evSuW0nVpykk0ZubS4jXDSWZxuz26jGeeKu6boUs8SatNDcElmWGJGH8J5YsR6k/U5NeZHB06FSVSVrdFZXv6nkrA0aFWVSqlborK935/wBWKGseHNQ1iS+1Iqt1chw0kMGWZVHHYYOAAMZzXR+HtetNLtZ4riIvbyv5sc8Xzbc8FSPwH0xXoGgaFE3hQfZ76Swm8kOm3O1+AzdOSckZP+FeQ+LtJu7XV9TuoHRELeeYoyVYoR98L0weTjqKVOvDH3oT6CoYqGZOWFnoo7dO39dezNu/8TWn2mB9Ne4FzE2U+UovP45OfSugs/iVbGB4JtGmlvJOoglz5je+eR+tecaF4ckvLl4Lq5MEuwzvsXzDGgGctz15HHvW4nhnUbu0l/s66vppQNqmWMqh9cMMnOO1OvhsI7Qm7266/muhpiMHg9Kc3e3Vtr8V0MnxHqxv9buLqWzimllKl3UtsB24IGPTGPwqxpuv2XkLDf74GRdqzRpuVl7BgOQR681ly+Fb/SLaS8EscghGZY1yRjofY1Z8ItFf6vBJcRwpEN3lq4+V3A4zk9M9q9GUaXsm46qPbyPUnTo+w9x3jFdPJf15HoXhDRNPvYdRewYyRh41muJkMfUZ2qOp6g89eK6DVPA8hupDeBX2ERZuI0LKSDtYHuOOQe1ZXgy7m03Uru0kulgmmfeUmGGORyVzwc45B9BirvxDv7kW+nWtxfu8st2kSlMLuT3A6dByfevkKk60sZaL0f5W9D4atKvLGqEJaPru7WWu3kcwfh/dpqVjfxTCzuvm3CzDRiRcE7VI79u2aW78OzawTdte3EkkB8uMLJxEw7jPUngmvYb65gOhLaveLBOzOoTb++j4IUKByD7ivPNY1/TNIuhayXb3QkiWQz2sQdWZuHAPqCvJFLD5hicTqlqvLoLC5lisU9F7y0WnS/p/XoeR6tduk00M9oEnGcTI2Ebnrj/A1SW9vFUAXk4AGABK2B+tdj42n0qSKO306AeaJN7NzhVAOVPueOBXCgsR1A9q+3oNVKadrep+hYSSrUlJxt5M9W1G0m0fxtFcwoklzJZLvgzhbggEMvqCcAirWseOU8QWK2+naVJpZZNk0kk2T7jIA/M9KyrK5jnlk17UpjLFK29TNIvmMBwAFB68dB0qh4c126uLPVGZwCs4jVSoLxoSWwDjPYDPtXgqhFpVKkbygkr6r/h7eZ8v9WU0pzjeVNJXu0r7W87ef/AM+/1O4sz5dq8NuvB3lmZ39RuIHB9vzrcm8cWkbM0cFzaXAO5REV2KeuVbOcfhWze6BNc2xifUBIzKA8U6F4lJGdu48g+4FZ0XhoSWccel+U80PAFzCjrIw6jPOMn8K1WIw1RLm3Xr+Lsa+3wtWK51qvX8Xb/P1G6d8Q4J2cXulxXE2Mh45RErt+II/Kqflal4l1I3csGxIVBVchY40B4UEn3/ABJrKh0yxuJrO8uytsJHeIxuT5W/blfoM8EdORXYaLaSWM8qXAa4inTHlH5QSoJUKeg747c0Vo0sLedGNm1/w9tSq6o4W86MbSa637621t+XQ2dN0A3N3cyiTyraNQ0JtSJNo4CqRxxtri9U8K3XnyafAksF1/rYTGflmVum3Iyv59jXoA8R3uj2s80WnRtCISxZn2M4HPz9QOnbrx0zXm958R7q6v42haR7yfASdo9ghUcgIvOcc4z69K4cveIqTlLTl0/r/h/kcGAWMqTlKCVlbr27/jv8tTa8IabJpjLburXsqw5Oz5RIVJ2qvc/ePPoK7bULKzvLaX7dDBZ2dud0hdAPOXAywOMjB4+pry6PxpqN55UbWdq05YBJBlMnPHQ49q3bjxTYvYNKbW4k1XGwC4+cJgYGWPUD0xRicLiJ1VN7+X5/0tAxeDxE6qqS3fb8/L1tp9xj6pf6XI1tp0K7reNpJXlOCyDbwue/QEirPhieyvbCRLZlk8tvncsU2KTnGcVxOrEafN9njHlxhEaTdyWOAdv0z2p2lR2eoukQmNtLKwQpg4Gepz0xXuzwqnStdn0UsHF0NJO2/fzuzsNTjtNb1BvIt0CRghrhzlZBxkD2HPNeexy/Y5mEQBjYn5G6EZODXpFpaPIJbaxWGysohtcsm8sBxubPJJ9Bgc1leKfApuSstnI67F3yCdcYTuQQScDk4P51GHr0qX7qT0IweJpUZexnLR7X/U5G3uWecTxqo8skMnUe9aV9qUU0UcUEbxzONhdyBgn0I68d6YnhVoVaW3vo7gr12ZXHvg84pv8AZMt24kk3zkcbnbhfX6Yrvbpyd7nqylRnJST2LWiQx2txMLlWOE8xmBzuA4A+ua6zStBsdUtPtV5ZKqzFvKghkZPlHG5jnk5Bx06GsDT9LuIWkmnnVbAYj+Y7mJ4OFA6/j2NeneELPEtmjpvulgRUhZMqoZ8IWB6n5s47cV5GOr+yi5RevkeBmOIdNOcJa+V/69ex5lq0Vz4XuUmsVM1hP8rRSHcVYdiR9eD71Jp/i++Znht1aIqpZra4X5Tk4JHf8RXtv/CNTX8LtZ3CK8bsZprYBUOMBVbgc59q5DXdJtbK6tp5mAdopTNG/wB0EYCOAOm4nGBwcVyUcfTxC5Jx1/rocFHM6GJfsqkLz/q11b8Sp4W8cNp+myQNcQ6a8YYkT58qQN1PBzkdMdDxxWHqfjjTi17NDby6hdShws1woURgjaDjvgdAMDpXMX0usaoRi1hUEbvIjILEepyc4rMs7a7vdSitriNoIy4DLs29Ov1r0aWBowm6vXd6/wBM9alllCMpVpb7tJ/03953GhRt/wAJJdeQm9LpXTnAAVsMGJ6ADHNel6LpljqmhE/aERbKAyM4DHB3nOABnJHPT0rzLwJc22lSvd30jrBNm24XIQEbgcenGK7OLxTpWl3atZao7qSd9vDExG09zuA6fXNeDmNOpUqclNPS2q8jwMzp1KlTkpp6W1SdtN/8jb1Tw3LZXL3z3DJKGj8tJZRNHcq2MLjAA+Xkg9ga8GjTdeX0MNnJNYJPJ5TQADALHAGevb3r3TxPq+mXfh24uZNTS/jeIwpa7iGyeOB1UjqWP51xvhzwlBPBdI0S3UFgxiSN/usSSSxx17d6MvxDw9GU61+i2t/W48sxX1ajOpWT3S2tt9z6/i/Q4fQ7i6a8Wxa2a7aRz8jthkx1O7sAOufSuxvfDwuYzClq1vEp8xLhJCQjY6knGRkAZxx2pLnQ7u18U2V7ZxR2x8li8BbBdgCMYPJDDFeg+HNe0DWLX7PqIOkXSoFWKdB8vGDtZsbhke9dGKxcpShOitHvrs/P+vU1zDHyhy16Mbq2ttWn6L+u5w7+L9X8TfY9N1FoY4riPaxhHzzbOfmIPA4JwOuKl1PSbrStLg+yQQhl3sv+jg7UGeF5xkHJ5FUfFviGw0/xjGtpL5s9qU826tFARs5zx64Izjg810Hi3xpZJp9qLS+W5jkQEJvBZXJ+Yk9QMA8Go9jUhOmqVO0Xrbp/Vu/4GLhUg6PsKVoy1tbT+rW36djyPxDc3trcSQShg7OJneQ5aTPIJHb6Vn+eh62/Ps9XL7UbjxHqM1y6dPljUdNo6cnr3OferS+FdTKgm2jyR3lXNfWxlCnFKbsz7aMoUYRjVsn11LcVteTW/wBofRvJ8pf3kwiZe3JwTx9RW54S0EaYt2TvlMu0NFn7+4blVvoMMSOeQPWu5s9NLadJJazLNgbYvOUFcdd27suO3v71gv4t0nwvf3CqouWlw0iL/wAsnAxkMMgAjGVI7Cvl/rtTFKdKlHX5+X3Hyjx1TFRnSox17K/S299jsLc3C6TI5SCxuHwsl0+5iFA/gUA8t69se9UdUnj8OyQypA0l1dkCFY12RvMEU5OcYBJ546j3rlLv4m3lzeJ5NvNDaY/eyW53zp6ZBwOO645qeTXYNRmhur7XEvjarmGNVIYHrsCADBJ6n8zXJHBVYTTnGyfRa/19+x5kcBXg71o6PotfRaf57bHnms3016sDHCQLvj8s8/OfmZj7nj8sVU0e61C6uIXsIpC1s6yZMp8tD268CptbZobZYwBJJJIZG2chCeACR35PFdP4Z02GPTpIYRnyJSZ8DkggAOfxyPavqqk40qV7H29SrChh78t+3b5/1qWde1HWtcso4Li4to7IbVYQsqbiTwHweSD6cGlXwVFrLRxpeLELFWUTKpKbs5LZyD6dOmO9d9pvh2G6nR4I7c2ccYkDGJXL4GSST3znirFh4Ys47G6Yec8c67FSNh+6csORwOMH7pHavl3mcKS5Ka5bPou58c80jRjy0fdt2Xf9TwnXUu9LleC5k3hXMMgAG7cOchscg9atx+LriOEmQwXbYwHliPmE+rY4J+tL4ltZNcNxNGBHMkjOyM3DqAFBB9QB0965q1juZZTFGjuQP4Vya+thGNSCclqj7elTp16SdRK63G3V1JPcyyTsXkc7jn1NXNI029knjlgRd7naAW25B4HX1qO90qe0SJp4HjExwjnox7811Wlt9lXT72FUmSI72iI4B6Yb/gOK0qT5Y+6dFesoU1yW108js/CrM1xOBGlxJHGsjKwwsr7hkgf3R6fSuyTSJb8vCYyhmjWZZmCPHLESQSPT0xya86/4SbTrJVniujZzL9wOjbgfTKgg1sabeafrWnPLNrRg25doGk8kIe52DAz1+6Oa+OxFCo5e0s0vRs+AxVCpJ+1s0vRvX8v69BdbuNC0i5jmt44/PsywnkRQI5Om1cdC33hgdjz0rgLC5Or72ijEEQkdzHjhioBUEfr/AMBqj4yZZrpp7QMmmBhFGhJHIHLY7butYul6rJps25CwBOflPIPqK+loYflpLW78z6zCYFxw/MpNya6/l/Wx6rpVrBc6da+STLcQK3mxDlg24nfjvnI/Kup/4Siwing8yxkh1BX86IeWzB2HJAIIPNeNv4ja8kAjgRZGOA6Eqc+pxxmtbTFl1K2WdLiaXUYHJk3yEyLzkMM847exHvXn18Ap61H/AMC/6HlYnLeb3qzsv8/0PWJPHEDWka6UbmG5uiFkhlhAijywLMccMfw69hXj2qeJLu+upJLq5FyxcsFXkSMMgFj6DsOnoK6qTxHqSwstxFbwxKN8175WJAnfHONx6ZxnmuD0nSVu55Z7hnjRMERJjdyeFGeh/kKeBw0KClKSX5/iXluEpUFOpJL8399jqNBtMi+eQmSOyhDsjH5ZZ2IUFvUDPAPHyj1rZ0/StQ1Kz868FsLORisb3GEbcP7mBkDseg7Zqv4ftGtNK1C8FsrtOfLit2yyLt+859SM8DpnJ7CvSbK0ju7CBUtxdXUUXkmNuIYwE3YBHOec7jwxPArjxeKdOT5f+G0/zODGYp05vl11+7RX/E8klgn8Prcq0YuVK/vra5gcOgXksh9umR2zkYrIbxHDMF+zWf2RwwIuSxkZfbGAAPwNet3/AIeS3nmN6zyxzwmUxSSZMUmcKcjpnHtwTXA+EfDFjqGqXNpGx2REAb2wSPUkV10cTRnTlVmtjtoYyhOlKrUV+W239W+8m8O69519EsiWKy4LIdjZduwCH5Qc+v5V1PgC5a2u9Vgu2uJVwr79u4AkHsep749q4H4ieHrfw9qEYUmBZVO9Uy6I3Qc9Rkc4rQ8L6ze6Zb2moWUplKpseOQkggdUP8x9awxWHjXw7lSektvXfcxxWGhicK6lF6TWl+613PVvEUuiXFk7t5jLKq/vJztWFxgliWxg4zwPWvIfFdzd+LfFVy1nOEt7dzDbqAdp4GcKBnrySa1vEHiX/hJ77SY7m3WytJZmlKSSFsnGAxOBxnIFdV4L0OOa41CW9iwqsEHkqAx4JJPrzXm4dLLKXtKmsrbOztrb+vI8rDR/sml7apdys7J2dru2nRvT7vU8bmt7vQb+Q3HlOZMlt5JVsH3wQQfxrX0iCLXbmy+028Ucc1yq7U6KvGW57nPfpWn8RtEuJrtrlQSLWP5Y5Uw2wnO/34K/SuetbzyFfDAq5VwSeQcY/wDrV9RTqfWKKnHRs+shV+tUI1Y/E106f1/wD1Wz8IzX979lMiRWvlsREka52j+EZHX3NUH8Maejspt52IOCTcDn/wAdqfR9R1uSSaRrhFaxMY+SPLyMeDnPpgg+tdn/AMJ3p38axo3dRZA4PpnvXx9Wri6M7Q970v8Ajp1Ph6tbFUZ2j73+G/42XVNHkH9vWI8MKh1WSe3RiY7PcQT6Ar0H8q865uLwKOPMfoOmTXbR6Fpn2fyrgBk5xLbwYUN7NkFhXOPZR6Fr8aTnfDHKrFvVeob6dK+2oKnFS5NXufoGCdKm5qndt3eqOx023eSS12QmN3z5iP1VuuW9OMYq1qfg5bqSC4mVXiLffXKsOcDtyOa7DwZoscdna3FxcLsZi8pj+cvJk5LY9iMexre1GPQkE8gvYJhBFslRpVVkOclPL7np09a+WrY+pTrNQXl5nxlbM5U8Ry009Ox47r/h6Dw/fQrHITG4YSB/4MdefTBrM0q/kNm97GxS8D+Srxt1G3kkeuPz5q34xtrvWrywkdzH50rQqnYKSCCfXg/pWxYeHdO0oRxg3EkMrD94XAG/oGYEYxz69699VFGjFVXeTPpVVjTw8favmm/0Z2mkadcvBN5OoS2luCjJsPynC8HHcnNc94m+IGrXOot4chud8aICXtoi0kjHOQcfd69sUzXrnWbPTXtra8kmtYQSyWrhTGvcgkZI+lc34ctlWFvs7u0knmkuTh2bZlR7/wAePc15VDCQ96vUakumm3mzyMLhIS5sRWtLsrbPu9DeXSzLo0hh8sAAwtctH+7jYjkbieWA9AcVlaT4f2F/OaI20JLb0IdZGJ4OOMnHY4xXU+ETaMtjDcCMxpJICkxO0s4GxiB2DAA/hXYWunRWtq8lxHZmCR2gKSQgYk4wQqjPGRzWdbGyw7dNLczq46WHcqa1v/X9epwV1otu+muI5ZzcbS62twiGKUAZK4CjacZwf5V55qJGl3w+zs6RSIJY8McgHsSPQ5r3DxNpr2cMUi26NfwK7pBG2PNRR94A5HBz0649q8Z1uxuLqOO43LIuzAKDgIuBx9CeR75r0MtxHtY3k9D08pxHtruT0f8AX9fP5c/cXk9/do8js4DcbjnFdro+p6Xfsv2wi0mPDtglGPrx09x0rkJolghyqliB1H+NUlvXGNxyR3Awa9qpSVWNtvQ+kq4eOJhZaW7HSeM7yBD9ktZPMt1OVk2lRIe7AHnAAwMjmuWiR5XCopdjwABT2zcSFm6n3zium0LR7yNYZY7YyplXYsQoXofmJ6ZHSqvGjCxaccHSUb/eT6F4Ve7cWciyG5f5nCEYh9jwcnpwPXFaWq+FrzQ4ftyS+cIvvSwSBJFHvgnn/PNdLotq2lRN501vE9ypIcyAswJ6jHbrzWvc6B8hJuBCskJRo5o5IiysCFIyo+U9mHHFeDVx8o1d/dPlKuZTVbV+76b/AOXb8zya58W3GrXFul9NJLaRt90gcD1wAB/WtbRdQhs1eC4BaCR/MW5Rd+DjGTjkg8fSsnxJ4Qk0dZHjcyLC224g53RejZxyp9fp61j22LcqTkKR8204JBr2OSnWp+5sfQ+xoYil+6enl/X/AA56baeJ/sM1vaQm2vYbliTCScA47HgqSRiuo8P+I9HQG21CSfRxGd8MjSM4T2DKNw/3en415HYwMwWPymuomO6OWDllP0/mDXZ297dgIC1nqEhXAlmtzuT3Yngn6g14+JwdOStf53s/8vLVHz2MwNK3Knv1Ts/XqvLVGZ4v8TXaeIri3s7l2jlmWdAy4IDDow9SMZ+tdj4H1W0gEtzPPBC6n5oZiFVlJBHJ9Oa8v13T5dN1ISl2kuGlyQ5yxbrn3rZjY65YTRrFb2spQjzLg/u0x159fzxW1fCU6lGMFotNToxOEpVcPCEdI6XaNz4jeI9H8U6SU0y32XbTb5HDYXaCWORjg5xgD3qDwB4fuYLB7tZCfMGRbsMqw7MV/kf51l6DaS/2ddRNbi9AVnH2YFnQ45HTngfpXe+Ctf0+10m1t9bhWGKaFFFzjKALkBT744z7VxYyc8Ph3Soq6T9WzhxTlg8I8Ph02k/VvqeV+JNOli8VQ2NxdSTQTFHzIcFFJ5X0GDn0r0TT/Fc/gjS5oZrR7xAAysHAdBwMEnt0qT4mWfh6bRtQurPUDeXCBZIFYKNhBAODnOCOMd68/vh4l1HSAJLS4ltyu3eW3cY7jrnHrW8YxzCjD2trLRp6a91sdEHDNMPS9qkorRqXu3ejutjqfE/xYj8ReHpNPisVEzrtE0oDFAT83PXtjNebSXPkvGUQPIGDAE8DBqWa2u7G0jkuLKeGA4HmFcA+lUVDSS+Yq4UcYr2qFGlRhyUtj38FgqGEg4UFaN7731PXbHxTBpEpvrO7sZku4t0kF0WUqTz2Gcg56VQf4iWxck2sJOeoibB/Nq5Sw0nWorJytnC8EgLKLkqCD6rkgioPI1w/8u4X/ZFqCB7dK8/6nh3Ju6b9TyY5fhnJtyTfr/kj6Qu/DCXfhloJ7m3uVVQ5ET4VVOfmQED7uOcV4b4l8KTXSi9SZZYFjWMYUqwI4Ge3Pr0r6G161s9A0S51GN2mdY96LMoVVCpjc/zHnOQAo5rym78YaeukHTLGNb+eeIxtKiEIoYc9Rya+WymvXTvBXTfy8z43JsTiIuU6K5lf5Lv6fqeQtdalp2YEvbmBBwI0kZQcdsZ/Sun8Nyapp+kySNpseoQhjLtY/vIyR97PXmmeINFm1DUYvsjRuqRJ5kpbAR++T69Bx3rv9G0u5t7G4nCuSxEU42fuwQP4T6Cvq8XiKUIJyS1Ps8bjaaoRdld7rb8tTzp9f1LxdrFmttaxwvCwKBfuhhz8xPrivVdFsEnSQwsiQBszNIoO4EDCpu6jOR+Vcnp2n2Wn635lmv2q3jcT3gDYUqy4GD9SfbOK6y8+KVrpOnmO3ZoIyvlkLao20e+T7dq8nHe0r8sMNDS39X/Q8XMZTrclLCU9Lfdfvv8AL7xdSe0sEMcyw2LvukjiPDFAo3ZHQHJI2ivJG1C40oxw2bGK884DAPKYPGcdOcV1IurfV5pb681KC4CLgSKQqKPQL2+nWuNmv7eXWZLtiEjeT5Aev+yT+QNduAoOnFxlr39fmelluGdLmjK779r9tTuPC8huNRge8eItcvLbjadqRPtABJ9yevvXoqyXuiSIzz+bBGnzmSLPlgAjdkEHOMAnPIHtXk+mXMNzBKkpWNXkDSxZ+aGXoWx1KEenTj0p2vajaWdo4a9+0ogyIomYhvTrwBXHiME8RVS2Xpf/AIY4sVg5YmsorTpa1/8Ahv6Z3118Q/DV1JHdSSvLdpEFjSJGjTGOFG77qjv1PX1rgdT/ALPlht/sdwrRJ5kk8skZVFYqV2A/xZAH4kVyumy3l8sk8MMh3Md3lwb0HPai9vmcBLx5MI2TG33s/wC70Fejh8BDDO1Nv77nqUMshhp2pyd+ut/wt9xly6mTam38sDHG/uapeXvB6DHapljM8pJU5Yk7QPenXFqbYHcjJnjnI5r3Nj6mPLDRbsv6Tp0ZurdJxnLKzD0GRgH8xXp0CWbwrYymO3ngdl2OdqyZYkNu6E49fQYrzODWbeRFWcMjFdjsq5BHY+x4Fbya4rWgaZo5FVeHkUsp9wRyPoa8zFUpVbang46jVrNXuj0rQdZtNN8Q2CSwJLIUFrJGNrF4iwwQedpGAPcH1rufFGp2jaGsc1nNp0LBYwbiUyO2xtx2qAeDjpkAZrwnwbdw/wBqNd3oCQXYMCt2jHt7g4Nd9rqS6SPtE9+bqR4WSEef5pAYYz1OAOT7nFfK4zBf7RBa/j/w2nnc+OxuCUcRCF9fzfl6Pvcx/Ft3YT6bqOoMrRKbY28e8gGRtoVR7nufYV5Pp1ib28W33ttCl9q9foK1NfW41l5ZnnmuBDwGkJIX6Hp/KsmEXGkzLdQSKWTjcrZ69iPSvrMLR9jS5U9T7bAYb6vQcIy95/hpojudA8MXqWq38MG825YbWYL8vQgnueTXX6VDYzwxtDeW4SUb5EVst7nA5GDxXltn4o1C5WWNLlrK2A3zeUS2c8dD3OcVNodzBLegRxFkjwEaXG4nnHA+nTnrXHiMLUq3lKVrf1qedicDWq80qkrW7Lp5/PY2vFWgzXWs74JIzEqZZ2cKAMn5h6cVNpnhS8vIYN/kraMc+YJAq9cDG7GcDpjiq9up1LSI5pHLSGVhOxPV+q5H+7jH0Nd5qWnpqulWt3ZAOJFUCMdmGAU/A9vQiuatiZ4eMYN+Vzkr4meHhCk35Xt/W/QqPpF7Ja7bZ0smi/1NsJgjgdsepPXJ61l32rX1po/7qyhl3xs8qSJu2SglWJUdM4BweMk16PNotrBGlqYUuImXzzIpCMvyj7znkktngdMVl6t4avnvmndRJaT7GEbABgrYA98j8j+NePQxcZytNJrc8Kljaba9olbfX+vz/U+dfMuZrtIJXkYh+InJAz2GK938IXMNtcjTNSSNlkUSRyngbu6j39K5a88PyQa/cW8scTm2AeSZhlIFzgKu3nOenP8ALNajX2pXMscthdwXTWhMoV4tsw7H2ZcH616+YS+swVNaf59Oh72Z1VjYRhHRW+5vZ7fma/iyHSbC0ubdoBcTTFokkVcGQMPlUjGFPv7etcj4c8D2eo6TLdIhMtvKE8tX2scDO49eOePoaq+N/FV7e3NpJdNAlxG28pCck4HDOCTj0x9ah0jxzLBcwrp0ZN1IMNEQAmOpye470qVDE0sKlB+966f1Yxw+FxdLCfu5e89Xrpp+h6boHh1rjwyZrNY/NBKSQygSPgcAcjkY9B3rmW0+VWIOlSqR2SZ1UfQZ4HtXW+DbyW40xL2VPMbLrKkB2hTzxjI4wQfqK6VNL0REVZNMilkAw0jygsx7k+5rwo4mpTqTg+/9dT5d4yWGrVIz116f8Or/ADPOPF+o61d6VbXOrP5dvIu+OBIxGkrdFwB97k/lXnelQXGpyz20l43lQHaUMuwY7Dis+71nWbqFIbmQoV/dxFkCsR0xn/Cuo0P4dXUVxbMJFla5jJcj+6MltoHU8cZxX2NOlTwlO2i9EfbQo08uoOM5RTd7WWnf8jS8N29ta206X4URMmYlbO4MpPzYA5HJHOKvya9d3uk3sEkot0aYeWrx7mlx1fAOCO2T1966jw94Lj0rTWmkZkikypW4dJpCmMgZ7Cp/DelW11cGOGQxo6bjKBllC8bSfQAfrmvBrYqm5PmV2v8Ahz5itjqMpzqW5rNfh9/bzPJ7mO9a5R4bv7TtBXzFQxvCvfoPlH5isJtLn1C7iW4u5LlN+GdW3LjrjHUH6ivZfE2i3mn3D3GlzpMPuXL2/wAjlc8hhgZAPesPVNPlS4sprW1WbVHl8tnzw6YBIf6cc9ea76OPjNe7b+vyPbwuZppOCWq8tPXRW/rQx08PXDaWojv0jmU7fsfl/uV/2Semfwx71wWpacFu7iGT/RnTgpICSrdxn0r2zRlgs7aIKY5RcSMiJcqUMjY6KR9e5FYup+E10uX7TKZXt2Jaa1kIcs2RwM9j0z2xU4bH++4y+X9f16hhMz9nVlGfXbpf+vP7zz3SrDUr+Ao9tE8KcLdTttH0Vx1+nNFx4fuY7y3hm8kxvIuVQnDLuHfv+dek6ZoVvqjFBpsUSAYjTzHLIOoC84/SqmreGmtgUjVi4kBRMZYn0GOp+ldH1+Lly7f16nQs1i6vKtP69WT2Xhp1twywrKR8qo0oiRcfwoOpx0z/ADrF8U6Al0im42RPu8pDJy+48bC316E9j7V6HJA8drdXstlLdbz5UVshweMcc+nXiuA8cyzaldW8UKm3SJUkImfDF8Y5+n+Nefg8Q609zyMDiKtbEJ3su/8AT/Q87soM3BjYYkXgKfX1Na91YvtRDOlzE3yuqtkDPX6fWrsGlyG+uHnXISQhVH3RnqSR1HP45rrG0J7m3YhJfK2hjG8QK54wRjoPrXrVsXGnJXPpcRjYwkmeUT6ZJCwEilUJwrDB3fiKY1tn5AwUDk89a7nXNPhsYyrRxp9oUAIp43b+o9OhP51jpZm5K7lVtvTI712RrqUVI76eM548xnW2pXNnblFnwpPI2hg31BH6ir1tq9/eXAsyp8llOAqkBDnrk9B2p76Wv9oIsAQlVYOucYbHH41t6JqtlYQyLMAsmRhmGRjHf8f51lVmuXmjG7OetVhy80IXZu+HbG3fw9Cm5hJvbcAPlY+h/UfhVG60i1jimEkcJgEbMHiTbtUrnI4zxnoc1Z8La7ZQXBZ7pXtZCWRNh2bs8/NxjOBx04qj8QNVExiMNyskYnWR4YnBCp2BxxnIzivDpqt9ZcdbPU8GnGs8U6eqT1v/AF9xxMNpf6TcrL9mD5XEkT4IZT1DDP8A+qnfuoZfMtmZYnHzIxy8ffORwcEDBrsdL0WC+sXuZInMgJEYDFNpHc9881jt4VWNwY7hg/UKyAkezc17UcTTlJpvU92OMpzk1PRrT+t9iCDWHtXSaEBZZwBPAy5jcHnP9fUHpXWeHL29js7i7s5mgUTqr2+dy7lAYHB7+/sa5aXS3XZCvNzEPlQdXTqCPUjuPTBrU0XXTY3Ujp5ZM4C3FnM2zeR0ZWPQ/wCJHINY4imqlN8quzlxNONWm/Zq/wDX9WZ6PeeIbDWMX63SaXfsq/aI+N28d0BByD/s+prAb4ordXUkVlZ3H2gNgea+8jbxux0B4zyTis681+wtXe4WzlE0OAEnlRgr4yOFz6dTge3aqOl6Ys+n28ruD9pzNI7HJc7jgH6Y/M149LCUqUeapF+V3/lv8zxKeCoU4c1WL8rv/Ldept+GJpb+HUDKnmSyvEXKjgAZ/riuqvtBstI8kLapNcOgZ2mYgKGB+UAEdjnJrLttLhsDo0auiwOVmdslQ5Y8liPQce3NejWlvBqGrhbizltrk/J553DaNxX5G6bgArEkHIPavIxeJam5Q0T/AE0PHxdd+156ekdfwsjw/wAT+EtPvL6WFIZ4JCcx3UgHPHIYYBK575zWfN4JfQI0uvLle6s51hmkibID4zgDGCvUc9a9Z8V6ppuj6VdQalqMMssoRox5glkT5gdy4JPTIx3zVGK7tL/wteXa5Ms11HKhyCpCggZ9xkfrXtYPGTnTTmny+fU9TD5lX9lHmT5dtev/AA/bY5t73VdPje1sJFgkcDNtJLGMN75BIP0x9a4SW4vIZXjmW4EyEq48x/vDr29a9e0uxtItTiXy1m3lU+dc8HqapytdNK5XT9PVSxwPsqnA+p5p0sVCDa5biw2OhSk1yLWzvs/1OW8XeD7fzYHiRra1kYq+xciNx04PK5/pVHTdW1TT5l0+MtJexzeXFgkOz54wemPf06123jrWpbOwh0q3tz5mRJPNcMAEjUjaSfc9vavMI59Vsbr7bFfB5kfcHikJK85+6ccfhXVgHUr0E63yv+Z24F1MVhv31n2u9+zf9bWO20+PWNY1WA6ncCS3U7yLWE+XG2D8xwAGx19K7fwPp9vY21pMsht4pizyoHAlJBwM5IzlcHI4yfaue8J+IY9bt1MQMGpyqsUEEceUjIxuYZ4298H9aq+J/FT2fiGxgaO0iZiXkYKWEWG/u5woPpivMr0qmJ5sOo8q8ttDxa8K2Jm8Mo8tui8r9Ovr3R3ep3sl5Nc20BmuIYIGiW4lZSxLDCLkZyBnnOa8u/fatqE1vFqO25s7ktFlwhKL9x19eQ2fetlvEetGwuLW20yFGmXK3duWaML3ZOdv454rz7WoUk1KK2iiW+2RrGoAILYyXYHsoJIyeuM1pl+DlTjLmaXbr82duW4OUHJNpdtn83/w6/A9O0i8utVUQNfQkxyETSWCjcfQMRx3zwBXJ+LdfltNfnmiuDdJHHtuoWwFZQeFXspAweO/41gwzTaDaSypJLZgDHm2E2Tg/wALgEEjPftmse51aK4tmjtFmbeP3s0qY98Dk+3Jr0aGBjCbnuvRHq4bLkqrmtY7bK3nt/Wx61oes23ixLRLPUCbGLCTRKCjBiTjePcDA6itrTrO8S/gMkKRW6vgwxxgEEg4Gev1OeleL+DWlsEuZIZCkgkQb0ODggjkV6f4d8c6ppevoTLLcxz2rIUbnqDyPTGD0ry8dgqkOZUWmuz9P61PGzHAToznGg042e+/d/PXc6mLULmdn02yJDSzARxSHIOGJVhu9RxWPeStrttdNeSyK/71mkj+YDax4GM7uv1xzxWn4X1qx+wac1zZTRbrmSWeaAEyLEN3OT8rNyc5/vH0FcTqfxS0exsJbHTzeT2rTtIrpIIlII5GOT0OMfjXkYbD1pVXGnT1T3/4PyWh5WHwtadRxo07tPf8Hr8tjJ8QCfSGsr1ZFWGVvssolQLiTaWQ5HHbGfbkVHqXibVra1dmjhtpAgBfB/e56ALn8eKxNY8Ry+NLm3g2LZWUe51UfO3Tkse5wAB0AzUJtjGITGst1tIRftIyuO4yOQBX2Kw8bR9qlzH2tPCpRgsQlzLp+Wu39eRkandXE95HJKzSTTLksf4Oo4HYVo6Tqg0e1kE0cryx8oMZGPqelX7rw/JJay3Za2udo3PEsRUlRwdpPpWZa+HzJOyzXLQwiT91GvzyyYPZcjgd2JAGDXZzU5ws9j01Uo1qfI3ov6/ryNCKe1W1BZJfPm/eFRyyE9Mk+lUJtOvxt2zxEv0E64k574Gc10UWlCczSwJLdYbc5jTIGevPc57CizjEbTFSyOXIeQghwPTnpWXtYxWjOFYhQu4/iZVrBfeHtLzeWTXNmnzeZD1jz/eBwQDVjw9e2utX0i28PkKgDx+ZgsX6ZGOOPT3zXXwWkNhaGeWKVONo2Rb3bPUsW4Uduck1yniXSFWG1uLV9sL/ACr5KBNx7HaOAeCDj0965I1Y1rrZvr/wDnp4iGJcotWb662+7Y6bQYIrBp7S6mIMjO26Vdy4xkdeuCCSOvQ84p2uy2mmQPOjtfRSKuFgT54+uc5xgHGBn2rzyLULyw1W1l86aUwruUMS4HXqv5g+xrs/EnjmLxBpllAsAhuVCgqGBabDAqigDIGepauaWEqRrRlunv8A1uc9XBVY14SXvRe/T/g/icaY7jVLp7oyzW8jgEQ2/JRR0+p96o+dqPmvH9ouLiJOjjJP0PfvXd+CoZrhdQiKxx3cspLMH+Xb2G7p1J+vFdBH4LaSGW4vAu6IlJNkmBGfQ8ctXZLGwpTdOS9DrqZlTw03TmlZWt/wPy3PJIr0WzlUgkcSYEkfQZHcHsa3dP1V9MWOII89rOciCYbSpzjKsCcHP4e1beq6DHc65Na2knmmPapWI/xYyS36fiax9S0y50qP7PcwBhKR5aODlGPfIx6V0e0hW0aOn6xSxCUbb626nQ6H4hLm5sZLZrm1RS620suHQ5+YowH4kY7Gu70LxVa31gLG81OawkkTy9skreTJxjt0JHUHg9vSvIrfU7WG4gmlLwSJtKXMMmDu7AnGPx/OtbxJ4pOn2wkt0t4XBx5ix4kY+3px1IArysRgY15cqVr/AJ/iePicB7eahFNX/P8AH8js9X0ey1IQ2ieRNaWwZTIRt3sx5KnggDjH41ymi6LDpGu6lZxX8txaJGA8RORuY/KM+oweawbTxrBBC8nmTu2DshI3KGxxk5GRmrfw71KBLyVruX95cOJZJH6ZDAfrk10LDyo0pRV7L8TdYTE4WhNuV10Vut731+fzPSNPJspStxmR0xtdB/qucgH14NO+23KfKsQKjgHcR/St7TI4Jrj7N5XmyOzvG+Pkc8kfj7fhWNNpF40zkyS5LEn5TXybqrmbelz4720alSTqKz/rax5v9tXV7VbnUmupbmZjI0G4DeOisWA4HXCgep70TR2dxGkS2skDE4Uh94I9jgHNdt4Lu0isrOzEZhWWJTuUDzC4JBBYdcEYx0FaWpeHI5JlkvbK4wW2eakflIfQswHX8q+lljY0ZNWsl/Wx708fGjVdNxsltZ/ktjhdA15vCF4HbTJjHGcK7yfcz9BjnA61xXjO+ubjV5J5xGRLynk5ClTyMe/rnvXqnjjRLPwzoLvah1EimKWJm3hiRlWH0wa8m1edX1G2BIkSGNRlOctyT+RP6V6OCqRrL20Vue1lU6WIm8VCO+l/T8tSqBqOnwhFkuIYnGSschCnPqAa6vQtLluWlDq6QNta4uADl1HARSeuSR7flWh4X8NuEN5OFla2UObcqSFYkBS/bAJ5H0Fdtp1kLa0e6vpvPMjrGsO7AYnpux0AxnA9KzxWLSTjDoZ4/MoxTjBXfl3/AK67HO6t4cs4rYTL5skWAphLYJz6OB264xWNP4YtrbS3uLKR4xAu94pGBJGeSDgc89DXtRsWt7KBU8rZDCJd6A4XOcZ5/wB3AAznJzXlfjK6zbaxa2lqU2zmQ5IAMIIbAHY9/pXk4DFVK8uXp38jxcBjqleSpxfVelr2/rqcTNcPpM0V5BgecrpJE3COOP8AH8CK6bSfHul281vNJb3XlwkEj5WKAja4B7jBJxiuCvL1725IYoqxjy05wAPT3q5bWLxQJLIVKPkLGARux1J9vpX0dSjCcbTPsK2EpVIJVt/60+49D8Y+MdN06xSz0bUDeySRZP2eRvJQkYJfpk47D8a85hspHhwlurRkZHmYDN9Of5VatNM+13QCKinbnGMLgd29h+tbE+iWrWhAuJBOxwJZMbGPuOoHvWMI08KuSL3OWjCjgYqnBtt7t6v8LHI2Rlsb9WiywBO5H646FT+deteGYZtQggijhleZI1XyVcpgnPp19fxrzWaCSCdnuYXilXMUkhHG4Hgmujl8aWtlHHKizLexLyqr8u7Hds8qaxxtOdeKUFr3HmFOeKjFU1d9/wCuh0Hiywl05Hhi2jIMTMud0ORzjPUdRXMaXBDbS3scr7p1lRJSGOdhyT+eBzVpfiEdRtlN4jP1xbqoUOT1Yvkn/AdK5ex1G4/tee6uYWcOxSdUHQEjGPcY4p4ahUhScZ7mOFw1eFKVOro1+Lv/AF/Vz1iCzt4oJJQgleNlEUJJCIp6N79vrnmtKw0r7Xf2hurVZpJWAYooGEBA6Z+ZueAPWuL0XVr4XK2lrJ5kahiRKg+RR94HPb2rvPB0M+p3IfzI7eaBvtCzOikMqjmPn1APTn8q8LGU50oybZ8zjIToJylL87l1p20/W59PnuH+xRSvNs34aUk55zkFRyAPUCs7xV4V05bJLsTPbxTKu61uiNybv4kC++T0rpp9MisluNc1qRreGZAtspcuQcg4YE5/D/8AVWfrtzbeILyK6dxcTPiKB8lpJlVeSy/w88Y968jDzlGalHa2r8zyKVaUakZwv5tbN/116eh5odBuLC5vYIY47i8DBpLhyAqR4+TrwC3X8sVnWtvb2moRSalGbJkcq0qxnYwZSN3AxkccjqCa9MfTg95LFazpNHbRRRsGTzV3gZYgZ5U8qCOm0461Hqmi2wht47Z3mglTMkUqkptJPB9O/PavXWOSm4S/4O39af8ADnuxzKz5J9e2+33ei/4c5rS/EGkaPMthPKiSXEqvHLChkjKdASfY/wAznFdRrWq3i6XIyxPbQyiUteEgquwE5Ckfezjk5rynxTplvBBFbWzgyx3EjqzN8yxEALn0LdfoM0ugeINXvbm30nUtRuH0a1zdPby4KuEHyjPUjOBiu+WAp1Wq+/e/6HdUy2FaKxEHtdtPfTql320ehTjN5prx6gbOUvyxnfcGOepzT9b8W3uqW8UbxrhFBS5PLnn9COldFeaK8TGWe+uIdQPzSeWu5YyedpOcnr07dKwLvw5M90DJPbW4ZcxkSBUkBPJAI6E9uMc16VOrTm7/AOZ6tKrQqyU5pXWz1/D+vkYzaIkcqCSTa20HG3AJIz1/riq81lGdxAYbeqE5/Wu4t9IliCTT/vmlyirasGGBx155x2rMvLcu0wl3oYCCHxiTBP3QT/kVpTxHM7HTTxjlK17nKyWoRER4GjUnh8EVc0W9jguo4ZQ6JzExA3Hk8H8DitOTSV1SNxbW6q6qW8ySViVHqWPFaOm2JE4tIJljAUFmjBHPuepOa1nWik0/6/M2qYmHI1Lf8vzNCa/uoLB7e9lC26lRvMmPlz1HPP4iuTk8RASMIxeNGCdrfaSMjtxjiui8TaM5hBu5DqCjBRwqiWNyQMNg5KkVTj0LUJI1eIERsAVGMcduMcVjTcGuZdThw8qEYc7tr8kdx8PtNuYhNFFc4zHuQMOEZuSR3Hyg/ifxr1dtNl0+2BcxSxOhiZuRIMkrlT06+oP4UUV8Fmsm8VY/Os2nJ4mz/rY88+JUTHUtP0uQKbd1EkhDElm5T8hyR9a8sh0NRqccKlWeSQJHu+6rZIyfxHH1oor6jLW44dJdkfV5ROUcLFRf2b/iz0rTNAk02YXJ1GaWRwyyKyLskzgMGHcHPr71meJ/EcmhSQR2llAIrtDIVlkZxwOmOxzyCDRRXFg28RiHGpqjiy//AGvEWra6enfsbml69PeadDqt/wCWhsolieO3iz8vXKkkEnnufxrn/EFz/bPhnV/EdrBHbQ3LtbQQPyyjZlnYjA3Y547n2oorvw1OMJtRWzt8jbDUoRry5VtNL5X2PKYoB5JbAIBwc9Sa6rS9Bee0iN1KBFa72YRHLGPG7AyOuc/nRRXr15OMbo+uxs5RptpnRadosV1aJNxB9rPlJHEOFAYdSeeuPrW1deHLG8MOnrCEd2ZI7jcdxZeu72ODwOmaKK+YrVaim7Pa58ZXrVI1HaW1/wADA13wytnaSalbvho9pmikO9XBwP8AINYM+gQnWLewZjtLsMj+7nKj8OaKK9nDVJOndvv+R6+Er1HTbctub8ErD9c0MorRpNhBlkYr8ybQCQPqDWZDbfZ7WTyp5WcHezPjvxRRW9OcnFXO+hVnKnFNm/pV+LK4hmMe+UFgwzxKu3DBvQ7e/qBxXqvg62tpbO5iljNwkJScK4xlXUBfxGenTk80UV5WP0ipLf8A4KPm85ilTbX9ar/NmF8Ttb1Sa9bw4tzHHDb7HlmEeZJdpyil88qDnjHOBmvLdc8Ra5BcT6a2oFImyrCEBdwbGVJABxRRXbgYQcV7q2vt1PYyWnTdGmnFfDfZbvqdX4FhvotPlksJ44bizj8qYSLujkXqMAg5P5Vy/wAQdTvbPV30xruZmhAM7LIQryHngDsAQBxRRSw6UsVK6OnBJTx8+Zd/0/zJfDGlC5ksreRyBIDI7dfUn6nArbuI7aW9hNvAsNusqsoydxUMDhj3JA+lFFXXk/a2v0/zMcROTxDV+n6s76C2hvtPn1GaFJ3uJJMLIMqo3cnA6nmueudNtfKSRLKAEMylGLFceo54NFFfN4ecnUkr9T5ehOSnJJ6J2NXRNAjg0ueeBIvLkfb5U4MixsB8xHrkEYz0964PxcRbz20mD5bSNA43ZPOCMew4P50UV6uE1xLv/Wh6WWylPFS5nf8A4ZkWjzGXTTGeAt2qnHcEED8sH869Ij8MIbvybJYrcBhuJUFpFBAILYzk0UVhmU5QmlF9/wBCc0nKnUSi+/6FS8sIbwNAYIfszybJIiv3uf73XPvXGyWrwyPGrttQlR++ccD8aKK1wEnKLTY8FJ6xvof/2Q==";
+        }
+
+        function returnGreenery2AsBase64() {
+          return "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";
+        }
+
+        function returnGreenery3AsBase64() {
+          return "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";
+        }
+
+        async function setup() {
+          await PowerPoint.run(async (context) => {
+            // Adds a new slide with some content.
+            const slideCountResult = context.presentation.slides.getCount();
+            context.presentation.slides.add();
+            await context.sync();
+
+            const newSlide = context.presentation.slides.getItemAt(slideCountResult.value);
+            newSlide.load("id");
+            newSlide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.hexagon);
+            await context.sync();
+
+            console.log(`Added slide - ID: ${newSlide.id}`);
+
+            // Switch to the new slide.
+            context.presentation.setSelectedSlides([newSlide.id]);
+            await context.sync();
+          });
+        }
+
+        // Default helper for invoking an action and handling errors.
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-font-m">
+            <p>This sample shows how to create binding references for images.</p>
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+            <h3>Set up</h3>
+            <button id="setup" class="ms-Button">
+                <span class="ms-Button-label">Set up</span>
+          </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <h4>Insert image with binding</h4>
+            <p>Try adding a few images. Enter an ID, then select the button. A binding with that ID will be created which refers
+                to the shape.</p>
+            <p>Binding ID:
+                <input type="text" id="temp-binding-id" size="10" maxlength="10" value="BindingId">
+            </p>
+                <button id="insert-image-and-create-binding" class="ms-Button">
+                <span class="ms-Button-label">Insert image with binding</span> 
+            </button>
+                <h4>Show the bindings in the document</h4>
+                <p>The console will show the bindings in the document.</p>
+                <button id="load-bindings" class="ms-Button">
+                <span class="ms-Button-label">Show bindings</span>
+            </button>
+                <h4>Update an image using its binding</h4>
+                <p>Select a binding ID from the dropdown list then pick a replacement picture.</p>
+                <p>Choose the binding for the image you want to update:</p>
+                <select id="bindings-dropdown"></select>
+                <br><br>
+                <p>Select the replacement image:</p>
+                <button id="replace-binding1" class="ms-Button">
+                <span class="ms-Button-label">Show Greenery 1</span>
+            </button>
+                <button id="replace-binding2" class="ms-Button">
+                <span class="ms-Button-label">Show Greenery 2</span>
+            </button>
+                <button id="replace-binding3" class="ms-Button">
+                <span class="ms-Button-label">Show Greenery 3</span>
+            </button>
+                <br><br>
+                <h4>After adding a few images, try z-Order APIs</h4>
+            <p>Click on or select the image you want to act on.</p>
+                <button id="bring-to-front" class="ms-Button">
+            <span class="ms-Button-label">Bring To Front</span>
+          </button>
+                <button id="bring-forward" class="ms-Button">
+            <span class="ms-Button-label">Bring Forward</span>
+            </button>
+                <button id="send-backward" class="ms-Button">
+            <span class="ms-Button-label">Send Backward</span>
+            </button>
+                <button id="send-to-back" class="ms-Button">
+            <span class="ms-Button-label">Send To Back</span>
+            </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
+    office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css
+
+    core-js@2.4.1/client/core.min.js
+    @types/core-js
diff --git a/samples/powerpoint/shapes/get-set-shapes.yaml b/samples/powerpoint/shapes/get-set-shapes.yaml
index 903a7cb70..789c72620 100644
--- a/samples/powerpoint/shapes/get-set-shapes.yaml
+++ b/samples/powerpoint/shapes/get-set-shapes.yaml
@@ -1,19 +1,19 @@
 order: 2
 id: powerpoint-shapes-get-set-shapes
-name: 'Get, set, load, and save shapes'
+name: Get, set, load, and save shapes
 description: Get and set one or more selected shapes. Load and save one or more shapes.
 host: POWERPOINT
 api_set:
     PowerPointApi: '1.5'
 script:
     content: |
-        $("#getSelectedShapes").on("click", () => tryCatch(getSelectedShapes));
-        $("#setSelectedShapes").on("click", () => tryCatch(setSelectedShapes));
-        $("#changeFill").on("click", () => tryCatch(changeFill));
-        $("#saveShapeSelection").on("click", () => tryCatch(saveShapeSelection));
-        $("#loadShapeSelection").on("click", () => tryCatch(loadShapeSelection));
-        $("#createShapes").on("click", () => tryCatch(createShapes));
-        $("#arrangeSelected").on("click", () => tryCatch(arrangeSelected));
+        document.getElementById("getSelectedShapes").addEventListener("click", () => tryCatch(getSelectedShapes));
+        document.getElementById("setSelectedShapes").addEventListener("click", () => tryCatch(setSelectedShapes));
+        document.getElementById("changeFill").addEventListener("click", () => tryCatch(changeFill));
+        document.getElementById("saveShapeSelection").addEventListener("click", () => tryCatch(saveShapeSelection));
+        document.getElementById("loadShapeSelection").addEventListener("click", () => tryCatch(loadShapeSelection));
+        document.getElementById("createShapes").addEventListener("click", () => tryCatch(createShapes));
+        document.getElementById("arrangeSelected").addEventListener("click", () => tryCatch(arrangeSelected));
 
         async function getSelectedShapes() {
           // Gets the shapes you selected on the slide and displays their IDs on the task pane.
@@ -31,8 +31,9 @@ script:
               finalTable += "<tr><td>" + index + "</td><td>" + shape.id + "</td></tr>";
             });
             finalTable += "</table>";
-            $("#outputSpan").empty();
-            $("#outputSpan").append(finalTable);
+            const outputSpan = document.getElementById("outputSpan");
+            outputSpan.innerHTML = "";
+            outputSpan.innerHTML += finalTable;
           });
         }
 
@@ -42,14 +43,17 @@ script:
             context.presentation.load("slides");
             await context.sync();
             const slide1 = context.presentation.slides.getItemAt(0);
-            slide1.load("shapes");
+            slide1.load("shapes/items/type");
             await context.sync();
-            const shapes: PowerPoint.ShapeCollection = slide1.shapes;
-            const shape1: PowerPoint.Shape = shapes.getItemAt(0);
-            const shape2: PowerPoint.Shape = shapes.getItemAt(1);
+
+            const shapes = slide1.shapes.items.filter((item) => item.type === PowerPoint.ShapeType.geometricShape);
+            const shape1: PowerPoint.Shape = shapes[0];
+            const shape2: PowerPoint.Shape = shapes[1];
             shape1.load("id");
             shape2.load("id");
             await context.sync();
+
+            console.log(`IDs: ${shape1.id}, ${shape2.id}`);
             slide1.setSelectedShapes([shape1.id, shape2.id]);
             await context.sync();
           });
@@ -60,9 +64,11 @@ script:
           await PowerPoint.run(async (context) => {
             const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
             const shapeCount = shapes.getCount();
-            shapes.load("items");
+            shapes.load("items/fill/type");
             await context.sync();
             shapes.items.map((shape) => {
+              const shapeFillType = shape.fill.type as PowerPoint.ShapeFillType;
+              console.log(`Shape ID ${shape.id} original fill type: ${shapeFillType}`);
               shape.fill.setSolidColor("red");
             });
             await context.sync();
@@ -111,9 +117,7 @@ script:
         }
 
         function generateRandomHexColor() {
-          return `#${Math.random()
-            .toString(16)
-            .substring(2, 8)}`;
+          return `#${Math.random().toString(16).substring(2, 8)}`;
         }
 
         async function createShapes() {
@@ -126,7 +130,9 @@ script:
             const minNewShapeWidth = 50;
             const minNewShapeHeight = 50;
             for (let i = 0; i < 20; i++) {
-              const rectangle: PowerPoint.Shape = currentSlide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.rectangle);
+              const rectangle: PowerPoint.Shape = currentSlide.shapes.addGeometricShape(
+                PowerPoint.GeometricShapeType.rectangle,
+              );
               rectangle.height = getRandomBetween(minNewShapeWidth, maxNewShapeWidth);
               rectangle.width = getRandomBetween(minNewShapeHeight, maxNewShapeHeight);
               rectangle.left = getRandomBetween(0, slideWidth - rectangle.width);
@@ -134,8 +140,9 @@ script:
               rectangle.fill.foregroundColor = generateRandomHexColor();
             }
             finalTable += "Done<br>";
-            $("#slide-tags").empty();
-            $("#slide-tags").append(finalTable);
+            const outputSpan = document.getElementById("outputSpan");
+            outputSpan.innerHTML = "";
+            outputSpan.innerHTML += finalTable;
           });
         }
 
@@ -176,11 +183,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to get selected shapes, and how to select and change specific shapes.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
         <button id="createShapes" class="ms-Button"><span class="ms-Button-label">Create shapes</span></button>
@@ -194,7 +200,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -213,15 +219,9 @@ style:
           transition: max-height 0.2s ease-out;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/powerpoint/shapes/get-shapes-by-type.yaml b/samples/powerpoint/shapes/get-shapes-by-type.yaml
index 593f80644..7eba070e1 100644
--- a/samples/powerpoint/shapes/get-shapes-by-type.yaml
+++ b/samples/powerpoint/shapes/get-shapes-by-type.yaml
@@ -1,15 +1,15 @@
 order: 3
 id: powerpoint-shapes-get-shapes-by-type
 name: Select shapes by type
-description: 'Gets shapes in a slide based on their type, such as GeometricShape or Line.'
+description: Gets shapes in a slide based on their type, such as GeometricShape or Line.
 host: POWERPOINT
 api_set:
     PowerPointApi: '1.4'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#change-lines").on("click", () => tryCatch(changeLines)); 
-        $("#change-geometric-shapes").on("click", () => tryCatch(changeGeometricShapes));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("change-lines").addEventListener("click", () => tryCatch(changeLines));
+        document.getElementById("change-geometric-shapes").addEventListener("click", () => tryCatch(changeGeometricShapes));
 
         async function changeLines() {
           // Changes the dash style of every line in the slide.
@@ -22,6 +22,7 @@ script:
             // Change the dash style for shapes of the type `line`.
             shapes.items.forEach((shape) => {
               if (shape.type === PowerPoint.ShapeType.line) {
+                shape.lineFormat.style = PowerPoint.ShapeLineStyle.thickThin;
                 shape.lineFormat.dashStyle = PowerPoint.ShapeLineDashStyle.dashDot;
               }
             });
@@ -99,12 +100,10 @@ template:
         <section class="ms-Fabric ms-font-m">
           <p>This sample shows how select and change shapes based on their types.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Setup</h3>
           <p>Create some shapes in a new, blank presentation.</p>
           <p />
-
           <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Setup</span>
             </button>
@@ -134,15 +133,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/powerpoint/shapes/group-ungroup-shapes.yaml b/samples/powerpoint/shapes/group-ungroup-shapes.yaml
new file mode 100644
index 000000000..4021254cc
--- /dev/null
+++ b/samples/powerpoint/shapes/group-ungroup-shapes.yaml
@@ -0,0 +1,193 @@
+order: 6
+id: powerpoint-shapes-group-ungroup-shapes
+name: Group and ungroup shapes
+description: Shows how to create two shapes then group and ungroup them.
+author: aafvstam
+host: POWERPOINT
+api_set:
+    PowerPointApi: '1.8'
+script:
+    content: |
+        document.getElementById("group-shapes").addEventListener("click", () => tryCatch(groupShapes));
+        document.getElementById("move-group").addEventListener("click", () => tryCatch(moveGroup));
+        document.getElementById("ungroup-shapes").addEventListener("click", () => tryCatch(ungroupShapes));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+
+        async function groupShapes() {
+          await PowerPoint.run(async (context) => {
+            // Groups the geometric shapes on the current slide.
+
+            // Get the shapes on the current slide.
+            context.presentation.load("slides");
+            const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
+            slide.load("shapes/items/type,shapes/items/id");
+            await context.sync();
+
+            const shapes: PowerPoint.ShapeCollection = slide.shapes;
+            const shapesToGroup = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.geometricShape);
+            if (shapesToGroup.length === 0) {
+              console.warn("No shapes on the current slide, so nothing to group.");
+              return;
+            }
+
+            // Group the geometric shapes.
+            console.log(`Number of shapes to group: ${shapesToGroup.length}`);
+            const group = shapes.addGroup(shapesToGroup);
+            group.load("id");
+            await context.sync();
+
+            console.log(`Grouped shapes. Group ID: ${group.id}`);
+          });
+        }
+
+        async function moveGroup() {
+          await PowerPoint.run(async (context) => {
+            // Move the first shape group to the top-left of the current slide.
+
+            // Get the shapes on the current slide.
+            context.presentation.load("slides");
+            const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
+            slide.load("shapes/items/type,shapes/items/id");
+            await context.sync();
+
+            const shapes: PowerPoint.ShapeCollection = slide.shapes;
+            const shapeGroups = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.group);
+            if (shapeGroups.length === 0) {
+              console.warn("No shape groups on the current slide, so nothing to move.");
+              return;
+            }
+
+            // Move the first grouped shapes.
+            const firstGroupId = shapeGroups[0].id;
+            const shapeGroupToMove = shapes.getItem(firstGroupId);
+            shapeGroupToMove.top = 0;
+            shapeGroupToMove.left = 0;
+            await context.sync();
+
+            console.log(`Moved shape group with group ID: ${firstGroupId}`);
+          });
+        }
+
+        async function ungroupShapes() {
+          await PowerPoint.run(async (context) => {
+            // Ungroups the first shape group on the current slide.
+
+            // Get the shapes on the current slide.
+            context.presentation.load("slides");
+            const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
+            slide.load("shapes/items/type,shapes/items/id");
+            await context.sync();
+
+            const shapes: PowerPoint.ShapeCollection = slide.shapes;
+            const shapeGroups = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.group);
+            if (shapeGroups.length === 0) {
+              console.warn("No shape groups on the current slide, so nothing to ungroup.");
+              return;
+            }
+
+            // Ungroup the first grouped shapes.
+            const firstGroupId = shapeGroups[0].id;
+            const shapeGroupToUngroup = shapes.getItem(firstGroupId);
+            shapeGroupToUngroup.group.ungroup();
+            await context.sync();
+
+            console.log(`Ungrouped shapes with group ID: ${firstGroupId}`);
+          });
+        }
+
+        async function setup() {
+          await PowerPoint.run(async (context) => {
+            // Adds a new slide with two shapes.
+            const slideCountResult = context.presentation.slides.getCount();
+            context.presentation.slides.add();
+            await context.sync();
+
+            const newSlide = context.presentation.slides.getItemAt(slideCountResult.value);
+            newSlide.load("id");
+
+            // Create two shapes.
+            const shape1 = newSlide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.rectangle);
+            shape1.left = 100;
+            shape1.top = 100;
+            shape1.width = 150;
+            shape1.height = 100;
+            shape1.fill.foregroundColor = "darkred";
+
+            const shape2 = newSlide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.ellipse);
+            shape2.left = 300;
+            shape2.top = 100;
+            shape2.width = 150;
+            shape2.height = 100;
+            shape2.fill.foregroundColor = "darkblue";
+
+            await context.sync();
+
+            console.log(`Added slide - ID: ${newSlide.id}`);
+
+            // Switch to the new slide.
+            context.presentation.setSelectedSlides([newSlide.id]);
+            await context.sync();
+          });
+        }
+
+        // Default helper for invoking an action and handling errors.
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            <p>Shows how to group then ungroup shapes.</p>
+            <p><i>Code sample based on community contribution from <a href="https://github.com/aafvstam" target="_blank">Maarten van Stam</a>.</i></p>
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+            <h3>Set up</h3>
+            <button id="setup" class="ms-Button">
+                <span class="ms-Button-label">Set up</span>
+          </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <button id="group-shapes" class="ms-Button">
+                <span class="ms-Button-label">Group shapes</span>
+            </button>
+            <button id="move-group" class="ms-Button">
+                <span class="ms-Button-label">Move group</span>
+                </button>
+            <button id="ungroup-shapes" class="ms-Button">
+                <span class="ms-Button-label">Ungroup shapes</span>
+            </button>
+        </section>
+    language: html
+style:
+    content: |
+        section.samples {
+            margin-top: 20px;
+        }
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+        .content {
+          padding: 0 18px;
+          /* display: none; */
+          overflow: hidden;
+          background-color: #f1f1f1;
+          max-height: 0;
+          transition: max-height 0.2s ease-out;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/powerpoint/shapes/shapes.yaml b/samples/powerpoint/shapes/shapes.yaml
index e9d57a18a..d830e9898 100644
--- a/samples/powerpoint/shapes/shapes.yaml
+++ b/samples/powerpoint/shapes/shapes.yaml
@@ -1,18 +1,19 @@
+order: 1
 id: powerpoint-shapes
-name: 'Insert shape, line, and text box'
-description: 'Inserts geometric shapes, lines, and text boxes to a slide.'
+name: Insert shape, line, and text box
+description: Inserts geometric shapes, lines, and text boxes to a slide.
 host: POWERPOINT
 api_set:
     PowerPointApi: '1.4'
 script:
     content: |
-        $("#create-hexagon").on("click", () => tryCatch(createHexagon));
-        $("#shrink-hexagon").on("click", () => tryCatch(shrinkHexagon));
-        $("#move-hexagon").on("click", () => tryCatch(moveHexagon));
-        $("#create-line").on("click", () => tryCatch(createLine));
-        $("#create-text-box").on("click", () => tryCatch(createTextBox));
-        $("#create-shape-with-text").on("click", () => tryCatch(createShapeWithText));
-        $("#remove-all").on("click", () => tryCatch(removeAll));
+        document.getElementById("create-hexagon").addEventListener("click", () => tryCatch(createHexagon));
+        document.getElementById("shrink-hexagon").addEventListener("click", () => tryCatch(shrinkHexagon));
+        document.getElementById("move-hexagon").addEventListener("click", () => tryCatch(moveHexagon));
+        document.getElementById("create-line").addEventListener("click", () => tryCatch(createLine));
+        document.getElementById("create-text-box").addEventListener("click", () => tryCatch(createTextBox));
+        document.getElementById("create-shape-with-text").addEventListener("click", () => tryCatch(createShapeWithText));
+        document.getElementById("remove-all").addEventListener("click", () => tryCatch(removeAll));
 
         async function createHexagon() {
           // This function gets the collection of shapes on the first slide,
@@ -24,7 +25,7 @@ script:
               left: 100,
               top: 100,
               height: 150,
-              width: 150
+              width: 150,
             };
             const hexagon: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.hexagon, shapeOptions);
             hexagon.name = "Hexagon";
@@ -68,13 +69,12 @@ script:
 
             // For a line, left and top are the coordinates of the start point,
             // while height and width are the coordinates of the end point.
-            const line: PowerPoint.Shape = shapes.addLine(PowerPoint.ConnectorType.straight, 
-                { 
-                  left: 400, 
-                  top: 200, 
-                  height: 20, 
-                  width: 150 
-                });
+            const line: PowerPoint.Shape = shapes.addLine(PowerPoint.ConnectorType.straight, {
+              left: 400,
+              top: 200,
+              height: 20,
+              width: 150,
+            });
             line.name = "StraightLine";
 
             await context.sync();
@@ -87,13 +87,12 @@ script:
           // location, and size. Then it names the text box.
           await PowerPoint.run(async (context) => {
             const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-            const textbox: PowerPoint.Shape = shapes.addTextBox("Hello!", 
-                { 
-                  left: 100, 
-                  top: 300, 
-                  height: 300, 
-                  width: 450 
-                });
+            const textbox: PowerPoint.Shape = shapes.addTextBox("Hello!", {
+              left: 100,
+              top: 300,
+              height: 300,
+              width: 450,
+            });
             textbox.name = "Textbox";
 
             return context.sync();
@@ -108,15 +107,17 @@ script:
           await PowerPoint.run(async (context) => {
             const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
             const braces: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.bracePair, {
-                left: 100,
-                top: 400,
-                height: 50,
-                width: 150
-              });
+              left: 100,
+              top: 400,
+              height: 50,
+              width: 150,
+            });
             braces.name = "Braces";
             braces.textFrame.textRange.text = "Shape text";
             braces.textFrame.textRange.font.color = "purple";
+            braces.textFrame.textRange.font.underline = PowerPoint.ShapeFontUnderlineStyle.heavy;
             braces.textFrame.verticalAlignment = PowerPoint.TextVerticalAlignment.middleCentered;
+            braces.textFrame.autoSizeSetting = PowerPoint.ShapeAutoSize.autoSizeShapeToFitText;
 
             return context.sync();
           });
@@ -155,7 +156,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to create, resize, move, and delete shapes.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Begin by deleting all shapes that are currently on the slide.</p>
@@ -165,20 +165,16 @@ template:
                         <span class="ms-Button-label">Remove all shapes</span>
                     </button>
             <p />
-
             <p>Create, shrink, and move a shape.</p>
             <p />
-
             <button id="create-hexagon" class="ms-Button">
                 <span class="ms-Button-label">Create hexagon</span>
             </button>
             <p />
-
             <button id="shrink-hexagon" class="ms-Button">
                             <span class="ms-Button-label">Shrink hexagon</span>
                     </button>
             <p />
-
             <button id="move-hexagon" class="ms-Button">
                             <span class="ms-Button-label">Move hexagon</span>
                     </button>
@@ -186,21 +182,17 @@ template:
             
             <p>Create other shapes.</p>
             <p />
-
             <button id="create-line" class="ms-Button">
                 <span class="ms-Button-label">Create line</span>
             </button>
             <p />
-
             <button id="create-text-box" class="ms-Button">
                         <span class="ms-Button-label">Create text box</span>
                     </button>
             <p />
-
             <button id="create-shape-with-text" class="ms-Button">
                 <span class="ms-Button-label">Create shape with text</span>
             </button>
-
         </section>
     language: html
 style:
@@ -216,15 +208,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/powerpoint/slide-management/add-slides.yaml b/samples/powerpoint/slide-management/add-slides.yaml
index e1772d8df..e7e5e89cb 100644
--- a/samples/powerpoint/slide-management/add-slides.yaml
+++ b/samples/powerpoint/slide-management/add-slides.yaml
@@ -6,13 +6,13 @@ host: POWERPOINT
 api_set:
     PowerPointApi: '1.3'
 script:
-    content: |
-        $("#slide-masters").on("click", () => tryCatch(logSlideMasters));
-        $("#add-slide").on("click", () => tryCatch(addSlide));
+    content: |-
+        document.getElementById("slide-masters").addEventListener("click", () => tryCatch(logSlideMasters));
+        document.getElementById("add-slide").addEventListener("click", () => tryCatch(addSlide));
 
         async function addSlide() {
-          const chosenMaster = $("#master-id").val() as string;
-          const chosenLayout = $("#layout-id").val() as string;
+          const chosenMaster = (document.getElementById("master-id") as HTMLInputElement).value;
+          const chosenLayout = (document.getElementById("layout-id") as HTMLInputElement).value;
 
           await PowerPoint.run(async function(context) {
             // Create a new slide using an existing master slide and layout.
@@ -60,31 +60,26 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to add a slide and optionally to specify the slide master and layout of the slide.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>On the <b>Home</b> ribbon, open the <b>New Slide</b> drop down menu to see the slide masters and slide layouts in the presentation. Be sure there are at least two slide masters. To add a master, see <a
                     target="_blank"
                     href="https://support.microsoft.com/office/dc684a1d-9d14-4ead-9bb5-2303d4fedba8">Use
                     multiple slide masters in one presentation</a>. The page will open in your browser.</p>
-
             <p>Press <b>Add slide</b> to add a slide with the default layout of the default slide master to the end of the presentation.</p>
             <button id="add-slide" class="ms-Button">
                 <span class="ms-Button-label">Add slide</span>
             </button>
-
             <p>Press <b>Log slide masters info</b> to log to the console a list of all the slide masters, their child layouts, and the IDs of the masters and the layouts.</p>
             <button id="slide-masters" class="ms-Button">
                 <span class="ms-Button-label">Log slide masters info</span>
             </button>
-
             <p>Copy one of the slide master IDs from the console and enter it in the <b>Master ID</b> text box. (Example: <b>6147483651#7142061614</b>)</p>
             <p><b><label>Master ID:</label></b> <input type="text" id="master-id"></p>
-
             <p>Copy one of the layout IDs from the console, <i>under the same master you choose above</i>, and enter it in the <b>Layout ID</b> text box. (Example: <b>2147483651#3142061614</b>)</p>
             <p><b><label>Layout ID:</label></b> <input type="text" id="layout-id"></p>
-
             <p>Press <b>Add slide</b> again to add a slide with the corresponding master and layout.</p>
+
                     
         </section>
     language: html
@@ -101,15 +96,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/powerpoint/slide-management/export-import-slide.yaml b/samples/powerpoint/slide-management/export-import-slide.yaml
new file mode 100644
index 000000000..391895002
--- /dev/null
+++ b/samples/powerpoint/slide-management/export-import-slide.yaml
@@ -0,0 +1,306 @@
+order: 5
+id: powerpoint-slide-management-export-import-slide
+name: Export and import slide
+description: Shows how to export and import a slide.
+host: POWERPOINT
+api_set:
+    PowerPointApi: '1.8'
+script:
+    content: |
+        document.getElementById("export-slide-button").addEventListener("click", () => tryCatch(exportSlide));
+        document.getElementById("clear-exported-slide-button").addEventListener("click", () => tryCatch(clearExportedSlide));
+        document.getElementById("import-slide-button").addEventListener("click", () => tryCatch(importSlide));
+        document.getElementById("slide-image-button").addEventListener("click", () => tryCatch(addSlideImageToNewSlide));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+
+        async function exportSlide() {
+          // Exports current slide.
+          await PowerPoint.run(async (context) => {
+            const slide = context.presentation.getSelectedSlides().getItemAt(0);
+            const slideBase64DataResult = slide.exportAsBase64();
+            const imageBase64DataResult = slide.getImageAsBase64({ height: 300 });
+            await context.sync();
+
+            localStorage.setItem("exportedSlide", slideBase64DataResult.value);
+            localStorage.setItem("exportedSlideImage", imageBase64DataResult.value);
+
+            updateSlideImage(imageBase64DataResult.value);
+
+            console.log("Slide was exported.");
+          });
+        }
+
+        function clearExportedSlide() {
+          // Clears exported slide.
+          localStorage.removeItem("exportedSlide");
+          localStorage.removeItem("exportedSlideImage");
+          updateSlideImage("");
+          console.log("Exported slide was cleared.");
+        }
+
+        async function importSlide() {
+          // Imports the slide that was most recently exported.
+          const slideBase64Data = localStorage.getItem("exportedSlide");
+          if (slideBase64Data === null) {
+            console.warn("Unable to import. You must first export a slide.");
+            return;
+          }
+
+          await PowerPoint.run(async (context) => {
+            const currentSlide = context.presentation.getSelectedSlides().getItemAt(0);
+            currentSlide.load("id");
+            await context.sync();
+
+            context.presentation.insertSlidesFromBase64(slideBase64Data, { targetSlideId: currentSlide.id });
+          });
+        }
+
+        async function getSlideImage(options?: PowerPoint.SlideGetImageOptions): Promise<string> {
+          // Gets slide image.
+          return PowerPoint.run(async (context) => {
+            const slide = context.presentation.getSelectedSlides().getItemAt(0);
+            const imageBase64Result = slide.getImageAsBase64(options);
+            await context.sync();
+
+            return imageBase64Result.value;
+          });
+        }
+
+        async function getImageDimensions(base64Data: string): Promise<{ width: number; height: number }> {
+          // Gets image dimensions.
+          return new Promise((resolve, reject) => {
+            const image = new Image();
+            image.onerror = () => {
+              reject();
+            };
+            image.onload = () => {
+              resolve({ width: image.width, height: image.height });
+            };
+            image.src = `data:image/png;base64,${base64Data}`;
+          });
+        }
+
+        async function addSlideWithImage(imageBase64): Promise<void> {
+          // Adds a new slide including an image.
+          return PowerPoint.run(async (context) => {
+            const presentation = context.presentation;
+            const currentSlide = presentation.getSelectedSlides().getItemAt(0);
+            const slideCountResult = context.presentation.slides.getCount();
+
+            currentSlide.layout.load();
+            await context.sync();
+
+            const slideCount = slideCountResult.value;
+
+            console.log(`Adding slide using layout ${currentSlide.layout.id}`);
+
+            // Add a new slide at the end of the presentation.
+            context.presentation.slides.add({ layoutId: currentSlide.layout.id });
+            try {
+              await context.sync();
+            } catch (err) {
+              console.error(`Unable to add slide (with layout from current slide). ${err}`);
+
+              // Try adding without specifying the layout.
+              context.presentation.slides.add();
+
+              try {
+                await context.sync();
+              } catch (err) {
+                console.error(`Unable to add slide. ${err}`);
+                throw err;
+              }
+            }
+
+            console.log("Slide added");
+
+            // Get added slide.
+            const slide = context.presentation.slides.getItemAt(slideCount);
+
+            slide.load(["id"]);
+
+            await context.sync();
+
+            console.log(`Added slide id: ${slide.id}`);
+
+            // Switch to the new slide.
+            context.presentation.setSelectedSlides([slide.id]);
+            try {
+              await context.sync();
+            } catch (err) {
+              console.error(`Unable to switch to the new slide. ${err}`);
+              throw err;
+            }
+
+            console.log("Switched to the added slide.");
+
+            const activeSlide = context.presentation.getSelectedSlides().getItemAt(0);
+            activeSlide.load(["id"]);
+            await context.sync();
+
+            console.log(`Active slide id: ${activeSlide.id}`);
+
+            const imageDimensions = await getImageDimensions(imageBase64);
+            const shapeAddOptions = {
+              height: imageDimensions.height,
+              width: imageDimensions.width
+            };
+
+            let shape;
+
+            shape = await addImageToCurrentSlide(imageBase64);
+            shape.load(["id"]);
+            await context.sync();
+
+            // Select the added image.
+            activeSlide.setSelectedShapes([shape.id]);
+            await context.sync();
+          });
+        }
+
+        async function addImageToCurrentSlide(
+          imageBase64: string,
+          options?: PowerPoint.ShapeAddOptions
+        ): Promise<PowerPoint.Shape> {
+          // Adds an image to the current slide.
+          const setSelectedDataOptions: Office.SetSelectedDataOptions = {
+            coercionType: Office.CoercionType.Image
+          };
+          if (options) {
+            if (options.height) {
+              setSelectedDataOptions.imageHeight = options.height;
+            }
+            if (options.left) {
+              setSelectedDataOptions.imageLeft = options.left;
+            }
+            if (options.top) {
+              setSelectedDataOptions.imageTop = options.top;
+            }
+            if (options.width) {
+              setSelectedDataOptions.imageWidth = options.width;
+            }
+          }
+
+          return new Promise((resolve, reject) => {
+            Office.context.document.setSelectedDataAsync(
+              imageBase64,
+              setSelectedDataOptions,
+              async (result: Office.AsyncResult<void>) => {
+                if (result.error) {
+                  console.error(`ERROR in setSelectedDataAsync(): ${result.error}`);
+                  reject(result.error);
+                } else {
+                  const shape = await PowerPoint.run(async (context) => {
+                    const slide = context.presentation.getSelectedSlides().getItemAt(0);
+                    slide.shapes.load();
+                    await context.sync();
+
+                    return slide.shapes.items[slide.shapes.items.length - 1];
+                  });
+                  resolve(shape);
+                }
+              }
+            );
+          });
+        }
+
+        async function addSlideImageToNewSlide() {
+          // Adds an image of current slide to the new slide.
+          const imageBase64 = await getSlideImage({ height: 500 });
+
+          await addSlideWithImage(imageBase64);
+        }
+
+        function updateSlideImage(imageBase64: string) {
+          const slideImageElement = document.getElementById("slide-image") as HTMLImageElement;
+          slideImageElement.src = imageBase64 ? `data:image/png;base64,${imageBase64}` : "";
+        }
+
+        async function setup() {
+          await PowerPoint.run(async (context) => {
+            // Adds a new slide with some content.
+            const slideCountResult = context.presentation.slides.getCount();
+            context.presentation.slides.add();
+            await context.sync();
+
+            const newSlide = context.presentation.slides.getItemAt(slideCountResult.value);
+            newSlide.load("id");
+            newSlide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.hexagon);
+            await context.sync();
+
+            console.log(`Added slide - ID: ${newSlide.id}`);
+
+            // Switch to the new slide.
+            context.presentation.setSelectedSlides([newSlide.id]);
+            await context.sync();
+          });
+        }
+
+        // Default helper for invoking an action and handling errors.
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            This sample demonstrates how to export and import a slide.
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+            <h3>Set up</h3>
+            <button id="setup" class="ms-Button">
+                <span class="ms-Button-label">Set up</span>
+          </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <button id="export-slide-button" class="ms-Button">
+            <span class="ms-Button-label">Export current slide</span>
+        </button>
+            <button id="clear-exported-slide-button" class="ms-Button">
+            <span class="ms-Button-label">Clear exported slide</span>
+        </button>
+            <img id="slide-image" src=""/>
+            <p>Once a slide has been exported, click the <b>Import slide</b> button to insert into the presentation.</p>
+            <p>To add it to a different presentation, open that presentation and select a slide. It will be inserted after the
+                selected slide.</p>
+            <button id="import-slide-button" class="ms-Button">
+            <span class="ms-Button-label">Import slide</span>
+        </button><br>
+            <p>Click the following button to capture an image of the current slide and add it to a new slide at the end of the presentation.</p>
+            <button id="slide-image-button" class="ms-Button">
+            <span class="ms-Button-label">Put slide image on another slide</span>
+        </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+
+        img {
+          border: 5px solid #555;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
+    office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css
+
+    core-js@2.4.1/client/core.min.js
+    @types/core-js
diff --git a/samples/powerpoint/slide-management/get-set-slides.yaml b/samples/powerpoint/slide-management/get-set-slides.yaml
index 208197486..cbb58a752 100644
--- a/samples/powerpoint/slide-management/get-set-slides.yaml
+++ b/samples/powerpoint/slide-management/get-set-slides.yaml
@@ -1,17 +1,17 @@
 order: 4
 id: powerpoint-slide-management-get-set-slides
-name: 'Get, set, load, and save slides'
+name: Get, set, load, and save slides
 description: Get and set one or more selected slides. Load and save one or more slides.
 host: POWERPOINT
 api_set:
     PowerPointApi: '1.5'
 script:
     content: |-
-        $("#getSelectedSlides").on("click", () => tryCatch(getSelectedSlides));
-        $("#setSelectedSlides").on("click", () => tryCatch(setSelectedSlides));
-        $("#deleteSlides").on("click", () => tryCatch(deleteSlides));
-        $("#saveSlideSelection").on("click", () => tryCatch(saveSlideSelection));
-        $("#loadSlideSelection").on("click", () => tryCatch(loadSlideSelection));
+        document.getElementById("getSelectedSlides").addEventListener("click", () => tryCatch(getSelectedSlides));
+        document.getElementById("setSelectedSlides").addEventListener("click", () => tryCatch(setSelectedSlides));
+        document.getElementById("deleteSlides").addEventListener("click", () => tryCatch(deleteSlides));
+        document.getElementById("saveSlideSelection").addEventListener("click", () => tryCatch(saveSlideSelection));
+        document.getElementById("loadSlideSelection").addEventListener("click", () => tryCatch(loadSlideSelection));
 
         async function getSelectedSlides() {
           // Gets the selected slides and displays their IDs on the task pane.
@@ -28,9 +28,11 @@ script:
               allSlidesList[slide.id] = `Slide ${index + 1}`;
             });
 
-            if ($("#id-check-usenative").is(":checked")) {
+            const checkbox = document.getElementById("id-check-usenative") as HTMLInputElement;
+            if (checkbox && checkbox.checked) {
               context.presentation.load("tags");
             }
+
             const slides: PowerPoint.SlideScopedCollection = context.presentation.getSelectedSlides();
             const slideCount = slides.getCount();
             slides.load("items");
@@ -42,8 +44,9 @@ script:
               finalTable += "<tr><td>" + index + " - " + allSlidesList[slide.id] + "</td><td>" + slide.id + "</td></tr>";
             });
             finalTable += "</table>";
-            $("#outputSpan").empty();
-            $("#outputSpan").append(finalTable);
+            const outputSpan = document.getElementById("outputSpan");
+            outputSpan.innerHTML = ""
+            outputSpan.innerHTML += finalTable;
           });
         }
         async function deleteSlides() {
@@ -105,8 +108,9 @@ script:
               savedSlideSelection.push(slide.id);
             });
             finalTable += "</table>";
-            $("#outputSpan").empty();
-            $("#outputSpan").append(finalTable);
+            const outputSpan = document.getElementById("outputSpan");
+            outputSpan.innerHTML = ""
+            outputSpan.innerHTML += finalTable;
           });
         }
 
@@ -129,11 +133,10 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to get selected slides, and how to select specific slides.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
           <button id="getSelectedSlides" class="ms-Button"><span class="ms-Button-label">Get selected slides</span></button>
@@ -145,7 +148,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -164,15 +167,9 @@ style:
           transition: max-height 0.2s ease-out;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/powerpoint/slide-management/get-slide-metadata.yaml b/samples/powerpoint/slide-management/get-slide-metadata.yaml
index 446fd639e..35f71e6be 100644
--- a/samples/powerpoint/slide-management/get-slide-metadata.yaml
+++ b/samples/powerpoint/slide-management/get-slide-metadata.yaml
@@ -1,13 +1,13 @@
 order: 3
 id: powerpoint-basics-get-slide-metadata
 name: Get slide metadata
-description: 'Gets the title, index, and ID of the selected slides.'
+description: Gets the title, index, and ID of the selected slides.
 author: OfficeDev
 host: POWERPOINT
 api_set: {}
 script:
     content: |-
-        $("#get-slide-metadata").on("click", getSlideMetadata);
+        document.getElementById("get-slide-metadata").addEventListener("click", getSlideMetadata);
 
         function getSlideMetadata() {
             Office.context.document.getSelectedDataAsync(Office.CoercionType.SlideRange,
@@ -27,7 +27,6 @@ template:
             <p class="ms-font-m">Demonstrates how to get slide metadata.</p>
             <p class="ms-font-m">Select one or more slides and click <b>Get slide metadata</b> to get the ID, title, and index of the slide(s).</p>
         </section>
-
         <button id="get-slide-metadata" class="ms-Button">
             <span class="ms-Button-label">Get slide metadata</span>
         </button>
@@ -43,17 +42,11 @@ style:
             margin-bottom: 5px;
             margin-left: 20px;
             min-width: 80px;
-        }  
+        }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/powerpoint/slide-management/insert-slides.yaml b/samples/powerpoint/slide-management/insert-slides.yaml
index 7816f9633..9429814d2 100644
--- a/samples/powerpoint/slide-management/insert-slides.yaml
+++ b/samples/powerpoint/slide-management/insert-slides.yaml
@@ -6,10 +6,10 @@ host: POWERPOINT
 api_set:
     PowerPointApi: '1.5'
 script:
-    content: |
-        $("#insert-all-slides").on("click", () => tryCatch(insertAllSlides));
-        $("#insert-after-target-slide").on("click", () => tryCatch(insertAfterSelectedSlide));
-        $("#file").on("change", () => tryCatch(storeFileAsBase64));
+    content: |-
+        document.getElementById("insert-all-slides").addEventListener("click", () => tryCatch(insertAllSlides));
+        document.getElementById("insert-after-target-slide").addEventListener("click", () => tryCatch(insertAfterSelectedSlide));
+        document.getElementById("file").addEventListener("change", () => tryCatch(storeFileAsBase64));
 
         let chosenFileBase64;
 
@@ -71,7 +71,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to insert slides from another presentation into the current presentation.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>
@@ -93,7 +92,7 @@ template:
             <button id="insert-after-target-slide" class="ms-Button">
                     <span class="ms-Button-label">Insert after selected slide</span>
             </button>
-            <p><b>To undo an insertion, click anywhere on the presentation and press Ctrl-Z.</b></p>
+            <p><b>To undo an insertion, click anywhere on the presentation and press <kbd>Ctrl</kbd>+<kbd>Z</kbd>.</b></p>
         </section>
     language: html
 style:
@@ -109,15 +108,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/powerpoint/tags/tags.yaml b/samples/powerpoint/tags/tags.yaml
index c7ff37dd9..b2816d55d 100644
--- a/samples/powerpoint/tags/tags.yaml
+++ b/samples/powerpoint/tags/tags.yaml
@@ -5,13 +5,13 @@ host: POWERPOINT
 api_set:
     PowerPointApi: '1.3'
 script:
-    content: |
-        $("#add-selected-slide-tag").on("click", () => tryCatch(addTagToSelectedSlide));
-        $("#delete-slides-by-audience").on("click", () => tryCatch(deleteSlidesByAudience));
-        $("#add-slide-tags").on("click", () => tryCatch(addMultipleSlideTags));
-        $("#add-shape-tag").on("click", () => tryCatch(addShapeTag));
-        $("#add-presentation-tag").on("click", () => tryCatch(addPresentationTag));
-        $("#delete-presentation-tag").on("click", () => tryCatch(deletePresentationTag));
+    content: |-
+        document.getElementById("add-selected-slide-tag").addEventListener("click", () => tryCatch(addTagToSelectedSlide));
+        document.getElementById("delete-slides-by-audience").addEventListener("click", () => tryCatch(deleteSlidesByAudience));
+        document.getElementById("add-slide-tags").addEventListener("click", () => tryCatch(addMultipleSlideTags));
+        document.getElementById("add-shape-tag").addEventListener("click", () => tryCatch(addShapeTag));
+        document.getElementById("add-presentation-tag").addEventListener("click", () => tryCatch(addPresentationTag));
+        document.getElementById("delete-presentation-tag").addEventListener("click", () => tryCatch(deletePresentationTag));
 
         async function addTagToSelectedSlide() {
           await PowerPoint.run(async function(context) {
@@ -153,39 +153,30 @@ template:
     content: |-
         <section class="ms-Fabric ms-font-m">
             <p>These snippets show how to use tags with the presentation and its slides and shapes.</p>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
-
             <p>1. Add several slides to the deck. Add content to each so they are visually distinct in the thumbnail pane.</p>
-
             <p>2. Select a <i>single</i> slide and press <b>Add tag</b> to tag the slide to be shown only to premium customers.</p>
             <button id="add-selected-slide-tag" class="ms-Button">
                 <span class="ms-Button-label">Add tag</span>
             </button>
-
             <p>3. Repeat step 2 for another slide.</p>
-
             <p>4. Press <b>Delete premium customer slides</b> to remove from the presentation slides that should only be shown to premium customers.</p>
             <button id="delete-slides-by-audience" class="ms-Button">
                 <span class="ms-Button-label">Delete premium customer slides</span>
             </button>
-
             <p>5. Press <b>Add slide tags</b> to add mulitiple tags to the first slide of the presentation.</p>
             <button id="add-slide-tags" class="ms-Button">
                 <span class="ms-Button-label">Add slide tags</span>
             </button>
-
             <p>6. Select the first slide and on the ribbon, navigate <b>Insert</b> > <b>Illustrations</b> > <b>Shapes</b> to add a shape to it. Press <b>Add shape tag</b>.</p>
             <button id="add-shape-tag" class="ms-Button">
                 <span class="ms-Button-label">Add shape tag</span>
             </button>
-
             <p>7. Press <b>Add presentation tag</b>.</p>
             <button id="add-presentation-tag" class="ms-Button">
                 <span class="ms-Button-label">Add presentation tag</span>
             </button>
-
             <p>8. Press <b>Delete presentation tag</b>.</p>
             <button id="delete-presentation-tag" class="ms-Button">
                 <span class="ms-Button-label">Delete presentation tag</span>
@@ -205,15 +196,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/powerpoint/text/get-set-textrange.yaml b/samples/powerpoint/text/get-set-textrange.yaml
index 6a3075502..810332baf 100644
--- a/samples/powerpoint/text/get-set-textrange.yaml
+++ b/samples/powerpoint/text/get-set-textrange.yaml
@@ -1,17 +1,20 @@
 order: 1
 id: powerpoint-text-get-set-textrange
 name: Work with text range selections
-description: 'Get, set, load, and save text range selections.'
+description: Get, set, load, and save text range selections.
 host: POWERPOINT
 api_set:
-    PowerPointApi: '1.5'
+    PowerPointApi: '1.8'
 script:
     content: |
-        $("#getSelectedTextRange").on("click", () => tryCatch(getSelectedTextRange));
-        $("#setSelectedTextRange").on("click", () => tryCatch(setSelectedTextRange));
-        $("#changeColor").on("click", () => tryCatch(changeColor));
-        $("#saveTextSelection").on("click", () => tryCatch(saveTextSelection));
-        $("#loadTextSelection").on("click", () => tryCatch(loadTextSelection));
+        document.getElementById("getSelectedTextRange").addEventListener("click", () => tryCatch(getSelectedTextRange));
+        document.getElementById("setSelectedTextRange").addEventListener("click", () => tryCatch(setSelectedTextRange));
+        document.getElementById("changeColor").addEventListener("click", () => tryCatch(changeColor));
+        document.getElementById("saveTextSelection").addEventListener("click", () => tryCatch(saveTextSelection));
+        document.getElementById("loadTextSelection").addEventListener("click", () => tryCatch(loadTextSelection));
+        document
+          .getElementById("getSelectedTextRangeProperties")
+          .addEventListener("click", () => tryCatch(getSelectedTextRangeComplexProperties));
 
         async function getSelectedTextRange() {
           // Gets the selected text range and prints data about the range on the task pane.
@@ -37,15 +40,16 @@ script:
             txtExplained = txtExplained.replace(/\v/g, "<font color=red>VV</font>");
             let finalTable = "";
             finalTable +=
-              "<br><table border=1 cellpadding=3 cellspacing=0><tr><td bgcolor=#3333EE><font color=white>Index</font></td><td bgcolor=#3333EE><font color=white>Id</font></td></tr>";
+              "<table border=1 cellpadding=3 cellspacing=0><tr><td bgcolor=#3333EE><font color=white>Index</font></td><td bgcolor=#3333EE><font color=white>Id</font></td></tr>";
             finalTable += "<tr><td>Raw</td><td>" + textRange.text + "</td></tr>";
             finalTable += "<tr><td>Html</td><td>" + txtHtml + "</td></tr>";
             finalTable += "<tr><td>Exp</td><td>" + txtExplained + "</td></tr>";
             finalTable += "<tr><td>Start</td><td>" + textRange.start + "</td></tr>";
             finalTable += "<tr><td>Length</td><td>" + textRange.length + "</td></tr>";
             finalTable += "</table>";
-            $("#outputSpan").empty();
-            $("#outputSpan").append(finalTable);
+            const outputSpan = document.getElementById("outputSpan");
+            outputSpan.innerHTML = "";
+            outputSpan.innerHTML += finalTable;
           });
         }
 
@@ -131,12 +135,42 @@ script:
           await PowerPoint.run(async (context) => {
             const slide1: PowerPoint.Slide = context.presentation.slides.getItem(savedTextSlideSelection[0]);
             const shape1: PowerPoint.Shape = slide1.shapes.getItem(savedTextShapeSelection[0]);
-            const textRange: PowerPoint.TextRange = shape1.textFrame.textRange.getSubstring(savedTextTextRangeStart, savedTextTextRangeLength);
+            const textRange: PowerPoint.TextRange = shape1.textFrame.textRange.getSubstring(
+              savedTextTextRangeStart,
+              savedTextTextRangeLength,
+            );
             textRange.setSelected();
             await context.sync();
           });
         }
 
+        async function getSelectedTextRangeComplexProperties() {
+          // Gets navigational (complex) properties of the selected text range.
+          await PowerPoint.run(async (context) => {
+            const textRange: PowerPoint.TextRange = context.presentation.getSelectedTextRange();
+            textRange.load("font,paragraphFormat/bulletFormat,paragraphFormat/horizontalAlignment");
+            await context.sync();
+
+            console.log("Font properties of selected text range:");
+            console.log(`\tallCaps: ${textRange.font.allCaps}`);
+            console.log(`\tbold: ${textRange.font.bold}`);
+            console.log(`\tcolor: ${textRange.font.color}`);
+            console.log(`\tdoubleStrikethrough: ${textRange.font.doubleStrikethrough}`);
+            console.log(`\titalic: ${textRange.font.italic}`);
+            console.log(`\tname: ${textRange.font.name}`);
+            console.log(`\tsize: ${textRange.font.size}`);
+            console.log(`\tsmallCaps: ${textRange.font.smallCaps}`);
+            console.log(`\tstrikethrough: ${textRange.font.strikethrough}`);
+            console.log(`\tsubscript: ${textRange.font.subscript}`);
+            console.log(`\tsuperscript: ${textRange.font.superscript}`);
+            console.log(`\tunderline: ${textRange.font.underline}`);
+
+            console.log("Paragraph format properties of selected text range:");
+            console.log(`\tbulletFormat.visible: ${textRange.paragraphFormat.bulletFormat.visible}`);
+            console.log(`\thorizontalAlignment: ${textRange.paragraphFormat.horizontalAlignment}`);
+          });
+        }
+
         /** Default helper for invoking an action and handling errors. */
         async function tryCatch(callback) {
           try {
@@ -148,22 +182,26 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
-          <p>This sample shows how to get selected text, and how to select specific text.</p>
+            <p>This sample shows how to get selected text, and how to select specific text.</p>
         </section>
         <section class="ms-Fabric samples ms-font-m">
-          <h3>Try it out</h3>
-          <button id="getSelectedTextRange" class="ms-Button"><span class="ms-Button-label">Get selected text range</span></button>
-          <br><button id="setSelectedTextRange" class="ms-Button"><span class="ms-Button-label">Selects the first 10 characters of the selected shape.</span></button>
-          <br><button id="changeColor" class="ms-Button"><span class="ms-Button-label">Change color of selected text</span></button>
-          <br><button id="saveTextSelection" class="ms-Button"><span class="ms-Button-label">Save text selection</span></button>
-          <br><button id="loadTextSelection" class="ms-Button"><span class="ms-Button-label">Load the saved selection</span></button>
-          <span id="outputSpan"></span>
+            <h3>Try it out</h3>
+            <p>Before choosing the <b>Get selected text range</b> button, add text to a slide and select some text.</p>
+            <button id="getSelectedTextRange" class="ms-Button"><span class="ms-Button-label">Get selected text range</span></button>
+            <button id="setSelectedTextRange" class="ms-Button"><span class="ms-Button-label">Selects first 10 characters of selected shape</span></button>
+            <button id="changeColor" class="ms-Button"><span class="ms-Button-label">Change color of selected text</span></button>
+            <button id="saveTextSelection" class="ms-Button"><span class="ms-Button-label">Save text selection</span></button>
+            <button id="loadTextSelection" class="ms-Button"><span class="ms-Button-label">Load the saved selection</span></button>
+            <button id="getSelectedTextRangeProperties" class="ms-Button"><span class="ms-Button-label">Get selected text range properties</span></button>
+            <h4>Output</h4>
+            <span id="outputSpan"></span>
+            <p>Output from choosing the <b>Get selected text range</b> button is displayed in this section.</p>
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -182,15 +220,9 @@ style:
           transition: max-height 0.2s ease-out;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/project/basics/basic-common-api-call.yaml b/samples/project/basics/basic-common-api-call.yaml
index f41fdb59c..95a440ed7 100644
--- a/samples/project/basics/basic-common-api-call.yaml
+++ b/samples/project/basics/basic-common-api-call.yaml
@@ -7,8 +7,8 @@ host: PROJECT
 api_set:
     Selection: 1.1
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
 
         function run() {
             Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => {
@@ -21,24 +21,17 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <button id="run" class="ms-Button">
             <span class="ms-Button-label">Run</span>
         </button>
     language: html
 style:
-    content: |
-        /* Your style goes here */
+    content: /* Your style goes here */
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
-
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/project/default.yaml b/samples/project/default.yaml
index 6b1016a30..27aae8d65 100644
--- a/samples/project/default.yaml
+++ b/samples/project/default.yaml
@@ -5,8 +5,8 @@ author: OfficeDev
 host: PROJECT
 api_set: {}
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
 
         function run() {
             Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => {
@@ -19,7 +19,7 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <button id="run" class="ms-Button">
             <span class="ms-Button-label">Run</span>
         </button>
@@ -37,15 +37,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/web/default.yaml b/samples/web/default.yaml
index 12d365a1d..dba053526 100644
--- a/samples/web/default.yaml
+++ b/samples/web/default.yaml
@@ -5,15 +5,15 @@ author: OfficeDev
 host: WEB
 api_set: {}
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
 
         function run() {
             console.log("Your code goes here");
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <button id="run" class="ms-Button">
             <span class="ms-Button-label">Run</span>
         </button>
@@ -31,12 +31,6 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
-
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+libraries: |-
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/01-basics/basic-api-call-es5.yaml b/samples/word/01-basics/basic-api-call-es5.yaml
index d903c38f9..cf3ab1b5b 100644
--- a/samples/word/01-basics/basic-api-call-es5.yaml
+++ b/samples/word/01-basics/basic-api-call-es5.yaml
@@ -8,7 +8,7 @@ api_set:
     WordApi: '1.1'
 script:
     content: |-
-        $("#run").on("click", () => tryCatch(run));
+        document.getElementById("run").addEventListener("click", () => tryCatch(run));
 
         function run() {
             return Word.run(function (context) {
@@ -55,15 +55,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
-
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/01-basics/basic-api-call.yaml b/samples/word/01-basics/basic-api-call.yaml
index 0fe8313f5..468f154e1 100644
--- a/samples/word/01-basics/basic-api-call.yaml
+++ b/samples/word/01-basics/basic-api-call.yaml
@@ -8,7 +8,7 @@ api_set:
     WordApi: '1.1'
 script:
     content: |-
-        $("#run").on("click", () => tryCatch(run));
+        document.getElementById("run").addEventListener("click", () => tryCatch(run));
 
         async function run() {
             // Gets the current selection and changes the font color to red.
@@ -56,15 +56,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
-
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/01-basics/basic-common-api-call.yaml b/samples/word/01-basics/basic-common-api-call.yaml
index f5d73d949..a94c13e3b 100644
--- a/samples/word/01-basics/basic-common-api-call.yaml
+++ b/samples/word/01-basics/basic-common-api-call.yaml
@@ -7,8 +7,8 @@ host: WORD
 api_set:
     Selection: 1.1
 script:
-    content: |
-        $("#run").on("click", run);
+    content: |-
+        document.getElementById("run").addEventListener("click", run);
 
         function run() {
             Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => {
@@ -21,7 +21,7 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
             This sample executes a code snippet that prints the selected text to the console. Make sure to enter and select text before clicking "Print selection".
         </section>
@@ -42,15 +42,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/10-content-controls/content-control-onadded-event.yaml b/samples/word/10-content-controls/content-control-onadded-event.yaml
index 6e700143a..a21f0fbf7 100644
--- a/samples/word/10-content-controls/content-control-onadded-event.yaml
+++ b/samples/word/10-content-controls/content-control-onadded-event.yaml
@@ -1,16 +1,16 @@
 order: 2
 id: word-content-controls-content-control-onadded-event
 name: On adding content controls
-description: 'Registers, triggers, and deregisters onAdded event that tracks the addition of content controls.'
+description: Registers, triggers, and deregisters onAdded event that tracks the addition of content controls.
 host: WORD
 api_set:
     WordApi: '1.5'
 script:
-    content: |
-        $("#register-event-handler").on("click", () => tryCatch(registerEventHandler));
-        $("#insert-content-controls").on("click", () => tryCatch(insertContentControls));
-        $("#deregister-event-handler").on("click", () => tryCatch(deregisterEventHandler));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("register-event-handler").addEventListener("click", () => tryCatch(registerEventHandler));
+        document.getElementById("insert-content-controls").addEventListener("click", () => tryCatch(insertContentControls));
+        document.getElementById("deregister-event-handler").addEventListener("click", () => tryCatch(deregisterEventHandler));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         let eventContext;
 
@@ -93,14 +93,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to use the onAdded event with content controls.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <span class="ms-font-m">Register event handler.</span>
@@ -131,14 +129,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/10-content-controls/content-control-ondatachanged-event.yaml b/samples/word/10-content-controls/content-control-ondatachanged-event.yaml
index 727773776..9ca1c8006 100644
--- a/samples/word/10-content-controls/content-control-ondatachanged-event.yaml
+++ b/samples/word/10-content-controls/content-control-ondatachanged-event.yaml
@@ -1,16 +1,16 @@
 order: 5
 id: word-content-controls-content-control-ondatachanged-event
 name: On changing data in content controls
-description: 'Registers, triggers, and deregisters onDataChanged event that tracks when data is changed in content controls.'
+description: Registers, triggers, and deregisters onDataChanged event that tracks when data is changed in content controls.
 host: WORD
 api_set:
     WordApi: '1.5'
 script:
-    content: |
-        $("#insert-content-controls").on("click", () => tryCatch(insertContentControls));
-        $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers));
-        $("#deregister-event-handlers").on("click", () => tryCatch(deregisterEventHandlers));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("insert-content-controls").addEventListener("click", () => tryCatch(insertContentControls));
+        document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers));
+        document.getElementById("deregister-event-handlers").addEventListener("click", () => tryCatch(deregisterEventHandlers));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         let eventContexts = [];
 
@@ -110,14 +110,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to use the onDataChanged event on content controls.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <span class="ms-font-m">1. Insert content controls.</span>
@@ -149,14 +147,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/10-content-controls/content-control-ondeleted-event.yaml b/samples/word/10-content-controls/content-control-ondeleted-event.yaml
index 767d4f7aa..cdbf945ff 100644
--- a/samples/word/10-content-controls/content-control-ondeleted-event.yaml
+++ b/samples/word/10-content-controls/content-control-ondeleted-event.yaml
@@ -1,17 +1,17 @@
 order: 7
 id: word-content-controls-content-control-ondeleted-event
 name: On deleting content controls
-description: 'Registers, triggers, and deregisters onDeleted event that tracks the removal of content controls.'
+description: Registers, triggers, and deregisters onDeleted event that tracks the removal of content controls.
 host: WORD
 api_set:
     WordApi: '1.5'
 script:
-    content: |
-        $("#insert-content-controls").on("click", () => tryCatch(insertContentControls));
-        $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers));
-        $("#delete-content-control").on("click", () => tryCatch(deleteContentControl));
-        $("#deregister-event-handlers").on("click", () => tryCatch(deregisterEventHandlers));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("insert-content-controls").addEventListener("click", () => tryCatch(insertContentControls));
+        document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers));
+        document.getElementById("delete-content-control").addEventListener("click", () => tryCatch(deleteContentControl));
+        document.getElementById("deregister-event-handlers").addEventListener("click", () => tryCatch(deregisterEventHandlers));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         let eventContexts = [];
 
@@ -127,14 +127,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to use the onDeleted event on content controls.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <span class="ms-font-m">Insert content controls.</span>
@@ -169,14 +167,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/10-content-controls/content-control-onentered-event.yaml b/samples/word/10-content-controls/content-control-onentered-event.yaml
index d306cbbed..cba1483af 100644
--- a/samples/word/10-content-controls/content-control-onentered-event.yaml
+++ b/samples/word/10-content-controls/content-control-onentered-event.yaml
@@ -1,16 +1,16 @@
 order: 3
 id: word-content-controls-content-control-onentered-event
 name: On entering content controls
-description: 'Registers, triggers, and deregisters onEntered event that tracks when the cursor is placed within content controls.'
+description: Registers, triggers, and deregisters onEntered event that tracks when the cursor is placed within content controls.
 host: WORD
 api_set:
     WordApi: '1.5'
 script:
-    content: |
-        $("#insert-content-controls").on("click", () => tryCatch(insertContentControls));
-        $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers));
-        $("#deregister-event-handlers").on("click", () => tryCatch(deregisterEventHandlers));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("insert-content-controls").addEventListener("click", () => tryCatch(insertContentControls));
+        document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers));
+        document.getElementById("deregister-event-handlers").addEventListener("click", () => tryCatch(deregisterEventHandlers));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         let eventContexts = [];
 
@@ -110,14 +110,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to use the onEntered event on content controls.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <span class="ms-font-m">1. Insert content controls.</span>
@@ -149,14 +147,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/10-content-controls/content-control-onexited-event.yaml b/samples/word/10-content-controls/content-control-onexited-event.yaml
index 34bfbba89..36950eef7 100644
--- a/samples/word/10-content-controls/content-control-onexited-event.yaml
+++ b/samples/word/10-content-controls/content-control-onexited-event.yaml
@@ -1,16 +1,16 @@
 order: 6
 id: word-content-controls-content-control-onexited-event
 name: On exiting content controls
-description: 'Registers, triggers, and deregisters onExited event that tracks when the cursor is removed from within content controls.'
+description: Registers, triggers, and deregisters onExited event that tracks when the cursor is removed from within content controls.
 host: WORD
 api_set:
     WordApi: '1.5'
 script:
-    content: |
-        $("#insert-content-controls").on("click", () => tryCatch(insertContentControls));
-        $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers));
-        $("#deregister-event-handlers").on("click", () => tryCatch(deregisterEventHandlers));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("insert-content-controls").addEventListener("click", () => tryCatch(insertContentControls));
+        document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers));
+        document.getElementById("deregister-event-handlers").addEventListener("click", () => tryCatch(deregisterEventHandlers));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         let eventContexts = [];
 
@@ -110,14 +110,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to use the onExited event on content controls.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <span class="ms-font-m">1. Insert content controls.</span>
@@ -150,14 +148,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml b/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml
index 9b628a304..377dc3061 100644
--- a/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml
+++ b/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml
@@ -1,16 +1,16 @@
 order: 4
 id: word-content-controls-content-control-onselectionchanged-event
 name: On changing selection in content controls
-description: 'Registers, triggers, and deregisters onSelectionChanged event that tracks when selections are changed in content controls.'
+description: Registers, triggers, and deregisters onSelectionChanged event that tracks when selections are changed in content controls.
 host: WORD
 api_set:
     WordApi: '1.5'
 script:
-    content: |
-        $("#insert-content-controls").on("click", () => tryCatch(insertContentControls));
-        $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers));
-        $("#deregister-event-handlers").on("click", () => tryCatch(deregisterEventHandlers));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("insert-content-controls").addEventListener("click", () => tryCatch(insertContentControls));
+        document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers));
+        document.getElementById("deregister-event-handlers").addEventListener("click", () => tryCatch(deregisterEventHandlers));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         let eventContexts = [];
 
@@ -109,14 +109,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to use the onSelectionChanged event on content controls.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <span class="ms-font-m">1. Insert content controls.</span>
@@ -148,14 +146,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/10-content-controls/get-change-tracking-states.yaml b/samples/word/10-content-controls/get-change-tracking-states.yaml
index 9bfca816d..6e7804c55 100644
--- a/samples/word/10-content-controls/get-change-tracking-states.yaml
+++ b/samples/word/10-content-controls/get-change-tracking-states.yaml
@@ -1,4 +1,4 @@
-order: 9
+order: 11
 id: word-content-controls-get-change-tracking-states
 name: Get change tracking states of content controls
 description: Gets change tracking states of content controls.
@@ -7,13 +7,13 @@ host: WORD
 api_set:
     WordApi: '1.5'
 script:
-    content: |
-        $("#turn-on-change-tracking").on("click", () => tryCatch(turnOnChangeTracking));
-        $("#insert-content-control").on("click", () => tryCatch(insertContentControlOnLastParagraph));
-        $("#delete-content-control").on("click", () => tryCatch(deleteFirstContentControl));
-        $("#turn-off-change-tracking").on("click", () => tryCatch(turnOffChangeTracking));
-        $("#log-change-tracking-states").on("click", () => tryCatch(logChangeTrackingStates));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("turn-on-change-tracking").addEventListener("click", () => tryCatch(turnOnChangeTracking));
+        document.getElementById("insert-content-control").addEventListener("click", () => tryCatch(insertContentControlOnLastParagraph));
+        document.getElementById("delete-content-control").addEventListener("click", () => tryCatch(deleteFirstContentControl));
+        document.getElementById("turn-off-change-tracking").addEventListener("click", () => tryCatch(turnOffChangeTracking));
+        document.getElementById("log-change-tracking-states").addEventListener("click", () => tryCatch(logChangeTrackingStates));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function turnOnChangeTracking() {
           // Turns on change tracking.
@@ -121,14 +121,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to insert and delete control controls then get their change tracking state.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
               <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="turn-on-change-tracking" class="ms-Button">
@@ -162,14 +160,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml b/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
index 5c0d11a97..de1450052 100644
--- a/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
+++ b/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
@@ -1,17 +1,17 @@
 order: 8
 id: word-content-controls-insert-and-change-checkbox-content-control
 name: Manage checkbox content controls
-description: 'Inserts, updates, retrieves, and deletes checkbox content controls.'
+description: Inserts, updates, retrieves, and deletes checkbox content controls.
 host: WORD
 api_set:
     WordApi: '1.7'
 script:
-    content: |
-        $("#insert-controls").on("click", () => tryCatch(insertCheckboxContentControls));
-        $("#toggle-control").on("click", () => tryCatch(toggleCheckboxContentControl));
-        $("#change-controls").on("click", () => tryCatch(toggleCheckboxContentControls));
-        $("#delete-control").on("click", () => tryCatch(deleteCheckboxContentControl));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("insert-controls").addEventListener("click", () => tryCatch(insertCheckboxContentControls));
+        document.getElementById("toggle-control").addEventListener("click", () => tryCatch(toggleCheckboxContentControl));
+        document.getElementById("change-controls").addEventListener("click", () => tryCatch(toggleCheckboxContentControls));
+        document.getElementById("delete-control").addEventListener("click", () => tryCatch(deleteCheckboxContentControl));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function insertCheckboxContentControls() {
           // Traverses each paragraph of the document and places a checkbox content control at the beginning of each.
@@ -185,14 +185,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to insert, change, and delete checkbox content controls.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
               <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>
@@ -235,14 +233,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml b/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml
similarity index 89%
rename from samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml
rename to samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml
index 47d422f0b..75d803917 100644
--- a/samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml
+++ b/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml
@@ -1,18 +1,19 @@
-id: word-insert-and-change-combo-box-content-control
+order: 9
+id: word-content-controls-insert-and-change-combo-box-content-control
 name: Manage combo box content controls
-description: 'Inserts, updates, and deletes combo box content controls.'
+description: Inserts, updates, and deletes combo box content controls.
 host: WORD
 api_set:
     WordApi: '1.9'
 script:
-    content: |
-        $("#insert-control").on("click", () => tryCatch(insertComboBoxContentControl));
-        $("#add-item").on("click", () => tryCatch(addItemToComboBoxContentControl));
-        $("#get-items").on("click", () => tryCatch(getListFromComboBoxContentControl));
-        $("#delete-item").on("click", () => tryCatch(deleteItemFromComboBoxContentControl));
-        $("#delete-list").on("click", () => tryCatch(deleteListFromComboBoxContentControl));
-        $("#delete-control").on("click", () => tryCatch(deleteComboBoxContentControl));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("insert-control").addEventListener("click", () => tryCatch(insertComboBoxContentControl));
+        document.getElementById("add-item").addEventListener("click", () => tryCatch(addItemToComboBoxContentControl));
+        document.getElementById("get-items").addEventListener("click", () => tryCatch(getListFromComboBoxContentControl));
+        document.getElementById("delete-item").addEventListener("click", () => tryCatch(deleteItemFromComboBoxContentControl));
+        document.getElementById("delete-list").addEventListener("click", () => tryCatch(deleteListFromComboBoxContentControl));
+        document.getElementById("delete-control").addEventListener("click", () => tryCatch(deleteComboBoxContentControl));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function insertComboBoxContentControl() {
           // Places a combo box content control at the end of the selection.
@@ -28,10 +29,7 @@ script:
         async function addItemToComboBoxContentControl() {
           // Adds the provided list item to the first combo box content control in the selection.
           await Word.run(async (context) => {
-            const listItemText = $("#item-to-add")
-              .val()
-              .toString()
-              .trim();
+            const listItemText = (document.getElementById("item-to-add") as HTMLInputElement).value.trim();
             const selectedRange: Word.Range = context.document.getSelection();
             let selectedContentControl = selectedRange
               .getContentControls({
@@ -98,10 +96,7 @@ script:
         async function deleteItemFromComboBoxContentControl() {
           // Deletes the provided list item from the first combo box content control in the selection.
           await Word.run(async (context) => {
-            const listItemText = $("#item-to-delete")
-              .val()
-              .toString()
-              .trim();
+            const listItemText = (document.getElementById("item-to-delete") as HTMLInputElement).value.trim();
             const selectedRange: Word.Range = context.document.getSelection();
             let selectedContentControl = selectedRange
               .getContentControls({
@@ -246,14 +241,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to insert, change, and delete combo box content controls.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
               <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>
@@ -316,14 +309,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
-    @types/office-js-preview
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/10-content-controls/insert-and-change-content-controls.yaml b/samples/word/10-content-controls/insert-and-change-content-controls.yaml
index 28d1abfee..0221fc952 100644
--- a/samples/word/10-content-controls/insert-and-change-content-controls.yaml
+++ b/samples/word/10-content-controls/insert-and-change-content-controls.yaml
@@ -1,16 +1,16 @@
 order: 1
 id: word-content-controls-insert-and-change-content-controls
 name: Content control basics
-description: 'Inserts, updates, and retrieves content controls.'
+description: Inserts, updates, and retrieves content controls.
 author: OfficeDev
 host: WORD
 api_set:
     WordApi: '1.1'
 script:
-    content: |
-        $("#insert-controls").on("click", () => tryCatch(insertContentControls));
-        $("#change-controls").on("click", () => tryCatch(modifyContentControls));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("insert-controls").addEventListener("click", () => tryCatch(insertContentControls));
+        document.getElementById("change-controls").addEventListener("click", () => tryCatch(modifyContentControls));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function insertContentControls() {
           // Traverses each paragraph of the document and wraps a content control on each with either a even or odd tags.
@@ -104,14 +104,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           This sample demonstrates how to insert and change content control properties.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
               <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <span class="ms-font-m">Insert content controls on each paragraph.</span>
@@ -138,14 +136,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml b/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml
similarity index 89%
rename from samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml
rename to samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml
index 9c4a76147..c91d99dd9 100644
--- a/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml
+++ b/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml
@@ -1,18 +1,19 @@
-id: word-insert-and-change-dropdown-list-content-control
+order: 10
+id: word-content-controls-insert-and-change-dropdown-list-content-control
 name: Manage dropdown list content controls
-description: 'Inserts, updates, and deletes dropdown list content controls.'
+description: Inserts, updates, and deletes dropdown list content controls.
 host: WORD
 api_set:
     WordApi: '1.9'
 script:
-    content: |
-        $("#insert-control").on("click", () => tryCatch(insertDropdownListContentControl));
-        $("#add-item").on("click", () => tryCatch(addItemToDropdownListContentControl));
-        $("#get-items").on("click", () => tryCatch(getListFromDropdownListContentControl));
-        $("#delete-item").on("click", () => tryCatch(deleteItemFromDropdownListContentControl));
-        $("#delete-list").on("click", () => tryCatch(deleteListFromDropdownListContentControl));
-        $("#delete-control").on("click", () => tryCatch(deleteDropdownListContentControl));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("insert-control").addEventListener("click", () => tryCatch(insertDropdownListContentControl));
+        document.getElementById("add-item").addEventListener("click", () => tryCatch(addItemToDropdownListContentControl));
+        document.getElementById("get-items").addEventListener("click", () => tryCatch(getListFromDropdownListContentControl));
+        document.getElementById("delete-item").addEventListener("click", () => tryCatch(deleteItemFromDropdownListContentControl));
+        document.getElementById("delete-list").addEventListener("click", () => tryCatch(deleteListFromDropdownListContentControl));
+        document.getElementById("delete-control").addEventListener("click", () => tryCatch(deleteDropdownListContentControl));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function insertDropdownListContentControl() {
           // Places a dropdown list content control at the end of the selection.
@@ -28,10 +29,7 @@ script:
         async function addItemToDropdownListContentControl() {
           // Adds the provided list item to the first dropdown list content control in the selection.
           await Word.run(async (context) => {
-            const listItemText = $("#item-to-add")
-              .val()
-              .toString()
-              .trim();
+            const listItemText = (document.getElementById("item-to-add") as HTMLInputElement).value.trim();
             const selectedRange: Word.Range = context.document.getSelection();
             let selectedContentControl = selectedRange
               .getContentControls({
@@ -98,10 +96,7 @@ script:
         async function deleteItemFromDropdownListContentControl() {
           // Deletes the provided list item from the first dropdown list content control in the selection.
           await Word.run(async (context) => {
-            const listItemText = $("#item-to-delete")
-              .val()
-              .toString()
-              .trim();
+            const listItemText = (document.getElementById("item-to-delete") as HTMLInputElement).value.trim();
             const selectedRange: Word.Range = context.document.getSelection();
             let selectedContentControl = selectedRange
               .getContentControls({
@@ -248,14 +243,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to insert, change, and delete dropdown list content controls.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>
@@ -318,14 +311,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
-    @types/office-js-preview
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/15-images/insert-and-get-pictures.yaml b/samples/word/15-images/insert-and-get-pictures.yaml
index 5cf88581c..1857f2392 100644
--- a/samples/word/15-images/insert-and-get-pictures.yaml
+++ b/samples/word/15-images/insert-and-get-pictures.yaml
@@ -6,10 +6,10 @@ host: WORD
 api_set:
     WordApiDesktop: '1.1'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#insert").on("click", () => tryCatch(insertImage));
-        $("#get").on("click", () => tryCatch(getImage));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("insert").addEventListener("click", () => tryCatch(insertImage));
+        document.getElementById("get").addEventListener("click", () => tryCatch(getImage));
 
         async function insertImage() {
           // Inserts an image anchored to the last paragraph.
@@ -75,14 +75,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           This sample demonstrates how to insert and get inline pictures in a document.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="insert" class="ms-Button">
@@ -106,15 +104,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/20-lists/insert-list.yaml b/samples/word/20-lists/insert-list.yaml
index 362f4c5bd..801e8ef30 100644
--- a/samples/word/20-lists/insert-list.yaml
+++ b/samples/word/20-lists/insert-list.yaml
@@ -7,9 +7,9 @@ host: WORD
 api_set:
     WordApi: '1.3'
 script:
-    content: |
-        $("#insert-list").on("click", () => tryCatch(insertList));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("insert-list").addEventListener("click", () => tryCatch(insertList));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function insertList() {
           // This example starts a new list with the second paragraph.
@@ -79,14 +79,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           This sample demonstrates how to insert and change lists.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
               <span class="ms-Button-label">Add text</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="insert-list" class="ms-Button">
@@ -108,14 +106,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/20-lists/manage-list-styles.yaml b/samples/word/20-lists/manage-list-styles.yaml
index b6ec1e90b..b382c43d4 100644
--- a/samples/word/20-lists/manage-list-styles.yaml
+++ b/samples/word/20-lists/manage-list-styles.yaml
@@ -7,9 +7,9 @@ host: WORD
 api_set:
     WordApiDesktop: '1.1'
 script:
-    content: |
-        $("#count").on("click", () => tryCatch(getCount));
-        $("#properties").on("click", () => tryCatch(getProperties));
+    content: |-
+        document.getElementById("count").addEventListener("click", () => tryCatch(getCount));
+        document.getElementById("properties").addEventListener("click", () => tryCatch(getProperties));
 
         async function getCount() {
           // Gets the available list styles stored with the document.
@@ -32,7 +32,7 @@ script:
         async function getProperties() {
           // Gets the properties of the specified style.
           await Word.run(async (context) => {
-            const styleName = $("#style-name-to-use").val() as string;
+            const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value;
             if (styleName == "") {
               console.warn("Enter a style name to get properties.");
               return;
@@ -76,7 +76,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample shows how to get the list styles in the current document.
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>
@@ -89,7 +88,6 @@ template:
             <button id="properties" class="ms-Button">
                 <span class="ms-Button-label">Get properties</span>
             </button>
-
         </section>
     language: html
 style:
@@ -106,11 +104,7 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/20-lists/organize-list.yaml b/samples/word/20-lists/organize-list.yaml
index bdae4ea6f..9733c5a65 100644
--- a/samples/word/20-lists/organize-list.yaml
+++ b/samples/word/20-lists/organize-list.yaml
@@ -7,10 +7,10 @@ host: WORD
 api_set:
     WordApi: '1.3'
 script:
-    content: |
-        $("#insert-list").on("click", () => tryCatch(insertOrganizeList));
-        $("#get-list-props").on("click", () => tryCatch(getListProps));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("insert-list").addEventListener("click", () => tryCatch(insertOrganizeList));
+        document.getElementById("get-list-props").addEventListener("click", () => tryCatch(getListProps));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function insertOrganizeList() {
           // Inserts a list starting with the first paragraph then set numbering and bullet types of the list items.
@@ -104,14 +104,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to create and organize a list.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
               <span class="ms-Button-label">Add text</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="insert-list" class="ms-Button">
@@ -136,14 +134,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/25-paragraph/get-paragraph-on-insertion-point.yaml b/samples/word/25-paragraph/get-paragraph-on-insertion-point.yaml
index 69032b5d5..ad67db11b 100644
--- a/samples/word/25-paragraph/get-paragraph-on-insertion-point.yaml
+++ b/samples/word/25-paragraph/get-paragraph-on-insertion-point.yaml
@@ -7,10 +7,10 @@ host: WORD
 api_set:
     WordApi: '1.1'
 script:
-    content: |
-        $("#get-paragraph").on("click", () => tryCatch(getParagraph));
-        $("#get-sentences").on("click", () => tryCatch(getSentences));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("get-paragraph").addEventListener("click", () => tryCatch(getParagraph));
+        document.getElementById("get-sentences").addEventListener("click", () => tryCatch(getSentences));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function getParagraph() {
           await Word.run(async (context) => {
@@ -83,14 +83,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           This sample demonstrates how to get the paragraph and paragraph sentences associated with the current insertion point.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
         <span class="ms-font-m">Select an insertion point in the document.</span><p>
@@ -116,14 +114,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/25-paragraph/get-text.yaml b/samples/word/25-paragraph/get-text.yaml
index 93914ea3b..af1de9577 100644
--- a/samples/word/25-paragraph/get-text.yaml
+++ b/samples/word/25-paragraph/get-text.yaml
@@ -1,15 +1,15 @@
 order: 9
 id: word-paragraph-get-text
 name: Get text
-description: 'Shows how to get paragraph text, including hidden text and text marked for deletion.'
+description: Shows how to get paragraph text, including hidden text and text marked for deletion.
 author: OfficeDev
 host: WORD
 api_set:
     WordApi: '1.7'
 script:
-    content: |
-        $("#run").on("click", () => tryCatch(run));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("run").addEventListener("click", () => tryCatch(run));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function run() {
           await Word.run(async (context) => {
@@ -67,14 +67,12 @@ template:
                         Word</a>.</li>
             </ul>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="run" class="ms-Button">
@@ -95,15 +93,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/25-paragraph/get-word-count.yaml b/samples/word/25-paragraph/get-word-count.yaml
index 2ff326007..95ea7e97d 100644
--- a/samples/word/25-paragraph/get-word-count.yaml
+++ b/samples/word/25-paragraph/get-word-count.yaml
@@ -7,9 +7,9 @@ host: WORD
 api_set:
     WordApi: '1.1'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#count").on("click", () => tryCatch(run));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("count").addEventListener("click", () => tryCatch(run));
 
         async function run() {
           // Counts how many times each term appears in the document.
@@ -91,14 +91,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           This sample demonstrates how to get the count for words and terms in the document body.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
           <h3>Set up</h3>
           <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
           <span class="ms-font-m">Get the word/term count.</span>
@@ -122,15 +120,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/25-paragraph/insert-formatted-text.yaml b/samples/word/25-paragraph/insert-formatted-text.yaml
index a3be43cd4..073882a0e 100644
--- a/samples/word/25-paragraph/insert-formatted-text.yaml
+++ b/samples/word/25-paragraph/insert-formatted-text.yaml
@@ -8,9 +8,9 @@ api_set:
     WordApi: '1.1'
 script:
     content: |-
-        $("#add-text").on("click", () => tryCatch(addFormattedText));
-        $("#add-paragraph").on("click", () => tryCatch(addFormattedParagraph));
-        $("#add-preset").on("click", () => tryCatch(addPreStyledFormattedText));
+        document.getElementById("add-text").addEventListener("click", () => tryCatch(addFormattedText));
+        document.getElementById("add-paragraph").addEventListener("click", () => tryCatch(addFormattedParagraph));
+        document.getElementById("add-preset").addEventListener("click", () => tryCatch(addPreStyledFormattedText));
 
         async function addFormattedText() {
           await Word.run(async (context) => {
@@ -79,7 +79,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample shows how to insert basic formatted text and apply built-in styles.
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="add-text" class="ms-Button">
@@ -107,14 +106,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/25-paragraph/insert-header-and-footer.yaml b/samples/word/25-paragraph/insert-header-and-footer.yaml
index 79af32d30..7e820b803 100644
--- a/samples/word/25-paragraph/insert-header-and-footer.yaml
+++ b/samples/word/25-paragraph/insert-header-and-footer.yaml
@@ -7,14 +7,14 @@ host: WORD
 api_set:
     WordApi: '1.1'
 script:
-    content: |
-        $("#add-header").on("click", () => tryCatch(addHeader));
-        $("#add-footer").on("click", () => tryCatch(addFooter));
-        $("#add-first-page-header").on("click", () => tryCatch(addFirstPageHeader));
-        $("#add-first-page-footer").on("click", () => tryCatch(addFirstPageFooter));
-        $("#add-even-pages-header").on("click", () => tryCatch(addEvenPagesHeader));
-        $("#add-even-pages-footer").on("click", () => tryCatch(addEvenPagesFooter));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("add-header").addEventListener("click", () => tryCatch(addHeader));
+        document.getElementById("add-footer").addEventListener("click", () => tryCatch(addFooter));
+        document.getElementById("add-first-page-header").addEventListener("click", () => tryCatch(addFirstPageHeader));
+        document.getElementById("add-first-page-footer").addEventListener("click", () => tryCatch(addFirstPageFooter));
+        document.getElementById("add-even-pages-header").addEventListener("click", () => tryCatch(addEvenPagesHeader));
+        document.getElementById("add-even-pages-footer").addEventListener("click", () => tryCatch(addEvenPagesFooter));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function addHeader() {
           await Word.run(async (context) => {
@@ -130,7 +130,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample inserts headers and footers in the document.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <p>1. Set up sample text.
@@ -140,7 +139,6 @@ template:
             <p>2. Open the <b>Header & Footer</b> ribbon (refer to <a target="_blank" href="https://support.microsoft.com/office/490423a3-3e5b-4080-aff0-c429ab5d6708">Edit your
                 existing headers and footers</a> for details).
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <h4>Apply to all pages</h4>
@@ -185,14 +183,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/25-paragraph/insert-in-different-locations.yaml b/samples/word/25-paragraph/insert-in-different-locations.yaml
index 43728f436..ad6572d46 100644
--- a/samples/word/25-paragraph/insert-in-different-locations.yaml
+++ b/samples/word/25-paragraph/insert-in-different-locations.yaml
@@ -7,13 +7,13 @@ host: WORD
 api_set:
     WordApi: '1.2'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#before").on("click", () => tryCatch(before));
-        $("#start").on("click", () => tryCatch(start));
-        $("#end").on("click", () => tryCatch(end));
-        $("#after").on("click", () => tryCatch(after));
-        $("#replace").on("click", () => tryCatch(replace));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("before").addEventListener("click", () => tryCatch(before));
+        document.getElementById("start").addEventListener("click", () => tryCatch(start));
+        document.getElementById("end").addEventListener("click", () => tryCatch(end));
+        document.getElementById("after").addEventListener("click", () => tryCatch(after));
+        document.getElementById("replace").addEventListener("click", () => tryCatch(replace));
 
         async function before() {
           await Word.run(async (context) => {
@@ -110,14 +110,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           This sample demonstrates a variety of insert locations available in the API.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                   <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
           <button id="before" class="ms-Button">
@@ -151,14 +149,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/25-paragraph/insert-line-and-page-breaks.yaml b/samples/word/25-paragraph/insert-line-and-page-breaks.yaml
index bccf781f3..140084bfa 100644
--- a/samples/word/25-paragraph/insert-line-and-page-breaks.yaml
+++ b/samples/word/25-paragraph/insert-line-and-page-breaks.yaml
@@ -7,10 +7,10 @@ host: WORD
 api_set:
     WordApi: '1.2'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#line").on("click", () => tryCatch(insertLineBreak));
-        $("#page").on("click", () => tryCatch(insertPageBreak));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("line").addEventListener("click", () => tryCatch(insertLineBreak));
+        document.getElementById("page").addEventListener("click", () => tryCatch(insertPageBreak));
 
         async function insertLineBreak() {
           Word.run(async (context) => {
@@ -63,14 +63,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           This sample demonstrates how to insert page and line breaks.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="line" class="ms-Button">
@@ -95,14 +93,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/25-paragraph/onadded-event.yaml b/samples/word/25-paragraph/onadded-event.yaml
index b1ec4aa9b..9469153a3 100644
--- a/samples/word/25-paragraph/onadded-event.yaml
+++ b/samples/word/25-paragraph/onadded-event.yaml
@@ -1,16 +1,16 @@
 order: 10
 id: word-paragraph-onadded-event
 name: On adding paragraphs
-description: 'Registers, triggers, and deregisters the onParagraphAdded event that tracks the addition of paragraphs.'
+description: Registers, triggers, and deregisters the onParagraphAdded event that tracks the addition of paragraphs.
 host: WORD
 api_set:
     WordApi: '1.6'
 script:
-    content: |
-        $("#register-event-handler").on("click", () => tryCatch(registerEventHandler));
-        $("#insert-paragraphs").on("click", () => tryCatch(insertParagraphs));
-        $("#get-paragraph-by-id").on("click", () => tryCatch(getParagraphById));
-        $("#deregister-event-handler").on("click", () => tryCatch(deregisterEventHandler));
+    content: |-
+        document.getElementById("register-event-handler").addEventListener("click", () => tryCatch(registerEventHandler));
+        document.getElementById("insert-paragraphs").addEventListener("click", () => tryCatch(insertParagraphs));
+        document.getElementById("get-paragraph-by-id").addEventListener("click", () => tryCatch(getParagraphById));
+        document.getElementById("deregister-event-handler").addEventListener("click", () => tryCatch(deregisterEventHandler));
 
         let eventContext;
 
@@ -32,7 +32,7 @@ script:
 
         async function getParagraphById() {
           await Word.run(async (context) => {
-            const paragraphId = $("#paragraph-id").val() as string;
+            const paragraphId = (document.getElementById("paragraph-id") as HTMLInputElement).value;
             const paragraph: Word.Paragraph = context.document.getParagraphByUniqueLocalId(paragraphId);
             paragraph.load();
             await paragraph.context.sync();
@@ -79,7 +79,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to use the onAdded event with paragraphs.
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="register-event-handler" class="ms-Button">
@@ -113,15 +112,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/25-paragraph/onchanged-event.yaml b/samples/word/25-paragraph/onchanged-event.yaml
index 99eb9b070..1653214ae 100644
--- a/samples/word/25-paragraph/onchanged-event.yaml
+++ b/samples/word/25-paragraph/onchanged-event.yaml
@@ -1,16 +1,16 @@
 order: 11
 id: word-paragraph-onchanged-event
 name: On changing content in paragraphs
-description: 'Registers, triggers, and deregisters the onParagraphChanged event that tracks when content is changed in paragraphs.'
+description: Registers, triggers, and deregisters the onParagraphChanged event that tracks when content is changed in paragraphs.
 host: WORD
 api_set:
     WordApi: '1.6'
 script:
-    content: |
-        $("#register-event-handler").on("click", () => tryCatch(registerEventHandler));
-        $("#get-paragraph-by-id").on("click", () => tryCatch(getParagraphById));
-        $("#deregister-event-handler").on("click", () => tryCatch(deregisterEventHandler));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("register-event-handler").addEventListener("click", () => tryCatch(registerEventHandler));
+        document.getElementById("get-paragraph-by-id").addEventListener("click", () => tryCatch(getParagraphById));
+        document.getElementById("deregister-event-handler").addEventListener("click", () => tryCatch(deregisterEventHandler));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         let eventContext;
 
@@ -32,7 +32,7 @@ script:
 
         async function getParagraphById() {
           await Word.run(async (context) => {
-            const paragraphId = $("#paragraph-id").val() as string;
+            const paragraphId = (document.getElementById("paragraph-id") as HTMLInputElement).value;
             const paragraph: Word.Paragraph = context.document.getParagraphByUniqueLocalId(paragraphId);
             paragraph.load();
             await paragraph.context.sync();
@@ -75,14 +75,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to use the onChanged event with paragraphs.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Add paragraphs</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="register-event-handler" class="ms-Button">
@@ -115,15 +113,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/25-paragraph/ondeleted-event.yaml b/samples/word/25-paragraph/ondeleted-event.yaml
index f3f17c979..248a6de4c 100644
--- a/samples/word/25-paragraph/ondeleted-event.yaml
+++ b/samples/word/25-paragraph/ondeleted-event.yaml
@@ -1,16 +1,16 @@
 order: 12
 id: word-paragraph-ondeleted-event
 name: On deleting paragraphs
-description: 'Registers, triggers, and deregisters the onParagraphDeleted event that tracks the removal of paragraphs.'
+description: Registers, triggers, and deregisters the onParagraphDeleted event that tracks the removal of paragraphs.
 host: WORD
 api_set:
     WordApi: '1.6'
 script:
-    content: |
-        $("#register-event-handler").on("click", () => tryCatch(registerEventHandler));
-        $("#delete-paragraph").on("click", () => tryCatch(deleteParagraph));
-        $("#deregister-event-handler").on("click", () => tryCatch(deregisterEventHandler));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("register-event-handler").addEventListener("click", () => tryCatch(registerEventHandler));
+        document.getElementById("delete-paragraph").addEventListener("click", () => tryCatch(deleteParagraph));
+        document.getElementById("deregister-event-handler").addEventListener("click", () => tryCatch(deregisterEventHandler));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         let eventContext;
 
@@ -81,14 +81,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to use the onDeleted event with paragraphs.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Add paragraphs</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="register-event-handler" class="ms-Button">
@@ -116,14 +114,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/25-paragraph/paragraph-properties.yaml b/samples/word/25-paragraph/paragraph-properties.yaml
index 3ff8798e3..b0cb4b0af 100644
--- a/samples/word/25-paragraph/paragraph-properties.yaml
+++ b/samples/word/25-paragraph/paragraph-properties.yaml
@@ -1,20 +1,20 @@
 order: 6
 id: word-paragraph-paragraph-properties
 name: Paragraph properties
-description: 'Sets indentation, space between paragraphs, and other paragraph properties.'
+description: Sets indentation, space between paragraphs, and other paragraph properties.
 author: OfficeDev
 host: WORD
 api_set:
     WordApi: '1.1'
 script:
-    content: |
-        $("#indent").on("click", () => tryCatch(indent));
-        $("#spacing").on("click", () => tryCatch(spacing));
-        $("#space-after").on("click", () => tryCatch(spaceAfter));
-        $("#line-unit-spacing-after").on("click", () => tryCatch(spaceAfterInLines));
-        $("#line-unit-spacing-before").on("click", () => tryCatch(spaceBeforeInLines));
-        $("#align").on("click", () => tryCatch(align));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("indent").addEventListener("click", () => tryCatch(indent));
+        document.getElementById("spacing").addEventListener("click", () => tryCatch(spacing));
+        document.getElementById("space-after").addEventListener("click", () => tryCatch(spaceAfter));
+        document.getElementById("line-unit-spacing-after").addEventListener("click", () => tryCatch(spaceAfterInLines));
+        document.getElementById("line-unit-spacing-before").addEventListener("click", () => tryCatch(spaceBeforeInLines));
+        document.getElementById("align").addEventListener("click", () => tryCatch(align));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function indent() {
           await Word.run(async (context) => {
@@ -104,14 +104,12 @@ template:
         <section class="ms-Fabric ms-font-m">
         This sample demonstrates paragraph property usage.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
               <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="indent" class="ms-Button">
@@ -150,14 +148,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/25-paragraph/search.yaml b/samples/word/25-paragraph/search.yaml
index 6eb205b34..0dc258279 100644
--- a/samples/word/25-paragraph/search.yaml
+++ b/samples/word/25-paragraph/search.yaml
@@ -7,10 +7,10 @@ host: WORD
 api_set:
     WordApi: '1.1'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#basic-search").on("click", () => tryCatch(basicSearch));
-        $("#wildcard-search").on("click", () => tryCatch(wildcardSearch));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("basic-search").addEventListener("click", () => tryCatch(basicSearch));
+        document.getElementById("wildcard-search").addEventListener("click", () => tryCatch(wildcardSearch));
 
         async function basicSearch() {
           // Does a basic text search and highlights matches in the document.
@@ -81,14 +81,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates basic and advanced search capabilities of the API.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="basic-search" class="ms-Button">
@@ -113,14 +111,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/30-properties/get-built-in-properties.yaml b/samples/word/30-properties/get-built-in-properties.yaml
index 0e9c99c9e..0fe8a3dbd 100644
--- a/samples/word/30-properties/get-built-in-properties.yaml
+++ b/samples/word/30-properties/get-built-in-properties.yaml
@@ -8,7 +8,7 @@ api_set:
     WordApi: '1.1'
 script:
     content: |-
-        $("#run").on("click", () => tryCatch(getProperties));
+        document.getElementById("run").addEventListener("click", () => tryCatch(getProperties));
 
         async function getProperties() {
             await Word.run(async (context) => {
@@ -36,7 +36,6 @@ template:
         <section class="ms-Fabric ms-font-m">
           This sample demonstrates how to get the built-in properties of a Word document.
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
             <button id="run" class="ms-Button">
@@ -58,14 +57,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/30-properties/read-write-custom-document-properties.yaml b/samples/word/30-properties/read-write-custom-document-properties.yaml
index eac42034c..b09a55f54 100644
--- a/samples/word/30-properties/read-write-custom-document-properties.yaml
+++ b/samples/word/30-properties/read-write-custom-document-properties.yaml
@@ -8,9 +8,9 @@ api_set:
     WordApi: '1.3'
 script:
     content: |-
-        $("#number").on("click", () => tryCatch(insertNumericProperty));
-        $("#string").on("click", () => tryCatch(insertStringProperty));
-        $("#read").on("click", () => tryCatch(readCustomDocumentProperties));
+        document.getElementById("number").addEventListener("click", () => tryCatch(insertNumericProperty));
+        document.getElementById("string").addEventListener("click", () => tryCatch(insertStringProperty));
+        document.getElementById("read").addEventListener("click", () => tryCatch(readCustomDocumentProperties));
 
         async function insertNumericProperty() {
             await Word.run(async (context) => {
@@ -57,7 +57,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to insert custom document properties of different data types and how to read them.
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
         <h3>Try it out</h3>
             <button id="number" class="ms-Button">
@@ -85,14 +84,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/35-ranges/compare-location.yaml b/samples/word/35-ranges/compare-location.yaml
index e34701b22..ca1a6bcb4 100644
--- a/samples/word/35-ranges/compare-location.yaml
+++ b/samples/word/35-ranges/compare-location.yaml
@@ -7,10 +7,10 @@ host: WORD
 api_set:
     WordApi: '1.3'
 script:
-    content: |
-        $("#compare").on("click", () => tryCatch(compareLocations));
-        $("#compare-to-selection").on("click", () => tryCatch(compareWithSelection));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("compare").addEventListener("click", () => tryCatch(compareLocations));
+        document.getElementById("compare-to-selection").addEventListener("click", () => tryCatch(compareWithSelection));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function compareLocations() {
           // Compares the location of one paragraph in relation to another paragraph.
@@ -83,14 +83,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to compare locations of ranges.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample text</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <h4>Compare location of first paragraph with location of second paragraph</h4>
@@ -119,15 +117,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/35-ranges/get-pages.yaml b/samples/word/35-ranges/get-pages.yaml
new file mode 100644
index 000000000..15f5ca0e4
--- /dev/null
+++ b/samples/word/35-ranges/get-pages.yaml
@@ -0,0 +1,288 @@
+order: 4
+id: word-ranges-get-pages
+name: Work with pages, panes, and windows
+description: Shows how to work with pages, panes, and windows.
+author: yilin4
+host: WORD
+api_set:
+    WordApiDesktop: '1.2'
+script:
+    content: |
+        document.getElementById("get-pages-selected-range").addEventListener("click", () => tryCatch(getPagesOfSelectedRange));
+        document
+          .getElementById("get-pages-third-paragraph")
+          .addEventListener("click", () => tryCatch(getPagesOfThirdParagraph));
+        document
+          .getElementById("get-pages-enclosing-viewport")
+          .addEventListener("click", () => tryCatch(getPagesEnclosingViewport));
+        document.getElementById("get-all-pages").addEventListener("click", () => tryCatch(getAllPages));
+        document.getElementById("get-all-panes").addEventListener("click", () => tryCatch(getAllPanes));
+        document.getElementById("get-all-windows").addEventListener("click", () => tryCatch(getAllWindows));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+
+        async function getPagesOfSelectedRange() {
+          await Word.run(async (context) => {
+            // Gets pages of the selection.
+            const pages: Word.PageCollection = context.document.getSelection().pages;
+            pages.load();
+            await context.sync();
+
+            // Log info for pages included in selection.
+            console.log(pages);
+            const pagesIndexes = [];
+            const pagesText = [];
+            for (let i = 0; i < pages.items.length; i++) {
+              const page = pages.items[i];
+              page.load("index");
+              pagesIndexes.push(page);
+
+              const range = page.getRange();
+              range.load("text");
+              pagesText.push(range);
+            }
+
+            await context.sync();
+
+            for (let i = 0; i < pagesIndexes.length; i++) {
+              console.log(`Index info for page ${i + 1} in the selection: ${pagesIndexes[i].index}`);
+              console.log("Text of that page in the selection:", pagesText[i].text);
+            }
+          });
+        }
+
+        async function getPagesOfThirdParagraph() {
+          await Word.run(async (context) => {
+            // Gets the pages that contain the third paragraph.
+            const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
+            paragraphs.load();
+            await context.sync();
+
+            const paraThree = paragraphs.items[2];
+            const rangeOfParagraph = paraThree.getRange();
+            const pages: Word.PageCollection = rangeOfParagraph.pages;
+            pages.load();
+            await context.sync();
+
+            // Log info for pages in range.
+            console.log(pages);
+            const pagesIndexes = [];
+            const pagesText = [];
+            for (let i = 0; i < pages.items.length; i++) {
+              const page = pages.items[i];
+              page.load("index");
+              pagesIndexes.push(page);
+
+              const range = page.getRange();
+              range.load("text");
+              pagesText.push(range);
+            }
+
+            await context.sync();
+
+            for (let i = 0; i < pagesIndexes.length; i++) {
+              console.log(`Index of page ${i + 1} that contains the third paragraph: ${pagesIndexes[i].index}`);
+              console.log("Text of that page:", pagesText[i].text);
+            }
+          });
+        }
+
+        async function getPagesEnclosingViewport() {
+          await Word.run(async (context) => {
+            // Gets the pages enclosing the viewport.
+
+            // Get the active window.
+            const activeWindow: Word.Window = context.document.activeWindow;
+            activeWindow.load();
+
+            // Get the active pane.
+            const activePane: Word.Pane = activeWindow.activePane;
+            activePane.load();
+
+            // Get pages enclosing the viewport.
+            const pages: Word.PageCollection = activePane.pagesEnclosingViewport;
+            pages.load();
+
+            await context.sync();
+
+            // Log the number of pages.
+            const pageCount = pages.items.length;
+            console.log(`Number of pages enclosing the viewport: ${pageCount}`);
+
+            // Log index info of these pages.
+            const pagesIndexes = [];
+            for (let i = 0; i < pageCount; i++) {
+              const page = pages.items[i];
+              page.load("index");
+              pagesIndexes.push(page);
+            }
+
+            await context.sync();
+
+            for (let i = 0; i < pagesIndexes.length; i++) {
+              console.log(`Page index: ${pagesIndexes[i].index}`);
+            }
+          });
+        }
+
+        async function getAllPages() {
+          await Word.run(async (context) => {
+            // Gets the first paragraph of each page.
+            console.log("Getting first paragraph of each page...");
+
+            // Get the active window.
+            const activeWindow: Word.Window = context.document.activeWindow;
+            activeWindow.load();
+
+            // Get the active pane.
+            const activePane: Word.Pane = activeWindow.activePane;
+            activePane.load();
+
+            // Get all pages.
+            const pages: Word.PageCollection = activePane.pages;
+            pages.load();
+
+            await context.sync();
+
+            // Get page index and paragraphs of each page.
+            const pagesIndexes = [];
+            const pagesNumberOfParagraphs = [];
+            const pagesFirstParagraphText = [];
+            for (let i = 0; i < pages.items.length; i++) {
+              const page = pages.items[i];
+              page.load("index");
+              pagesIndexes.push(page);
+
+              const paragraphs = page.getRange().paragraphs;
+              paragraphs.load("items/length");
+              pagesNumberOfParagraphs.push(paragraphs);
+
+              const firstParagraph = paragraphs.getFirst();
+              firstParagraph.load("text");
+              pagesFirstParagraphText.push(firstParagraph);
+            }
+
+            await context.sync();
+
+            for (let i = 0; i < pagesIndexes.length; i++) {
+              console.log(`Page index: ${pagesIndexes[i].index}`);
+              console.log(`Number of paragraphs: ${pagesNumberOfParagraphs[i].items.length}`);
+              console.log("First paragraph's text:", pagesFirstParagraphText[i].text);
+            }
+          });
+        }
+
+        async function getAllPanes() {
+          await Word.run(async (context) => {
+            // Gets all the panes in the active document window.
+
+            // Get the active window.
+            const activeWindow: Word.Window = context.document.activeWindow;
+            activeWindow.load("panes/items/length");
+
+            await context.sync();
+
+            const panes: Word.PaneCollection = activeWindow.panes;
+            console.log(`Number of panes in the current document window: ${panes.items.length}`);
+          });
+        }
+
+        async function getAllWindows() {
+          await Word.run(async (context) => {
+            // Gets the document windows.
+            const windows: Word.WindowCollection = context.document.windows;
+            windows.load("windows/items/length");
+
+            await context.sync();
+
+            console.log(`Number of windows for this document: ${windows.items.length}`);
+          });
+        }
+
+        async function setup() {
+          await Word.run(async (context) => {
+            const body: Word.Body = context.document.body;
+            body.clear();
+            body.insertBreak(Word.BreakType.page, Word.InsertLocation.end);
+            body.insertParagraph(
+              "Themes and styles also help keep your document coordinated. When you click design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme.",
+              "End"
+            );
+            body.insertText(
+              "Save time in Word with new buttons that show up where you need them. To change the way a picture fits in your document, click it and a button for layout options appears next to it. When you work on a table, click where you want to add a row or a column, and then click the plus sign.",
+              "Start"
+            );
+            body.insertParagraph(
+              "Do you want to create a solution that extends the functionality of Word? You can use the Office Add-ins platform to extend Word clients running on the web, on a Windows desktop, or on a Mac.",
+              "Start"
+            );
+            body.paragraphs
+              .getLast()
+              .insertText(
+                "Use add-in commands to extend the Word UI and launch task panes that run JavaScript that interacts with the content in a Word document. Any code that you can run in a browser can run in a Word add-in. Add-ins that interact with content in a Word document create requests to act on Word objects and synchronize object state.",
+                "Replace"
+              );
+          });
+        }
+
+        // Default helper for invoking an action and handling errors.
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            This sample demonstrates how to work with pages, panes, and windows.
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+            <h3>Set up</h3>
+            <button id="setup" class="ms-Button">
+                <span class="ms-Button-label">Add text</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <button id="get-pages-selected-range" class="ms-Button">
+            <span class="ms-Button-label">Get page info for selection</span>
+          </button>
+            <button id="get-pages-third-paragraph" class="ms-Button">
+            <span class="ms-Button-label">Get the third paragraph's page info</span>
+          </button>
+            <button id="get-pages-enclosing-viewport" class="ms-Button">
+            <span class="ms-Button-label">Get pages enclosing viewport</span>
+          </button>
+            <button id="get-all-pages" class="ms-Button">
+            <span class="ms-Button-label">Get all pages</span>
+          </button>
+          <button id="get-all-panes" class="ms-Button">
+            <span class="ms-Button-label">Get all panes</span>
+          </button>
+          <button id="get-all-windows" class="ms-Button">
+            <span class="ms-Button-label">Get all windows</span>
+          </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/35-ranges/scroll-to-range.yaml b/samples/word/35-ranges/scroll-to-range.yaml
index e7a3c759c..b7fd13481 100644
--- a/samples/word/35-ranges/scroll-to-range.yaml
+++ b/samples/word/35-ranges/scroll-to-range.yaml
@@ -7,10 +7,10 @@ host: WORD
 api_set:
     WordApi: '1.2'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#scroll").on("click", () => tryCatch(scroll));
-        $("#scroll-end").on("click", () => tryCatch(scrollEnd));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("scroll").addEventListener("click", () => tryCatch(scroll));
+        document.getElementById("scroll-end").addEventListener("click", () => tryCatch(scrollEnd));
 
         async function scroll() {
           await Word.run(async (context) => {
@@ -63,14 +63,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           This sample demonstrates how to scroll to a range.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
               <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="scroll" class="ms-Button">
@@ -95,14 +93,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/35-ranges/split-words-of-first-paragraph.yaml b/samples/word/35-ranges/split-words-of-first-paragraph.yaml
index b01ffe2a0..b0db6d9a3 100644
--- a/samples/word/35-ranges/split-words-of-first-paragraph.yaml
+++ b/samples/word/35-ranges/split-words-of-first-paragraph.yaml
@@ -1,15 +1,15 @@
 order: 2
 id: word-ranges-split-words-of-first-paragraph
 name: Split a paragraph into ranges
-description: 'Splits a paragraph into word ranges and then traverses all the ranges to format each word, producing a "karaoke" effect.'
+description: Splits a paragraph into word ranges and then traverses all the ranges to format each word, producing a "karaoke" effect.
 author: OfficeDev
 host: WORD
 api_set:
     WordApi: '1.3'
 script:
-    content: |
-        $("#setup").on("click", () => tryCatch(setup));
-        $("#highlight").on("click", () => tryCatch(highlightWords));
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("highlight").addEventListener("click", () => tryCatch(highlightWords));
 
         async function highlightWords() {
           await Word.run(async (context) => {
@@ -62,18 +62,16 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <section class="ms-Fabric ms-font-m">
            This sample demonstrates splitting and traversing ranges.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample text</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="highlight" class="ms-Button">
@@ -94,15 +92,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/40-tables/manage-custom-style.yaml b/samples/word/40-tables/manage-custom-style.yaml
index 27508035a..cfd5c0258 100644
--- a/samples/word/40-tables/manage-custom-style.yaml
+++ b/samples/word/40-tables/manage-custom-style.yaml
@@ -6,23 +6,23 @@ host: WORD
 api_set:
     WordApiDesktop: '1.1'
 script:
-    content: |
-        $("#add-style").on("click", () => tryCatch(addStyle));
-        $("#apply-style").on("click", () => tryCatch(applyStyle));
-        $("#show-style-properties").on("click", () => tryCatch(getTableStyle));
-        $("#set-alignment").on("click", () => tryCatch(setAlignment));
-        $("#set-allow-break-across-page").on("click", () => tryCatch(setAllowBreakAcrossPage));
-        $("#set-top-cell-margin").on("click", () => tryCatch(setTopCellMargin));
-        $("#set-bottom-cell-margin").on("click", () => tryCatch(setBottomCellMargin));
-        $("#set-left-cell-margin").on("click", () => tryCatch(setLeftCellMargin));
-        $("#set-right-cell-margin").on("click", () => tryCatch(setRightCellMargin));
-        $("#set-cell-spacing").on("click", () => tryCatch(setCellSpacing));
-        $("#delete-style").on("click", () => tryCatch(deleteStyle));
-        $("#import-styles-from-json").on("click", () => tryCatch(importStylesFromJson));
+    content: |-
+        document.getElementById("add-style").addEventListener("click", () => tryCatch(addStyle));
+        document.getElementById("apply-style").addEventListener("click", () => tryCatch(applyStyle));
+        document.getElementById("show-style-properties").addEventListener("click", () => tryCatch(getTableStyle));
+        document.getElementById("set-alignment").addEventListener("click", () => tryCatch(setAlignment));
+        document.getElementById("set-allow-break-across-page").addEventListener("click", () => tryCatch(setAllowBreakAcrossPage));
+        document.getElementById("set-top-cell-margin").addEventListener("click", () => tryCatch(setTopCellMargin));
+        document.getElementById("set-bottom-cell-margin").addEventListener("click", () => tryCatch(setBottomCellMargin));
+        document.getElementById("set-left-cell-margin").addEventListener("click", () => tryCatch(setLeftCellMargin));
+        document.getElementById("set-right-cell-margin").addEventListener("click", () => tryCatch(setRightCellMargin));
+        document.getElementById("set-cell-spacing").addEventListener("click", () => tryCatch(setCellSpacing));
+        document.getElementById("delete-style").addEventListener("click", () => tryCatch(deleteStyle));
+        document.getElementById("import-styles-from-json").addEventListener("click", () => tryCatch(importStylesFromJson));
 
         async function addStyle() {
           // Adds a new table style.
-          const newStyleName = $("#new-style-name").val() as string;
+          const newStyleName = (document.getElementById("new-style-name") as HTMLInputElement).value;
           if (newStyleName == "") {
             console.warn("Enter a style name to add.");
             return;
@@ -49,7 +49,7 @@ script:
 
         async function applyStyle() {
           // Applies the specified style to a new table.
-          const styleName = $("#style-name").val() as string;
+          const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
           if (styleName == "") {
             console.warn("Enter a style name to apply.");
             return;
@@ -83,9 +83,7 @@ script:
 
         async function getTableStyle() {
           // Gets the table style properties and displays them in the form.
-          const styleName = $("#style-name")
-            .val()
-            .toString();
+          const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
           if (styleName == "") {
             console.warn("Please input a table style name.");
             return;
@@ -102,30 +100,26 @@ script:
             }
 
             console.log(tableStyle);
-            $("#alignment").val(tableStyle.alignment);
-            $("#allow-break-across-page").val(tableStyle.allowBreakAcrossPage.toString());
-            $("#top-cell-margin").val(tableStyle.topCellMargin);
-            $("#bottom-cell-margin").val(tableStyle.bottomCellMargin);
-            $("#left-cell-margin").val(tableStyle.leftCellMargin);
-            $("#right-cell-margin").val(tableStyle.rightCellMargin);
-            $("#cell-spacing").val(tableStyle.cellSpacing);
+            (document.getElementById("alignment") as HTMLInputElement).value = tableStyle.alignment;
+            (document.getElementById("allow-break-across-page") as HTMLInputElement).value = tableStyle.allowBreakAcrossPage.toString();
+            (document.getElementById("top-cell-margin") as HTMLInputElement).value = tableStyle.topCellMargin;
+            (document.getElementById("bottom-cell-margin") as HTMLInputElement).value = tableStyle.bottomCellMargin;
+            (document.getElementById("left-cell-margin") as HTMLInputElement).value = tableStyle.leftCellMargin;
+            (document.getElementById("right-cell-margin") as HTMLInputElement).value = tableStyle.rightCellMargin;
+            (document.getElementById("cell-spacing") as HTMLInputElement).value = tableStyle.cellSpacing;
           });
         }
 
         async function setAlignment() {
           // Sets the table alignment.
-          const styleName = $("#style-name")
-            .val()
-            .toString();
+          const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
           if (styleName == "") {
             console.warn("Please input a table style name.");
             return;
           }
 
           await Word.run(async (context) => {
-            const alignment = $("#alignment")
-              .val()
-              .toString();
+            const alignment = (document.getElementById("alignment") as HTMLInputElement).value;
             const tableStyle: Word.TableStyle = context.document.getStyles().getByName(styleName).tableStyle;
             tableStyle.alignment = alignment as Word.Alignment;
             await context.sync();
@@ -138,16 +132,14 @@ script:
 
         async function setAllowBreakAcrossPage() {
           // Sets the allowBreakAcrossPage property.
-          const styleName = $("#style-name")
-            .val()
-            .toString();
+          const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
           if (styleName == "") {
             console.warn("Please input a table style name.");
             return;
           }
 
           await Word.run(async (context) => {
-            const allowBreakAcrossPage = $("#allow-break-across-page").val() as string;
+            const allowBreakAcrossPage = (document.getElementById("allow-break-across-page") as HTMLInputElement).value;
             const tableStyle: Word.TableStyle = context.document.getStyles().getByName(styleName).tableStyle;
             tableStyle.allowBreakAcrossPage = allowBreakAcrossPage === "true";
             await context.sync();
@@ -160,20 +152,14 @@ script:
 
         async function setTopCellMargin() {
           // Sets the top cell margin.
-          const styleName = $("#style-name")
-            .val()
-            .toString();
+          const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
           if (styleName == "") {
             console.warn("Please input a table style name.");
             return;
           }
 
           await Word.run(async (context) => {
-            const topCellMargin = Number(
-              $("#top-cell-margin")
-                .val()
-                .toString()
-            );
+            const topCellMargin = Number((document.getElementById("top-cell-margin") as HTMLInputElement).value);
             const tableStyle: Word.TableStyle = context.document.getStyles().getByName(styleName).tableStyle;
             tableStyle.topCellMargin = topCellMargin;
             await context.sync();
@@ -186,20 +172,14 @@ script:
 
         async function setBottomCellMargin() {
           // Sets the bottom cell margin.
-          const styleName = $("#style-name")
-            .val()
-            .toString();
+          const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
           if (styleName == "") {
             console.warn("Please input a table style name.");
             return;
           }
 
           await Word.run(async (context) => {
-            const bottomCellMargin = Number(
-              $("#bottom-cell-margin")
-                .val()
-                .toString()
-            );
+            const bottomCellMargin = Number((document.getElementById("bottom-cell-margin") as HTMLInputElement).value);
             const tableStyle: Word.TableStyle = context.document.getStyles().getByName(styleName).tableStyle;
             tableStyle.bottomCellMargin = bottomCellMargin;
             await context.sync();
@@ -212,20 +192,14 @@ script:
 
         async function setLeftCellMargin() {
           // Sets the left cell margin.
-          const styleName = $("#style-name")
-            .val()
-            .toString();
+          const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
           if (styleName == "") {
             console.warn("Please input a table style name.");
             return;
           }
 
           await Word.run(async (context) => {
-            const leftCellMargin = Number(
-              $("#left-cell-margin")
-                .val()
-                .toString()
-            );
+            const leftCellMargin = Number((document.getElementById("left-cell-margin") as HTMLInputElement).value);
             const tableStyle: Word.TableStyle = context.document.getStyles().getByName(styleName).tableStyle;
             tableStyle.leftCellMargin = leftCellMargin;
             await context.sync();
@@ -238,20 +212,14 @@ script:
 
         async function setRightCellMargin() {
           // Sets the right cell margin.
-          const styleName = $("#style-name")
-            .val()
-            .toString();
+          const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
           if (styleName == "") {
             console.warn("Please input a table style name.");
             return;
           }
 
           await Word.run(async (context) => {
-            const rightCellMargin = Number(
-              $("#right-cell-margin")
-                .val()
-                .toString()
-            );
+            const rightCellMargin = Number((document.getElementById("right-cell-margin") as HTMLInputElement).value);
             const tableStyle: Word.TableStyle = context.document.getStyles().getByName(styleName).tableStyle;
             tableStyle.rightCellMargin = rightCellMargin;
             await context.sync();
@@ -264,20 +232,14 @@ script:
 
         async function setCellSpacing() {
           // Sets the cell spacing.
-          const styleName = $("#style-name")
-            .val()
-            .toString();
+          const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
           if (styleName == "") {
             console.warn("Please input a table style name.");
             return;
           }
 
           await Word.run(async (context) => {
-            const cellSpacing = Number(
-              $("#cell-spacing")
-                .val()
-                .toString()
-            );
+            const cellSpacing = Number((document.getElementById("cell-spacing") as HTMLInputElement).value);
             const tableStyle: Word.TableStyle = context.document.getStyles().getByName(styleName).tableStyle;
             tableStyle.cellSpacing = cellSpacing;
             await context.sync();
@@ -290,7 +252,7 @@ script:
 
         async function deleteStyle() {
           // Deletes the custom style.
-          const styleName = $("#style-name-to-delete").val() as string;
+          const styleName = (document.getElementById("style-name-to-delete") as HTMLInputElement).value;
           if (styleName == "") {
             console.warn("Enter a style name to delete.");
             return;
@@ -316,6 +278,10 @@ script:
             const str =
               '{"styles":[{"baseStyle":"Default Paragraph Font","builtIn":false,"inUse":true,"linked":false,"nameLocal":"NewCharStyle","priority":2,"quickStyle":true,"type":"Character","unhideWhenUsed":false,"visibility":false,"paragraphFormat":null,"font":{"name":"DengXian Light","size":16.0,"bold":true,"italic":false,"color":"#F1A983","underline":"None","subscript":false,"superscript":true,"strikeThrough":true,"doubleStrikeThrough":false,"highlightColor":null,"hidden":false},"shading":{"backgroundPatternColor":"#FF0000"}},{"baseStyle":"Normal","builtIn":false,"inUse":true,"linked":false,"nextParagraphStyle":"NewParaStyle","nameLocal":"NewParaStyle","priority":1,"quickStyle":true,"type":"Paragraph","unhideWhenUsed":false,"visibility":false,"paragraphFormat":{"alignment":"Centered","firstLineIndent":0.0,"keepTogether":false,"keepWithNext":false,"leftIndent":72.0,"lineSpacing":18.0,"lineUnitAfter":0.0,"lineUnitBefore":0.0,"mirrorIndents":false,"outlineLevel":"OutlineLevelBodyText","rightIndent":72.0,"spaceAfter":30.0,"spaceBefore":30.0,"widowControl":true},"font":{"name":"DengXian","size":14.0,"bold":true,"italic":true,"color":"#8DD873","underline":"Single","subscript":false,"superscript":false,"strikeThrough":false,"doubleStrikeThrough":true,"highlightColor":null,"hidden":false},"shading":{"backgroundPatternColor":"#00FF00"}},{"baseStyle":"Table Normal","builtIn":false,"inUse":true,"linked":false,"nextParagraphStyle":"NewTableStyle","nameLocal":"NewTableStyle","priority":100,"type":"Table","unhideWhenUsed":false,"visibility":false,"paragraphFormat":{"alignment":"Left","firstLineIndent":0.0,"keepTogether":false,"keepWithNext":false,"leftIndent":0.0,"lineSpacing":12.0,"lineUnitAfter":0.0,"lineUnitBefore":0.0,"mirrorIndents":false,"outlineLevel":"OutlineLevelBodyText","rightIndent":0.0,"spaceAfter":0.0,"spaceBefore":0.0,"widowControl":true},"font":{"name":"DengXian","size":20.0,"bold":false,"italic":true,"color":"#D86DCB","underline":"None","subscript":false,"superscript":false,"strikeThrough":false,"doubleStrikeThrough":false,"highlightColor":null,"hidden":false},"tableStyle":{"allowBreakAcrossPage":true,"alignment":"Left","bottomCellMargin":0.0,"leftCellMargin":0.08,"rightCellMargin":0.08,"topCellMargin":0.0,"cellSpacing":0.0},"shading":{"backgroundPatternColor":"#60CAF3"}}]}';
             const styles = context.document.importStylesFromJson(str);
+
+            // If you'd like to set how conflicting styles are handled, use the importedStylesConflictBehavior parameter that was introduced in the Desktop 1.1 requirement set. "Ignore" is the default.
+            ////const styles = context.document.importStylesFromJson(str, Word.ImportedStylesConflictBehavior.Ignore);
+
             await context.sync();
             console.log("Styles imported from JSON:", styles);
           });
@@ -338,7 +304,6 @@ template:
             <p><b>Important</b>: Some TableStyle properties are currently in preview. If this snippet doesn't work, try using Word
                 on a different platform.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <h4>Add a new table style</h4>
@@ -362,7 +327,6 @@ template:
                 <span class="ms-Button-label">Display style properties</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h4>Update custom style</h4> <label class="msLabel">Alignment:</label>
             <select id="alignment">
@@ -378,7 +342,6 @@ template:
                     <span class="ms-Button-label">Set alignment</span>
               </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <label style="msLabel">allowBreakAcrossPage:</label>
             <select id="allow-break-across-page">
@@ -390,7 +353,6 @@ template:
                     <span class="ms-Button-label">Set allowBreakAcrossPage property</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <label class="msLabel">Top cell margin:</label>
             <input id="top-cell-margin" type="text" />
@@ -399,7 +361,6 @@ template:
                     <span class="ms-Button-label">Set top cell margin</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <label class="msLabel">Bottom cell margin:</label>
             <input id="bottom-cell-margin" type="text" />
@@ -408,7 +369,6 @@ template:
                     <span class="ms-Button-label">Set bottom cell margin</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <label class="msLabel">Left cell margin:</label>
             <input id="left-cell-margin" type="text" />
@@ -417,7 +377,6 @@ template:
                     <span class="ms-Button-label">Set left cell margin</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <label class="msLabel">Right cell margin:</label>
             <input id="right-cell-margin" type="text" />
@@ -426,7 +385,6 @@ template:
                     <span class="ms-Button-label">Set right cell margin</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <label class="msLabel">Cell spacing:</label>
             <input id="cell-spacing" type="text" />
@@ -435,7 +393,6 @@ template:
                     <span class="ms-Button-label">Set cell spacing</span>
             </button>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h4>Delete custom style</h4>
             <label style="margin-left: 20px">Style name:</label>
@@ -445,7 +402,6 @@ template:
             <span class="ms-Button-label">Delete style</span>
             </button>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h4>Import styles from JSON string</h4>
             <button id="import-styles-from-json" class="ms-Button margin">
@@ -454,7 +410,7 @@ template:
         </section>
     language: html
 style:
-    content: |
+    content: |-
         section.samples {
             margin-top: 20px;
         }
@@ -471,15 +427,9 @@ style:
           margin-bottom: 5px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/40-tables/manage-formatting.yaml b/samples/word/40-tables/manage-formatting.yaml
index b00988d0e..9929afcd4 100644
--- a/samples/word/40-tables/manage-formatting.yaml
+++ b/samples/word/40-tables/manage-formatting.yaml
@@ -1,23 +1,23 @@
 order: 2
 id: word-tables-manage-formatting
 name: Table formatting
-description: 'Gets the formatting details of a table, a table row, and a table cell, including borders, alignment, and cell padding.'
+description: Gets the formatting details of a table, a table row, and a table cell, including borders, alignment, and cell padding.
 author: OfficeDev
 host: WORD
 api_set:
     WordApi: '1.3'
 script:
-    content: |
-        $("#get-table-alignment").on("click", () => tryCatch(getTableAlignment));
-        $("#get-table-border").on("click", () => tryCatch(getTableBorder));
-        $("#get-table-cell-padding").on("click", () => tryCatch(getTableCellPadding));
-        $("#get-table-row-alignment").on("click", () => tryCatch(getTableRowAlignment));
-        $("#get-table-row-border").on("click", () => tryCatch(getTableRowBorder));
-        $("#get-table-row-cell-padding").on("click", () => tryCatch(getTableRowCellPadding));
-        $("#get-table-cell-alignment").on("click", () => tryCatch(getTableCellAlignment));
-        $("#get-table-cell-border").on("click", () => tryCatch(getTableCellBorder));
-        $("#get-table-cell-cell-padding").on("click", () => tryCatch(getTableCellCellPadding));
-        $("#setup").on("click", () => tryCatch(insertTable));
+    content: |-
+        document.getElementById("get-table-alignment").addEventListener("click", () => tryCatch(getTableAlignment));
+        document.getElementById("get-table-border").addEventListener("click", () => tryCatch(getTableBorder));
+        document.getElementById("get-table-cell-padding").addEventListener("click", () => tryCatch(getTableCellPadding));
+        document.getElementById("get-table-row-alignment").addEventListener("click", () => tryCatch(getTableRowAlignment));
+        document.getElementById("get-table-row-border").addEventListener("click", () => tryCatch(getTableRowBorder));
+        document.getElementById("get-table-row-cell-padding").addEventListener("click", () => tryCatch(getTableRowCellPadding));
+        document.getElementById("get-table-cell-alignment").addEventListener("click", () => tryCatch(getTableCellAlignment));
+        document.getElementById("get-table-cell-border").addEventListener("click", () => tryCatch(getTableCellBorder));
+        document.getElementById("get-table-cell-cell-padding").addEventListener("click", () => tryCatch(getTableCellCellPadding));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(insertTable));
 
         async function getTableAlignment() {
           // Gets alignment details about the first table in the document.
@@ -171,7 +171,6 @@ template:
             This sample shows how to get various formatting details about a table, a table row, and a table cell, including
             borders, alignment, and cell padding.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
@@ -232,14 +231,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/40-tables/table-cell-access.yaml b/samples/word/40-tables/table-cell-access.yaml
index 122a4f1b5..c4389b9d7 100644
--- a/samples/word/40-tables/table-cell-access.yaml
+++ b/samples/word/40-tables/table-cell-access.yaml
@@ -7,9 +7,9 @@ host: WORD
 api_set:
     WordApi: '1.3'
 script:
-    content: |
-        $("#run").on("click", () => tryCatch(getTableCell));
-        $("#setup").on("click", () => tryCatch(insertTable));
+    content: |-
+        document.getElementById("run").addEventListener("click", () => tryCatch(getTableCell));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(insertTable));
 
         async function getTableCell() {
           // Gets the content of the first cell in the first table.
@@ -52,14 +52,12 @@ template:
         <section class="ms-Fabric ms-font-m">
           This sample demonstrates how to get a cell from a table.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add table</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="run" class="ms-Button">
@@ -81,14 +79,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/45-shapes/group-ungroup.yaml b/samples/word/45-shapes/group-ungroup.yaml
new file mode 100644
index 000000000..f00f561b8
--- /dev/null
+++ b/samples/word/45-shapes/group-ungroup.yaml
@@ -0,0 +1,269 @@
+order: 3
+id: word-shapes-group-ungroup
+name: Group and ungroup shapes
+description: Shows how to group and ungroup shapes.
+host: WORD
+api_set:
+    WordApiDesktop: '1.2'
+script:
+    content: |
+        document.getElementById("group-shapes").addEventListener("click", () => tryCatch(groupShapes));
+        document.getElementById("move-group").addEventListener("click", () => tryCatch(moveGroup));
+        document.getElementById("scale-group").addEventListener("click", () => tryCatch(scaleGroup));
+        document.getElementById("change-group-position").addEventListener("click", () => tryCatch(changeGroupPosition));
+        document.getElementById("change-group-size").addEventListener("click", () => tryCatch(changeGroupSize));
+        document.getElementById("ungroup-shapes").addEventListener("click", () => tryCatch(ungroupShapes));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+
+        async function groupShapes() {
+          await Word.run(async (context) => {
+            // Groups the shapes (including text boxes and pictures) found in the document body.
+            const shapes: Word.ShapeCollection = context.document.body.shapes.getByTypes([
+              Word.ShapeType.geometricShape,
+              Word.ShapeType.textBox,
+              Word.ShapeType.picture,
+            ]);
+            shapes.load("items");
+            await context.sync();
+
+            const numShapes = shapes.items.length;
+            if (numShapes === 0) {
+              console.log("No shapes found in the document body.");
+              return;
+            }
+
+            console.log(`Number of shapes to group: ${numShapes}`);
+
+            const groupedShape: Word.Shape = shapes.group();
+            groupedShape.load("shapeGroup/shapes");
+            await context.sync();
+
+            const shapeGroup: Word.ShapeGroup = groupedShape.shapeGroup;
+            console.log("Shapes grouped:", shapeGroup.shapes);
+            groupedShape.select();
+          });
+        }
+
+        async function moveGroup() {
+          await Word.run(async (context) => {
+            // Moves the first set of grouped shapes (including text boxes) found in the document body.
+            const firstShapeGroup: Word.Shape = context.document.body.shapes
+              .getByTypes([Word.ShapeType.group])
+              .getFirstOrNullObject();
+            firstShapeGroup.load("shapeGroup/shapes");
+            await context.sync();
+
+            if (firstShapeGroup.isNullObject) {
+              console.log("No shape groups found in the document body.");
+              return;
+            }
+
+            let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+            console.log("About to move the first shape group found in the document body:", shapeGroup.shapes);
+            firstShapeGroup.moveHorizontally(-10);
+            firstShapeGroup.moveVertically(50);
+
+            console.log("Moved the first shape group.");
+          });
+        }
+
+        async function scaleGroup() {
+          await Word.run(async (context) => {
+            // Scales the first set of grouped shapes (including text boxes) found in the document body.
+            const firstShapeGroup: Word.Shape = context.document.body.shapes
+              .getByTypes([Word.ShapeType.group])
+              .getFirstOrNullObject();
+            firstShapeGroup.load("shapeGroup/shapes");
+            await context.sync();
+
+            if (firstShapeGroup.isNullObject) {
+              console.log("No shape groups found in the document body.");
+              return;
+            }
+
+            let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+            console.log("About to scale the first shape group found in the document body:", shapeGroup.shapes);
+            firstShapeGroup.scaleHeight(0.75, Word.ShapeScaleType.currentSize);
+            firstShapeGroup.scaleWidth(0.5, Word.ShapeScaleType.currentSize, Word.ShapeScaleFrom.scaleFromBottomRight);
+
+            console.log("Scaled the first shape group.");
+          });
+        }
+
+        async function changeGroupPosition() {
+          await Word.run(async (context) => {
+            // Changes the position of the first set of grouped shapes (including text boxes) found in the document body.
+            const firstShapeGroup: Word.Shape = context.document.body.shapes
+              .getByTypes([Word.ShapeType.group])
+              .getFirstOrNullObject();
+            firstShapeGroup.load("shapeGroup/shapes");
+            await context.sync();
+
+            if (firstShapeGroup.isNullObject) {
+              console.log("No shape groups found in the document body.");
+              return;
+            }
+
+            let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+            console.log("About to change the position of the first shape group found in document body:", shapeGroup.shapes);
+            firstShapeGroup.relativeVerticalPosition = Word.RelativeVerticalPosition.insideMargin;
+            firstShapeGroup.relativeHorizontalPosition = Word.RelativeHorizontalPosition.margin;
+
+            console.log("Changed the position of the first shape group.");
+          });
+        }
+
+        async function changeGroupSize() {
+          await Word.run(async (context) => {
+            // Changes the relative size of the first set of grouped shapes (including text boxes) found in the document body.
+            const firstShapeGroup: Word.Shape = context.document.body.shapes
+              .getByTypes([Word.ShapeType.group])
+              .getFirstOrNullObject();
+            firstShapeGroup.load("shapeGroup/shapes");
+            await context.sync();
+
+            if (firstShapeGroup.isNullObject) {
+              console.log("No shape groups found in the document body.");
+              return;
+            }
+
+            let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+            console.log(
+              "About to change the relative size of the first shape group found in the document body:",
+              shapeGroup.shapes,
+            );
+            firstShapeGroup.relativeHorizontalSize = Word.RelativeSize.insideMargin;
+            firstShapeGroup.relativeVerticalSize = Word.RelativeSize.bottomMargin;
+            firstShapeGroup.heightRelative = 50;
+
+            console.log("Changed the relative size of the first shape group.");
+          });
+        }
+
+        async function ungroupShapes() {
+          await Word.run(async (context) => {
+            // Ungroups the first set of grouped shapes (including text boxes) found in the document body.
+            const firstShapeGroup: Word.Shape = context.document.body.shapes
+              .getByTypes([Word.ShapeType.group])
+              .getFirstOrNullObject();
+            firstShapeGroup.load("shapeGroup/shapes");
+            await context.sync();
+
+            if (firstShapeGroup.isNullObject) {
+              console.log("No shape groups found in the document body.");
+              return;
+            }
+
+            let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+            console.log("About to ungroup the first shape group found in the document body:", shapeGroup.shapes);
+            shapeGroup.ungroup();
+
+            console.log("Ungrouped the first shape group.");
+          });
+        }
+
+        async function setup() {
+          await Word.run(async (context) => {
+            const body: Word.Body = context.document.body;
+            body.clear();
+            const lastParagraph: Word.Paragraph = body.paragraphs.getLast();
+
+            // Inserts a text box.
+            const textBoxOptions: Word.InsertShapeOptions = {
+              top: 0,
+              left: 0,
+              height: 100,
+              width: 100,
+            };
+            lastParagraph.insertTextBox("placeholder text", textBoxOptions);
+
+            // Inserts a geometric shape.
+            const geometricShapeOptions: Word.InsertShapeOptions = {
+              height: 120,
+              width: 120,
+              left: 120,
+            };
+            lastParagraph.insertGeometricShape(Word.GeometricShapeType.star24, geometricShapeOptions);
+
+            // Inserts a picture.
+            const pictureOptions: Word.InsertShapeOptions = {
+              top: 120,
+              left: 60,
+              height: 150,
+              width: 150,
+            };
+            lastParagraph.insertPictureFromBase64(getPictureBase64(), pictureOptions);
+
+            await context.sync();
+          });
+        }
+
+        function getPictureBase64(): string {
+          // Returns Base64-encoded image data for a sample picture.
+          const pictureBase64 =
+            "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";
+          return pictureBase64;
+        }
+
+        // Default helper for invoking an action and handling errors.
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            This sample demonstrates how to group and ungroup shapes.
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+            <h3>Set up</h3>
+            <button id="setup" class="ms-Button">
+              <span class="ms-Button-label">Add shapes</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <button id="group-shapes" class="ms-Button">
+            <span class="ms-Button-label">Group shapes</span>
+          </button>
+            <button id="move-group" class="ms-Button">
+            <span class="ms-Button-label">Move group</span>
+          </button>
+            <button id="scale-group" class="ms-Button">
+            <span class="ms-Button-label">Scale group</span>
+          </button>
+            <button id="change-group-position" class="ms-Button">
+            <span class="ms-Button-label">Change group position</span>
+          </button>
+            <button id="change-group-size" class="ms-Button">
+            <span class="ms-Button-label">Change group size</span>
+          </button>
+            <button id="ungroup-shapes" class="ms-Button">
+            <span class="ms-Button-label">Ungroup shapes</span>
+          </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/45-shapes/manage-canvases.yaml b/samples/word/45-shapes/manage-canvases.yaml
new file mode 100644
index 000000000..597353a0b
--- /dev/null
+++ b/samples/word/45-shapes/manage-canvases.yaml
@@ -0,0 +1,167 @@
+order: 4
+id: word-shapes-manage-canvases
+name: Work with canvases
+description: Shows how to work with canvases.
+host: WORD
+api_set:
+    WordApiDesktop: '1.2'
+script:
+    content: |
+        document.getElementById("insert-canvas").addEventListener("click", () => tryCatch(insertCanvas));
+        document.getElementById("get-canvases").addEventListener("click", () => tryCatch(getCanvases));
+        document.getElementById("get-first-canvas").addEventListener("click", () => tryCatch(getFirstCanvas));
+        document.getElementById("move-first-canvas").addEventListener("click", () => tryCatch(moveFirstCanvas));
+        document.getElementById("delete-first-canvas").addEventListener("click", () => tryCatch(deleteFirstCanvas));
+
+        async function insertCanvas() {
+          await Word.run(async (context) => {
+            // Inserts a canvas in the document.
+            const canvasShape: Word.Shape = context.document.getSelection().insertCanvas();
+            canvasShape.load();
+            await context.sync();
+
+            canvasShape.select();
+            console.log("Inserted canvas:", canvasShape);
+
+            const canvas: Word.Canvas = canvasShape.canvas;
+            canvas.load("shape,shapes");
+            await context.sync();
+
+            console.log("Canvas object:", canvas);
+          });
+        }
+
+        async function getCanvases() {
+          await Word.run(async (context) => {
+            // Gets the canvases found in the document body.
+            const canvases: Word.ShapeCollection = context.document.body.shapes.getByTypes([Word.ShapeType.canvas]);
+            canvases.load("items");
+            await context.sync();
+
+            if (canvases.items.length == 0) {
+              console.log("No canvases found in the document body.");
+              return;
+            }
+
+            console.log("Canvases found in the document body:", canvases);
+          });
+        }
+
+        async function getFirstCanvas() {
+          await Word.run(async (context) => {
+            // Gets the first canvas found in the document body.
+            const canvasShape: Word.Shape = context.document.body.shapes
+              .getByTypes([Word.ShapeType.canvas])
+              .getFirstOrNullObject();
+            canvasShape.load();
+            canvasShape.load("canvas/shapes");
+            await context.sync();
+
+            if (canvasShape.isNullObject) {
+              console.log("No canvases found in the document body.");
+              return;
+            }
+
+            console.log("First canvas found in the document body:", canvasShape);
+            console.log("Shapes associated with the first canvas:", canvasShape.canvas.shapes);
+            canvasShape.select();
+          });
+        }
+
+        async function moveFirstCanvas() {
+          await Word.run(async (context) => {
+            // Moves the first canvas found in the document body.
+            const canvasShape: Word.Shape = context.document.body.shapes
+              .getByTypes([Word.ShapeType.canvas])
+              .getFirstOrNullObject();
+            canvasShape.load();
+            canvasShape.load("canvas/shapes");
+            await context.sync();
+
+            if (canvasShape.isNullObject) {
+              console.log("No canvases found in the document body.");
+              return;
+            }
+
+            console.log("First canvas found in the document body:", canvasShape);
+            canvasShape.moveHorizontally(50);
+            canvasShape.moveVertically(-10);
+            console.log("Moved the first canvas.");
+          });
+        }
+
+        async function deleteFirstCanvas() {
+          await Word.run(async (context) => {
+            // Deletes the first canvas found in the document body.
+            const canvasShape: Word.Shape = context.document.body.shapes
+              .getByTypes([Word.ShapeType.canvas])
+              .getFirstOrNullObject();
+            canvasShape.load();
+            canvasShape.load("canvas/shapes");
+            await context.sync();
+
+            if (canvasShape.isNullObject) {
+              console.log("No canvases found in the document body.");
+              return;
+            }
+
+            console.log("First canvas found in the document body:", canvasShape);
+            canvasShape.delete();
+            console.log("Deleted the first canvas.");
+          });
+        }
+
+        // Default helper for invoking an action and handling errors.
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            This sample demonstrates how to work with canvases. A canvas can be useful for organizing several shapes and connecting them. Diagrams and flowcharts are examples where using a canvas could be appropriate.
+          <p>To learn how to add shapes to a drawing canvas using the Word UI, see <a href="https://support.microsoft.com/office/348a8390-c32e-43d0-942c-b20ad11dea6f" target="_blank">Add a drawing to a document</a>. Adding shapes to a canvas with the Word APIs is not supported.</p>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <button id="insert-canvas" class="ms-Button">
+            <span class="ms-Button-label">Insert canvas</span>
+          </button>
+            <button id="get-canvases" class="ms-Button">
+                <span class="ms-Button-label">Get canvases</span>
+            </button>
+            <button id="get-first-canvas" class="ms-Button">
+                <span class="ms-Button-label">Get first canvas</span>
+            </button>
+            <button id="move-first-canvas" class="ms-Button">
+                <span class="ms-Button-label">Move first canvas</span>
+            </button>
+            <button id="delete-first-canvas" class="ms-Button">
+                <span class="ms-Button-label">Delete first canvas</span>
+            </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/45-shapes/manage-geometric-shapes.yaml b/samples/word/45-shapes/manage-geometric-shapes.yaml
new file mode 100644
index 000000000..85f037a1e
--- /dev/null
+++ b/samples/word/45-shapes/manage-geometric-shapes.yaml
@@ -0,0 +1,256 @@
+order: 2
+id: word-shapes-manage-geometric-shapes
+name: Manage geometric shapes
+description: Shows how to work with geometric shapes.
+host: WORD
+api_set:
+    WordApiDesktop: '1.2'
+script:
+    content: |
+        document.getElementById("insert-heptagon").addEventListener("click", () => tryCatch(insertGeometricShape_Heptagon));
+        document.getElementById("insert-moon").addEventListener("click", () => tryCatch(insertGeometricShape_Moon));
+        document.getElementById("get-geometric-shapes").addEventListener("click", () => tryCatch(getGeometricShapes));
+        document.getElementById("get-moons").addEventListener("click", () => tryCatch(getMoonGeometricShapes));
+        document.getElementById("get-first-geometric-shape").addEventListener("click", () => tryCatch(getFirstGeometricShape));
+        document.getElementById("get-first-heptagon").addEventListener("click", () => tryCatch(getFirstHeptagon));
+        document.getElementById("get-first-moon-fill").addEventListener("click", () => tryCatch(getFirstMoonColorFill));
+        document.getElementById("clear-first-moon-fill").addEventListener("click", () => tryCatch(clearFirstMoonColorFill));
+        document.getElementById("set-first-moon-fill").addEventListener("click", () => tryCatch(setFirstMoonColorFill));
+
+        async function insertGeometricShape_Heptagon() {
+          await Word.run(async (context) => {
+            // Inserts a heptagon geometric shape at the beginning of the selection.
+            const selection: Word.Range = context.document.getSelection();
+            const shapeOptions: Word.InsertShapeOptions = {
+              height: 120,
+              width: 120,
+            };
+            selection.insertGeometricShape(Word.GeometricShapeType.heptagon, shapeOptions);
+            await context.sync();
+
+            console.log("Inserted a heptagon.");
+          });
+        }
+
+        async function insertGeometricShape_Moon() {
+          await Word.run(async (context) => {
+            // Inserts a moon geometric shape at the beginning of the selection.
+            const selection: Word.Range = context.document.getSelection();
+            const shapeOptions: Word.InsertShapeOptions = {
+              height: 120,
+              width: 120,
+              left: 120,
+            };
+            selection.insertGeometricShape(Word.GeometricShapeType.moon, shapeOptions);
+            await context.sync();
+
+            console.log("Inserted a moon.");
+          });
+        }
+
+        async function getGeometricShapes() {
+          await Word.run(async (context) => {
+            // Gets the geometric shapes from the document body.
+            const geometricShapes: Word.ShapeCollection = context.document.body.shapes.getByTypes([
+              Word.ShapeType.geometricShape,
+            ]);
+            geometricShapes.load();
+            await context.sync();
+
+            console.log("Geometric shapes found in the document body:", geometricShapes);
+          });
+        }
+
+        async function getMoonGeometricShapes() {
+          await Word.run(async (context) => {
+            // Gets the moon geometric shapes from the document body.
+            const moons: Word.ShapeCollection = context.document.body.shapes.getByGeometricTypes([
+              Word.GeometricShapeType.moon,
+            ]);
+            moons.load();
+            await context.sync();
+
+            console.log("Moons found in the document body:", moons);
+          });
+        }
+
+        async function getFirstGeometricShape() {
+          await Word.run(async (context) => {
+            // Gets the first geometric shape found in the document body.
+            const geometricShape: Word.Shape = context.document.body.shapes
+              .getByTypes([Word.ShapeType.geometricShape])
+              .getFirstOrNullObject();
+            geometricShape.load();
+            await context.sync();
+
+            if (geometricShape.isNullObject) {
+              console.log("No geometric shapes found in the document body.");
+              return;
+            }
+
+            console.log(
+              `First geometric shape found in the document body is of type ${geometricShape.geometricShapeType}:`,
+              geometricShape,
+            );
+          });
+        }
+
+        async function getFirstHeptagon() {
+          await Word.run(async (context) => {
+            // Gets the first heptagon found in the document body.
+            const heptagon: Word.Shape = context.document.body.shapes
+              .getByGeometricTypes([Word.GeometricShapeType.heptagon])
+              .getFirstOrNullObject();
+            heptagon.load();
+            await context.sync();
+
+            if (heptagon.isNullObject) {
+              console.log("No heptagons found in the document body.");
+              return;
+            }
+
+            console.log("First heptagon found in the document body:", heptagon);
+          });
+        }
+
+        async function getFirstMoonColorFill() {
+          await Word.run(async (context) => {
+            // Gets the color fill properties of the first moon found in the document body.
+            const moon: Word.Shape = context.document.body.shapes
+              .getByGeometricTypes([Word.GeometricShapeType.moon])
+              .getFirstOrNullObject();
+            moon.load("fill");
+            await context.sync();
+
+            if (moon.isNullObject) {
+              console.log("No moons found in the document body.");
+              return;
+            }
+
+            const moonFill: Word.ShapeFill = moon.fill;
+            const moonFillType = moonFill.type as Word.ShapeFillType;
+
+            console.log("Color fill properties of the first moon found in the document body:");
+            console.log(`\tForeground color: ${moonFill.foregroundColor}`);
+            console.log(`\tBackground color: ${moonFill.backgroundColor}`);
+            console.log(`\tTransparency: ${moonFill.transparency}`);
+            console.log(`\tFill type: ${moonFillType}`);
+          });
+        }
+
+        async function clearFirstMoonColorFill() {
+          await Word.run(async (context) => {
+            // Clears the color fill properties of the first moon found in the document body.
+            const moon: Word.Shape = context.document.body.shapes
+              .getByGeometricTypes([Word.GeometricShapeType.moon])
+              .getFirstOrNullObject();
+            moon.load("fill");
+            await context.sync();
+
+            if (moon.isNullObject) {
+              console.log("No moons found in the document body.");
+              return;
+            }
+
+            const moonFill: Word.ShapeFill = moon.fill;
+            console.log("Current fill properties of the first moon found in the document body:", moonFill);
+
+            moonFill.clear();
+            moonFill.load();
+            await context.sync();
+
+            console.log("Cleared the color fill properties of the first moon found in the document body:", moonFill);
+          });
+        }
+
+        async function setFirstMoonColorFill() {
+          await Word.run(async (context) => {
+            // Sets color fill properties of the first moon found in the document body.
+            const moon: Word.Shape = context.document.body.shapes
+              .getByGeometricTypes([Word.GeometricShapeType.moon])
+              .getFirstOrNullObject();
+            moon.load("fill");
+            await context.sync();
+
+            if (moon.isNullObject) {
+              console.log("No moons found in the document body.");
+              return;
+            }
+
+            const moonFill: Word.ShapeFill = moon.fill;
+            console.log("Current fill properties of the first moon found in the document body:", moonFill);
+
+            moonFill.setSolidColor("green");
+            moonFill.load();
+            await context.sync();
+
+            console.log("Updated color fill properties of the first moon found in the document body:", moonFill);
+          });
+        }
+
+        // Default helper for invoking an action and handling errors.
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            This sample demonstrates how to work with geometric shapes.
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <button id="insert-heptagon" class="ms-Button">
+            <span class="ms-Button-label">Insert heptagon</span>
+          </button>
+            <button id="insert-moon" class="ms-Button">
+                <span class="ms-Button-label">Insert moon</span>
+            </button>
+            <button id="get-geometric-shapes" class="ms-Button">
+                <span class="ms-Button-label">Get geometric shapes</span>
+            </button>
+            <button id="get-moons" class="ms-Button">
+                <span class="ms-Button-label">Get moons</span>
+            </button>
+            <button id="get-first-geometric-shape" class="ms-Button">
+                <span class="ms-Button-label">Get first geometric shape</span>
+            </button>
+            <button id="get-first-heptagon" class="ms-Button">
+                <span class="ms-Button-label">Get first heptagon</span>
+            </button>
+            <h4>Work with color fill properties of the first moon</h4>
+            <button id="get-first-moon-fill" class="ms-Button">
+                <span class="ms-Button-label">Get color fill</span>
+            </button>
+            <button id="clear-first-moon-fill" class="ms-Button">
+                <span class="ms-Button-label">Clear color fill properties</span>
+            </button>
+            <button id="set-first-moon-fill" class="ms-Button">
+                <span class="ms-Button-label">Set color fill properties</span>
+            </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/45-shapes/manage-shapes-text-boxes.yaml b/samples/word/45-shapes/manage-shapes-text-boxes.yaml
new file mode 100644
index 000000000..ef91e7153
--- /dev/null
+++ b/samples/word/45-shapes/manage-shapes-text-boxes.yaml
@@ -0,0 +1,415 @@
+order: 1
+id: word-shapes-manage-shapes-text-boxes
+name: Work with shapes and text boxes
+description: Shows how to work with shapes and text boxes.
+author: yilin4
+host: WORD
+api_set:
+    WordApiDesktop: '1.2'
+script:
+    content: |
+        document
+          .getElementById("insert-text-box-into-current-selection")
+          .addEventListener("click", () => tryCatch(insertTextBoxIntoCurrentSelection));
+        document.getElementById("get-text-boxes-in-main-doc").addEventListener("click", () => tryCatch(getTextBoxesInMainDoc));
+        document
+          .getElementById("get-text-wrap-of-text-box-in-main-doc")
+          .addEventListener("click", () => tryCatch(getTextWrapOfTextBoxInMainDoc));
+        document
+          .getElementById("set-text-wrap-of-text-box-in-main-doc")
+          .addEventListener("click", () => tryCatch(setTextWrapPropertiesOfTextBoxInMainDoc));
+        document
+          .getElementById("get-text-frame-of-text-box-in-main-doc")
+          .addEventListener("click", () => tryCatch(getTextFrameOfTextBoxInMainDoc));
+        document
+          .getElementById("set-text-frame-of-text-box-in-main-doc")
+          .addEventListener("click", () => tryCatch(setTextFramePropertiesOfTextBoxInMainDoc));
+        document.getElementById("set-text-box-properties").addEventListener("click", () => tryCatch(setTextBoxProperties));
+        document
+          .getElementById("get-text-from-text-box-in-main-doc")
+          .addEventListener("click", () => tryCatch(getTextFromTextBoxInMainDoc));
+        document
+          .getElementById("insert-content-control-into-text-box")
+          .addEventListener("click", () => tryCatch(insertContentControlIntoTextBox));
+        document
+          .getElementById("get-content-controls-in-text-box")
+          .addEventListener("click", () => tryCatch(getContentControlsInTextBox));
+        document
+          .getElementById("insert-picture-at-start-of-text-box")
+          .addEventListener("click", () => tryCatch(insertPictureAtStartOfTextBox));
+        document.getElementById("delete-first-text-box").addEventListener("click", () => tryCatch(deleteFirstTextBox));
+        document
+          .getElementById("insert-text-box-in-header-at-first-paragraph")
+          .addEventListener("click", () => tryCatch(insertTextBoxInHeaderAtFirstParagraph));
+        document.getElementById("get-text-boxes-in-header").addEventListener("click", () => tryCatch(getTextBoxesInHeader));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+
+        async function insertTextBoxIntoCurrentSelection() {
+          await Word.run(async (context) => {
+            // Inserts a text box at the beginning of the selection.
+            const range: Word.Range = context.document.getSelection();
+            const insertShapeOptions: Word.InsertShapeOptions = {
+              top: 0,
+              left: 0,
+              height: 100,
+              width: 100
+            };
+
+            const newTextBox: Word.Shape = range.insertTextBox("placeholder text", insertShapeOptions);
+            await context.sync();
+
+            console.log("Inserted a text box at the beginning of the current selection.");
+          });
+        }
+
+        async function getTextBoxesInMainDoc() {
+          await Word.run(async (context) => {
+            // Gets text boxes in the main document.
+            const shapes: Word.ShapeCollection = context.document.body.shapes;
+            shapes.load();
+            await context.sync();
+
+            if (shapes.items.length > 0) {
+              console.log(`Number of shapes found in the main document: ${shapes.items.length}`);
+              shapes.items.forEach(function (shape, index) {
+                if (shape.type === Word.ShapeType.textBox) {
+                  console.log(`Shape ${index} in the main document has a text box. Properties:`, shape);
+                } else {
+                  console.log(`Shape ${index} in the main document doesn't have a text box.`);
+                }
+              });
+            } else {
+              console.log("No shapes found in the main document.");
+            }
+          });
+        }
+
+        async function getTextWrapOfTextBoxInMainDoc() {
+          await Word.run(async (context) => {
+            // Gets text wrap properties of the first text box in the main document.
+            const shape: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirstOrNullObject();
+            shape.load("textWrap");
+            await context.sync();
+
+            if (shape.isNullObject) {
+              console.log("No shapes with text boxes found in the main document.");
+              return;
+            }
+
+            console.log("Text wrap properties of first text box:", shape.textWrap);
+          });
+        }
+
+        async function setTextWrapPropertiesOfTextBoxInMainDoc() {
+          await Word.run(async (context) => {
+            // Sets text wrap properties of the first text box.
+            const firstShapeWithTextBox: Word.Shape = context.document.body.shapes
+              .getByTypes([Word.ShapeType.textBox])
+              .getFirstOrNullObject();
+            firstShapeWithTextBox.load("textWrap");
+            await context.sync();
+
+            if (firstShapeWithTextBox.isNullObject) {
+              console.log("No shapes with text boxes found in main document.");
+              return;
+            }
+
+            const textWrap: Word.ShapeTextWrap = firstShapeWithTextBox.textWrap;
+            textWrap.type = Word.ShapeTextWrapType.square;
+            textWrap.side = Word.ShapeTextWrapSide.both;
+
+            console.log("The first text box's text wrap properties were updated:", textWrap);
+          });
+        }
+
+        async function getTextFrameOfTextBoxInMainDoc() {
+          await Word.run(async (context) => {
+            // Gets the text frame of the first text box in the main document.
+            const shape: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirstOrNullObject();
+            shape.load("textFrame");
+            await context.sync();
+
+            if (shape.isNullObject) {
+              console.log("No shapes with text boxes found in the main document.");
+              return;
+            }
+
+            console.log("Text frame of first text box:", shape.textFrame);
+          });
+        }
+
+        async function setTextFramePropertiesOfTextBoxInMainDoc() {
+          await Word.run(async (context) => {
+            // Sets text frame properties of the first text box in the main document.
+            const shape: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirstOrNullObject();
+            shape.load("textFrame");
+            await context.sync();
+
+            if (shape.isNullObject) {
+              console.log("No shapes with text boxes found in the main document.");
+              return;
+            }
+
+            const textFrame: Word.TextFrame = shape.textFrame;
+            textFrame.verticalAlignment = Word.ShapeTextVerticalAlignment.bottom;
+            textFrame.orientation = Word.ShapeTextOrientation.vertical270;
+            textFrame.autoSizeSetting = Word.ShapeAutoSize.shapeToFitText;
+
+            console.log("The first text box's text frame properties were updated:", textFrame);
+          });
+        }
+
+        async function setTextBoxProperties() {
+          await Word.run(async (context) => {
+            // Sets the properties of the first text box.
+            const firstShapeWithTextBox: Word.Shape = context.document.body.shapes
+              .getByTypes([Word.ShapeType.textBox])
+              .getFirst();
+            firstShapeWithTextBox.top = 115;
+            firstShapeWithTextBox.left = 0;
+            firstShapeWithTextBox.width = 50;
+            firstShapeWithTextBox.height = 50;
+            await context.sync();
+
+            console.log("The first text box's properties were updated:", firstShapeWithTextBox);
+          });
+        }
+
+        async function getTextFromTextBoxInMainDoc() {
+          await Word.run(async (context) => {
+            // Gets text from the first text box in the main document.
+            const shape: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirstOrNullObject();
+            shape.load("body/text");
+            await context.sync();
+
+            console.log(
+              shape.isNullObject
+                ? "No shapes with text boxes found in the main document."
+                : `Text in first text box: ${shape.body.text}`
+            );
+          });
+        }
+
+        async function insertContentControlIntoTextBox() {
+          await Word.run(async (context) => {
+            // Inserts a content control into the first paragraph in the first text box.
+            const firstShapeWithTextBox: Word.Shape = context.document.body.shapes
+              .getByTypes([Word.ShapeType.textBox])
+              .getFirst();
+            firstShapeWithTextBox.load("type/body");
+            await context.sync();
+
+            const firstParagraphInTextBox: Word.Paragraph = firstShapeWithTextBox.body.paragraphs.getFirst();
+            const newControl: Word.ContentControl = firstParagraphInTextBox.insertContentControl();
+            newControl.load();
+            await context.sync();
+
+            console.log("New content control properties:", newControl);
+          });
+        }
+
+        async function getContentControlsInTextBox() {
+          await Word.run(async (context) => {
+            // Gets the content controls in the first text box.
+            const firstShapeWithTextBox: Word.Shape = context.document.body.shapes
+              .getByTypes([Word.ShapeType.textBox])
+              .getFirst();
+            firstShapeWithTextBox.load("type/body");
+            await context.sync();
+
+            const contentControlsInTextBox: Word.ContentControlCollection = firstShapeWithTextBox.body.contentControls;
+            contentControlsInTextBox.load();
+            await context.sync();
+
+            console.log(`Number of content controls: ${contentControlsInTextBox.items.length}`);
+          });
+        }
+
+        async function insertPictureAtStartOfTextBox() {
+          await Word.run(async (context) => {
+            // Inserts a picture at the start of the first text box.
+            const firstShapeWithTextBox: Word.Shape = context.document.body.shapes
+              .getByTypes([Word.ShapeType.textBox])
+              .getFirst();
+            firstShapeWithTextBox.load("type/body");
+            await context.sync();
+
+            const startRange: Word.Range = firstShapeWithTextBox.body.getRange(Word.RangeLocation.start);
+            const newPic: Word.InlinePicture = startRange.insertInlinePictureFromBase64(
+              getPictureBase64(),
+              Word.InsertLocation.start
+            );
+            newPic.load();
+            await context.sync();
+
+            console.log("New inline picture properties:", newPic);
+          });
+        }
+
+        async function deleteFirstTextBox() {
+          await Word.run(async (context) => {
+            // Deletes the first text box.
+            context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirst().delete();
+            await context.sync();
+
+            console.log("The first text box in document was deleted.");
+          });
+        }
+
+        async function insertTextBoxInHeaderAtFirstParagraph() {
+          await Word.run(async (context) => {
+            // Inserts a text box at the beginning of the first paragraph in the header.
+            const headerFooterBody: Word.Body = context.document.sections.getFirst().getHeader(Word.HeaderFooterType.primary);
+            headerFooterBody.load("paragraphs");
+            const firstParagraph: Word.Paragraph = headerFooterBody.paragraphs.getFirst();
+            const insertShapeOptions: Word.InsertShapeOptions = {
+              top: 0,
+              left: 0,
+              height: 100,
+              width: 100
+            };
+            const newTextBox: Word.Shape = firstParagraph.insertTextBox("placeholder text", insertShapeOptions);
+            newTextBox.select();
+            await context.sync();
+
+            console.log("Inserted a text box at the beginning of the first paragraph in the header.");
+          });
+        }
+
+        async function getTextBoxesInHeader() {
+          await Word.run(async (context) => {
+            // Gets text boxes in the header.
+            const shapes: Word.ShapeCollection = context.document.sections
+              .getFirst()
+              .getHeader(Word.HeaderFooterType.primary).shapes;
+            shapes.load();
+            await context.sync();
+
+            if (shapes.items.length > 0) {
+              console.log(`Number of shapes found in the header: ${shapes.items.length}`);
+              shapes.items.forEach(function (shape, index) {
+                if (shape.type === Word.ShapeType.textBox) {
+                  console.log(`Shape ${index} in the header has a text box. Properties:`, shape);
+                } else {
+                  console.log(`Shape ${index} in the header doesn't have a text box.`);
+                }
+              });
+            } else {
+              console.log("No shapes found in the header.");
+            }
+          });
+        }
+
+        async function setup() {
+          await Word.run(async (context) => {
+            const body: Word.Body = context.document.body;
+            body.clear();
+            body.insertParagraph(
+              "Do you want to create a solution that extends the functionality of Word? You can use the Office Add-ins platform to extend Word clients running on the web, on a Windows desktop, or on a Mac.",
+              "Start",
+            );
+            body.paragraphs
+              .getLast()
+              .insertText(
+                "Use add-in commands to extend the Word UI and launch task panes that run JavaScript that interacts with the content in a Word document. Any code that you can run in a browser can run in a Word add-in. Add-ins that interact with content in a Word document create requests to act on Word objects and synchronize object state.",
+                "Replace",
+              );
+          });
+        }
+
+        function getPictureBase64(): string {
+          // Returns Base64-encoded image data for a sample picture.
+          const pictureBase64 =
+            "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";
+          return pictureBase64;
+        }
+
+        // Default helper for invoking an action and handling errors.
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            This sample demonstrates how to work with shapes and text boxes.
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+            <h3>Set up</h3>
+            <button id="setup" class="ms-Button">
+            <span class="ms-Button-label">Add text</span>
+          </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <h4>Main document</h4>
+            <button id="insert-text-box-into-current-selection" class="ms-Button">
+            <span class="ms-Button-label">Insert text box into current selection</span>
+          </button>
+            <button id="get-text-boxes-in-main-doc" class="ms-Button">
+            <span class="ms-Button-label">Get text boxes</span>
+          </button>
+            <p>The following buttons act on the first text box in the main document.</p>
+            <button id="get-text-wrap-of-text-box-in-main-doc" class="ms-Button">
+            <span class="ms-Button-label">Get text wrap properties</span>
+          </button>
+            <button id="set-text-wrap-of-text-box-in-main-doc" class="ms-Button">
+            <span class="ms-Button-label">Set text wrap properties</span>
+          </button>
+            <button id="get-text-frame-of-text-box-in-main-doc" class="ms-Button">
+            <span class="ms-Button-label">Get text frame</span>
+          </button>
+            <button id="set-text-frame-of-text-box-in-main-doc" class="ms-Button">
+            <span class="ms-Button-label">Set text frame properties</span>
+          </button>
+            <button id="set-text-box-properties" class="ms-Button">
+            <span class="ms-Button-label">Set text box properties</span>
+          </button>
+            <button id="get-text-from-text-box-in-main-doc" class="ms-Button">
+            <span class="ms-Button-label">Get text</span>
+          </button>
+            <button id="insert-content-control-into-text-box" class="ms-Button">
+            <span class="ms-Button-label">Insert content control</span>
+          </button>
+            <button id="get-content-controls-in-text-box" class="ms-Button">
+            <span class="ms-Button-label">Get content controls</span>
+          </button>
+            <button id="insert-picture-at-start-of-text-box" class="ms-Button">
+            <span class="ms-Button-label">Insert picture</span>
+          </button>
+            <button id="delete-first-text-box" class="ms-Button">
+            <span class="ms-Button-label">Delete</span>
+          </button>
+            <h4>Header</h4>
+            <button id="insert-text-box-in-header-at-first-paragraph" class="ms-Button">
+            <span class="ms-Button-label">Insert text box</span>
+          </button>
+            <button id="get-text-boxes-in-header" class="ms-Button">
+            <span class="ms-Button-label">Get text boxes</span>
+          </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/50-document/compare-documents.yaml b/samples/word/50-document/compare-documents.yaml
index 0d77309a9..70ee0b554 100644
--- a/samples/word/50-document/compare-documents.yaml
+++ b/samples/word/50-document/compare-documents.yaml
@@ -7,16 +7,14 @@ host: WORD
 api_set:
     WordApiDesktop: '1.1'
 script:
-    content: |
-        $("#run").on("click", () => tryCatch(run));
+    content: |-
+        document.getElementById("run").addEventListener("click", () => tryCatch(run));
 
         async function run() {
           // Compares the current document with a specified external document.
           await Word.run(async (context) => {
             // Absolute path of an online or local document.
-            const filePath = $("#filePath")
-              .val()
-              .toString();
+            const filePath = (document.getElementById("filePath") as HTMLInputElement).value;
             // Options that configure the compare operation.
             const options: Word.DocumentCompareOptions = {
               compareTarget: Word.CompareTarget.compareTargetCurrent,
@@ -46,7 +44,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to compare two documents: the current one and a specified external one.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <label>File (with absolute path): </label>
@@ -69,15 +66,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/50-document/get-external-styles.yaml b/samples/word/50-document/get-external-styles.yaml
index b7bc8fd07..3f7c74914 100644
--- a/samples/word/50-document/get-external-styles.yaml
+++ b/samples/word/50-document/get-external-styles.yaml
@@ -6,9 +6,9 @@ host: WORD
 api_set:
     WordApi: '1.5'
 script:
-    content: |
-        $("#file").on("change", getBase64);
-        $("#get-external-styles").on("click", () => tryCatch(getExternalStyles));
+    content: |-
+        document.getElementById("file").addEventListener("change", getBase64);
+        document.getElementById("get-external-styles").addEventListener("click", () => tryCatch(getExternalStyles));
 
         let externalDocument;
 
@@ -24,7 +24,7 @@ script:
 
         function getBase64() {
           // Retrieve the file and set up an HTML FileReader element.
-          const myFile = <HTMLInputElement>document.getElementById("file");
+          const myFile = document.getElementById("file") as HTMLInputElement;
           const reader = new FileReader();
 
           reader.onload = (event) => {
@@ -52,7 +52,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to get styles from an external document.
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
           <h3>Try it out</h3>
             <p>Select a Word document to get its style info.</p>
@@ -80,11 +79,7 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/50-document/insert-external-document.yaml b/samples/word/50-document/insert-external-document.yaml
index e3dda0385..005d12d69 100644
--- a/samples/word/50-document/insert-external-document.yaml
+++ b/samples/word/50-document/insert-external-document.yaml
@@ -1,15 +1,15 @@
 order: 3
 id: word-document-insert-external-document
 name: Insert an external document
-description: 'Inserts the content (with or without settings) of an external document into the current document. Settings include formatting, change-tracking mode, custom properties, and XML parts.'
+description: Inserts the content (with or without settings) of an external document into the current document. Settings include formatting, change-tracking mode, custom properties, and XML parts.
 host: WORD
 api_set:
     WordApi: '1.7'
 script:
-    content: |
-        $("#file").on("change", getBase64);
-        $("#insert-document").on("click", () => tryCatch(insertDocument));
-        $("#insert-document-with-settings").on("click", () => tryCatch(insertDocumentWithSettings));
+    content: |-
+        document.getElementById("file").addEventListener("change", getBase64);
+        document.getElementById("insert-document").addEventListener("click", () => tryCatch(insertDocument));
+        document.getElementById("insert-document-with-settings").addEventListener("click", () => tryCatch(insertDocumentWithSettings));
 
         let externalDocument;
 
@@ -20,6 +20,11 @@ script:
             const externalDoc: Word.DocumentCreated = context.application.createDocument(externalDocument);
             await context.sync();
 
+            if (!Office.context.requirements.isSetSupported("WordApiHiddenDocument", "1.3")) {
+              console.warn("The WordApiHiddenDocument 1.3 requirement set isn't supported on this client so can't proceed. Try this action on a platform that supports this requirement set.");
+              return;
+            }
+
             const externalDocBody: Word.Body = externalDoc.body;
             externalDocBody.load("text");
             await context.sync();
@@ -52,7 +57,7 @@ script:
 
         function getBase64() {
           // Retrieve the file and set up an HTML FileReader element.
-          const myFile = <HTMLInputElement>document.getElementById("file");
+          const myFile = document.getElementById("file") as HTMLInputElement;
           const reader = new FileReader();
 
           reader.onload = (event) => {
@@ -80,7 +85,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to insert the body text from an external document into the current document.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Select a Word document.</p>
@@ -112,15 +116,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/50-document/insert-section-breaks.yaml b/samples/word/50-document/insert-section-breaks.yaml
index 802d400af..1ca46f47b 100644
--- a/samples/word/50-document/insert-section-breaks.yaml
+++ b/samples/word/50-document/insert-section-breaks.yaml
@@ -6,12 +6,12 @@ host: WORD
 api_set:
     WordApi: '1.1'
 script:
-    content: |
-        $("#add-sectionNext").on("click", () => tryCatch(addNext));
-        $("#add-sectionEven").on("click", () => tryCatch(addEven));
-        $("#add-sectionOdd").on("click", () => tryCatch(addOdd));
-        $("#add-sectionContinuous").on("click", () => tryCatch(addContinuous));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("add-sectionNext").addEventListener("click", () => tryCatch(addNext));
+        document.getElementById("add-sectionEven").addEventListener("click", () => tryCatch(addEven));
+        document.getElementById("add-sectionOdd").addEventListener("click", () => tryCatch(addOdd));
+        document.getElementById("add-sectionContinuous").addEventListener("click", () => tryCatch(addContinuous));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function addNext() {
           // Inserts a section break on the next page.
@@ -93,7 +93,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample shows how to insert sections in the document.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
@@ -101,7 +100,6 @@ template:
                             </button>
           <p>You should also show the formatting marks to see the section indicators. To learn more, refer to <a target="_blank" href="https://support.microsoft.com/office/84a53213-5d02-404a-b022-09cae1a3958b">Show or hide tab marks in Word</a></p> 
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="add-sectionNext" class="ms-Button">
@@ -132,14 +130,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/50-document/manage-annotations.yaml b/samples/word/50-document/manage-annotations.yaml
index 7feb2f49f..344bbc495 100644
--- a/samples/word/50-document/manage-annotations.yaml
+++ b/samples/word/50-document/manage-annotations.yaml
@@ -7,15 +7,15 @@ host: WORD
 api_set:
     WordApi: '1.8'
 script:
-    content: |
-        $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers));
-        $("#insert-annotations").on("click", () => tryCatch(insertAnnotations));
-        $("#get-annotations").on("click", () => tryCatch(getAnnotations));
-        $("#accept-first").on("click", () => tryCatch(acceptFirst));
-        $("#reject-last").on("click", () => tryCatch(rejectLast));
-        $("#delete-annotations").on("click", () => tryCatch(deleteAnnotations));
-        $("#deregister-event-handlers").on("click", () => tryCatch(deregisterEventHandlers));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers));
+        document.getElementById("insert-annotations").addEventListener("click", () => tryCatch(insertAnnotations));
+        document.getElementById("get-annotations").addEventListener("click", () => tryCatch(getAnnotations));
+        document.getElementById("accept-first").addEventListener("click", () => tryCatch(acceptFirst));
+        document.getElementById("reject-last").addEventListener("click", () => tryCatch(rejectLast));
+        document.getElementById("delete-annotations").addEventListener("click", () => tryCatch(deleteAnnotations));
+        document.getElementById("deregister-event-handlers").addEventListener("click", () => tryCatch(deregisterEventHandlers));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         let eventContexts = [];
 
@@ -301,15 +301,14 @@ template:
     content: |-
         <section class="ms-Fabric ms-font-m">
             <p>This sample demonstrates how to manage annotations and use annotation events.</p>
+            <p><b>Important</b>: You need a Microsoft 365 subscription in order to use Annotation APIs. See <a target="_blank" href="https://github.com/OfficeDev/office-js/issues/4953">GitHub issue 4953</a> for more information.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="register-event-handlers" class="ms-Button">
@@ -354,15 +353,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/50-document/manage-body.yaml b/samples/word/50-document/manage-body.yaml
index fb22b206b..0051442b5 100644
--- a/samples/word/50-document/manage-body.yaml
+++ b/samples/word/50-document/manage-body.yaml
@@ -7,23 +7,23 @@ host: WORD
 api_set:
     WordApi: '1.2'
 script:
-    content: |
-        $("#get-font-props").on("click", () => tryCatch(getFontProperties));
-        $("#get-html").on("click", () => tryCatch(getHTML));
-        $("#get-ooxml").on("click", () => tryCatch(getOOXML));
-        $("#get-text").on("click", () => tryCatch(getText));
-        $("#insert-content-control").on("click", () => tryCatch(insertContentControl));
-        $("#insert-page-break").on("click", () => tryCatch(insertPageBreak));
-        $("#file").on("change", getBase64);
-        $("#insert-external-body").on("click", () => tryCatch(insertExternalBody));
-        $("#insert-html").on("click", () => tryCatch(insertHTML));
-        $("#insert-image-inline").on("click", () => tryCatch(insertImageInline));
-        $("#insert-ooxml").on("click", () => tryCatch(insertOOXML));
-        $("#insert-text").on("click", () => tryCatch(insertText));
-        $("#select").on("click", () => tryCatch(select));
-        $("#clear").on("click", () => tryCatch(clear));
-        $("#insert-paragraph").on("click", () => tryCatch(insertParagraph));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("get-font-props").addEventListener("click", () => tryCatch(getFontProperties));
+        document.getElementById("get-html").addEventListener("click", () => tryCatch(getHTML));
+        document.getElementById("get-ooxml").addEventListener("click", () => tryCatch(getOOXML));
+        document.getElementById("get-text").addEventListener("click", () => tryCatch(getText));
+        document.getElementById("insert-content-control").addEventListener("click", () => tryCatch(insertContentControl));
+        document.getElementById("insert-page-break").addEventListener("click", () => tryCatch(insertPageBreak));
+        document.getElementById("file").addEventListener("change", getBase64);
+        document.getElementById("insert-external-body").addEventListener("click", () => tryCatch(insertExternalBody));
+        document.getElementById("insert-html").addEventListener("click", () => tryCatch(insertHTML));
+        document.getElementById("insert-image-inline").addEventListener("click", () => tryCatch(insertImageInline));
+        document.getElementById("insert-ooxml").addEventListener("click", () => tryCatch(insertOOXML));
+        document.getElementById("insert-text").addEventListener("click", () => tryCatch(insertText));
+        document.getElementById("select").addEventListener("click", () => tryCatch(select));
+        document.getElementById("clear").addEventListener("click", () => tryCatch(clear));
+        document.getElementById("insert-paragraph").addEventListener("click", () => tryCatch(insertParagraph));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function getFontProperties() {
           // Gets the style and the font size, font name, and font color properties on the body object.
@@ -142,7 +142,7 @@ script:
 
         function getBase64() {
           // Retrieve the file and set up an HTML FileReader element.
-          const myFile = <HTMLInputElement>document.getElementById("file");
+          const myFile = document.getElementById("file") as HTMLInputElement;
           const reader = new FileReader();
 
           reader.onload = (event) => {
@@ -337,14 +337,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample shows how to manage the content of the document body.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
                 <span class="ms-Button-label">Add sample text</span>
             </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-font-props" class="ms-Button">
@@ -410,14 +408,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/50-document/manage-change-tracking.yaml b/samples/word/50-document/manage-change-tracking.yaml
index 58496cd80..e5b647f12 100644
--- a/samples/word/50-document/manage-change-tracking.yaml
+++ b/samples/word/50-document/manage-change-tracking.yaml
@@ -6,11 +6,11 @@ host: WORD
 api_set:
     WordApi: '1.4'
 script:
-    content: |
-        $("#get-change-tracking-mode").on("click", () => tryCatch(getChangeTrackingMode));
-        $("#set-change-tracking-mode").on("click", () => tryCatch(setChangeTrackingMode));
-        $("#get-reviewed-text").on("click", () => tryCatch(getReviewedText));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("get-change-tracking-mode").addEventListener("click", () => tryCatch(getChangeTrackingMode));
+        document.getElementById("set-change-tracking-mode").addEventListener("click", () => tryCatch(setChangeTrackingMode));
+        document.getElementById("get-reviewed-text").addEventListener("click", () => tryCatch(getReviewedText));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function getChangeTrackingMode() {
           // Gets the current change tracking mode.
@@ -32,7 +32,7 @@ script:
         async function setChangeTrackingMode() {
           // Sets the change tracking mode.
           await Word.run(async (context) => {
-            const mode = $("input[name='mode']:checked").val();
+          const mode = (document.querySelector("input[name='mode']:checked") as HTMLInputElement).value;
             if (mode === "Track only my changes") {
               context.document.changeTrackingMode = Word.ChangeTrackingMode.trackMineOnly;
             } else if (mode === "Track everyone's changes") {
@@ -92,14 +92,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows basic operations of the Track Changes feature.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Add sample text</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <h4>Get current change tracking mode</h4>
@@ -140,15 +138,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/50-document/manage-comments.yaml b/samples/word/50-document/manage-comments.yaml
index de1e5eeba..75a4ba5aa 100644
--- a/samples/word/50-document/manage-comments.yaml
+++ b/samples/word/50-document/manage-comments.yaml
@@ -1,29 +1,27 @@
 order: 6
 id: word-document-manage-comments
 name: Manage comments
-description: 'This sample shows how to perform basic comments operations, including insert, reply, get, edit, resolve, and delete.'
+description: This sample shows how to perform basic comments operations, including insert, reply, get, edit, resolve, and delete.
 host: WORD
 api_set:
     WordApi: '1.4'
 script:
-    content: |
-        $("#insert").on("click", () => tryCatch(insertComment));
-        $("#edit").on("click", () => tryCatch(editFirstCommentInSelection));
-        $("#reply").on("click", () => tryCatch(replyToFirstActiveCommentInSelection));
-        $("#resolve").on("click", () => tryCatch(toggleResolvedStatusOfFirstCommentInSelection));
-        $("#range").on("click", () => tryCatch(getFirstCommentRangeInSelection));
-        $("#get-comments-in-selection").on("click", () => tryCatch(getCommentsInSelection));
-        $("#get-replies-to-first-comment-in-selection").on("click", () => tryCatch(getRepliesToFirstCommentInSelection));
-        $("#delete").on("click", () => tryCatch(deleteFirstCommentInSelection));
-        $("#get-comments").on("click", () => tryCatch(getComments));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("insert").addEventListener("click", () => tryCatch(insertComment));
+        document.getElementById("edit").addEventListener("click", () => tryCatch(editFirstCommentInSelection));
+        document.getElementById("reply").addEventListener("click", () => tryCatch(replyToFirstActiveCommentInSelection));
+        document.getElementById("resolve").addEventListener("click", () => tryCatch(toggleResolvedStatusOfFirstCommentInSelection));
+        document.getElementById("range").addEventListener("click", () => tryCatch(getFirstCommentRangeInSelection));
+        document.getElementById("get-comments-in-selection").addEventListener("click", () => tryCatch(getCommentsInSelection));
+        document.getElementById("get-replies-to-first-comment-in-selection").addEventListener("click", () => tryCatch(getRepliesToFirstCommentInSelection));
+        document.getElementById("delete").addEventListener("click", () => tryCatch(deleteFirstCommentInSelection));
+        document.getElementById("get-comments").addEventListener("click", () => tryCatch(getComments));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function insertComment() {
           // Sets a comment on the selected content.
           await Word.run(async (context) => {
-            const text = $("#comment-text")
-              .val()
-              .toString();
+            const text = (document.getElementById("comment-text") as HTMLInputElement).value;
             const comment: Word.Comment = context.document.getSelection().insertComment(text);
 
             // Load object to log in the console.
@@ -37,9 +35,7 @@ script:
         async function editFirstCommentInSelection() {
           // Edits the first active comment in the selected content.
           await Word.run(async (context) => {
-            const text = $("#edit-comment-text")
-              .val()
-              .toString();
+            const text = (document.getElementById("edit-comment-text") as HTMLInputElement).value;
             const comments: Word.CommentCollection = context.document.getSelection().getComments();
             comments.load("items");
             await context.sync();
@@ -63,9 +59,7 @@ script:
         async function replyToFirstActiveCommentInSelection() {
           // Replies to the first active comment in the selected content.
           await Word.run(async (context) => {
-            const text = $("#reply-text")
-              .val()
-              .toString();
+            const text = (document.getElementById("reply-text") as HTMLInputElement).value;
             const comments: Word.CommentCollection = context.document.getSelection().getComments();
             comments.load("items");
             await context.sync();
@@ -218,14 +212,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows basic operations using comments.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Add sample text</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <h4>Manage comments in selection</h4>
@@ -297,15 +289,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/50-document/manage-custom-xml-part-ns.yaml b/samples/word/50-document/manage-custom-xml-part-ns.yaml
index 0ee6ebbae..c40fe12a7 100644
--- a/samples/word/50-document/manage-custom-xml-part-ns.yaml
+++ b/samples/word/50-document/manage-custom-xml-part-ns.yaml
@@ -1,20 +1,20 @@
 order: 10
 id: word-document-manage-custom-xml-part-ns
 name: Manage a CustomXmlPart with the namespace
-description: 'This sample shows how to add, query, replace, edit, and delete a custom XML part in a document.'
+description: This sample shows how to add, query, replace, edit, and delete a custom XML part in a document.
 host: WORD
 api_set:
     WordApi: '1.4'
 script:
-    content: |
-        $("#add-custom-xml-part").on("click", () => tryCatch(addCustomXmlPart));
-        $("#query").on("click", () => tryCatch(query));
-        $("#get-namespace").on("click", () => tryCatch(getNamespace));
-        $("#get-by-namespace").on("click", () => tryCatch(getByNamespaceUri));
-        $("#replace-custom-xml-part").on("click", () => tryCatch(replace));
-        $("#insert-attribute").on("click", () => tryCatch(insertAttribute));
-        $("#insert-element").on("click", () => tryCatch(insertElement));
-        $("#delete-custom-xml-part").on("click", () => tryCatch(deleteCustomXmlPart));
+    content: |-
+        document.getElementById("add-custom-xml-part").addEventListener("click", () => tryCatch(addCustomXmlPart));
+        document.getElementById("query").addEventListener("click", () => tryCatch(query));
+        document.getElementById("get-namespace").addEventListener("click", () => tryCatch(getNamespace));
+        document.getElementById("get-by-namespace").addEventListener("click", () => tryCatch(getByNamespaceUri));
+        document.getElementById("replace-custom-xml-part").addEventListener("click", () => tryCatch(replace));
+        document.getElementById("insert-attribute").addEventListener("click", () => tryCatch(insertAttribute));
+        document.getElementById("insert-element").addEventListener("click", () => tryCatch(insertElement));
+        document.getElementById("delete-custom-xml-part").addEventListener("click", () => tryCatch(deleteCustomXmlPart));
 
         async function addCustomXmlPart() {
           // Adds a custom XML part.
@@ -257,7 +257,6 @@ template:
             <p>This sample shows how to add, query, replace, edit, and delete a custom XML part in a document.</p>
             <p><b>Note</b>: For your production add-in, make sure to create and host your own XML schema.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="add-custom-xml-part" class="ms-Button">
@@ -299,15 +298,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/50-document/manage-custom-xml-part.yaml b/samples/word/50-document/manage-custom-xml-part.yaml
index f13e4e813..630a7587d 100644
--- a/samples/word/50-document/manage-custom-xml-part.yaml
+++ b/samples/word/50-document/manage-custom-xml-part.yaml
@@ -1,17 +1,17 @@
 order: 11
 id: word-document-manage-custom-xml-part
 name: Manage a CustomXmlPart without the namespace
-description: 'This sample shows how to add, query, edit, and delete a custom XML part in a document.'
+description: This sample shows how to add, query, edit, and delete a custom XML part in a document.
 host: WORD
 api_set:
     WordApi: '1.4'
 script:
-    content: |
-        $("#add-custom-xml-part").on("click", () => tryCatch(addCustomXmlPart));
-        $("#query").on("click", () => tryCatch(query));
-        $("#insert-attribute").on("click", () => tryCatch(insertAttribute));
-        $("#insert-element").on("click", () => tryCatch(insertElement));
-        $("#delete-custom-xml-part").on("click", () => tryCatch(deleteCustomXmlPart));
+    content: |-
+        document.getElementById("add-custom-xml-part").addEventListener("click", () => tryCatch(addCustomXmlPart));
+        document.getElementById("query").addEventListener("click", () => tryCatch(query));
+        document.getElementById("insert-attribute").addEventListener("click", () => tryCatch(insertAttribute));
+        document.getElementById("insert-element").addEventListener("click", () => tryCatch(insertElement));
+        document.getElementById("delete-custom-xml-part").addEventListener("click", () => tryCatch(deleteCustomXmlPart));
 
         async function addCustomXmlPart() {
           // Adds a custom XML part.
@@ -174,7 +174,6 @@ template:
             <p>This sample shows how to add, query, edit, and delete a custom XML part in a document.</p>
           <p><b>Note</b>: For your production add-in, make sure to create and host your own XML schema.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="add-custom-xml-part" class="ms-Button">
@@ -207,15 +206,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/50-document/manage-fields.yaml b/samples/word/50-document/manage-fields.yaml
index c663ffc3d..b60163bee 100644
--- a/samples/word/50-document/manage-fields.yaml
+++ b/samples/word/50-document/manage-fields.yaml
@@ -1,20 +1,20 @@
 order: 8
 id: word-document-manage-fields
 name: Manage fields
-description: 'This sample shows how to perform basic operations on fields, including insert, get, and delete.'
+description: This sample shows how to perform basic operations on fields, including insert, get, and delete.
 host: WORD
 api_set:
     WordApi: '1.5'
 script:
-    content: |
-        $("#insert-date-field").on("click", () => tryCatch(rangeInsertDateField));
-        $("#get-first").on("click", () => tryCatch(getFirstField));
-        $("#get-parent-body").on("click", () => tryCatch(getParentBodyOfFirstField));
-        $("#get-all").on("click", () => tryCatch(getAllFields));
-        $("#get-selected-field-and-update").on("click", () => tryCatch(getSelectedFieldAndUpdate));
-        $("#get-selected-field-and-lock-or-unlock").on("click", () => tryCatch(getFieldAndLockOrUnlock));
-        $("#delete-first-field").on("click", () => tryCatch(deleteFirstField));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("insert-date-field").addEventListener("click", () => tryCatch(rangeInsertDateField));
+        document.getElementById("get-first").addEventListener("click", () => tryCatch(getFirstField));
+        document.getElementById("get-parent-body").addEventListener("click", () => tryCatch(getParentBodyOfFirstField));
+        document.getElementById("get-all").addEventListener("click", () => tryCatch(getAllFields));
+        document.getElementById("get-selected-field-and-update").addEventListener("click", () => tryCatch(getSelectedFieldAndUpdate));
+        document.getElementById("get-selected-field-and-lock-or-unlock").addEventListener("click", () => tryCatch(getFieldAndLockOrUnlock));
+        document.getElementById("delete-first-field").addEventListener("click", () => tryCatch(deleteFirstField));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function rangeInsertDateField() {
           // Inserts a Date field before selection.
@@ -179,14 +179,12 @@ template:
                     href="https://support.microsoft.com/office/c429bbb0-8669-48a7-bd24-bab6ba6b06bb">Insert, edit, and view
                     fields in Word</a>.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Set up</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <h4>Insert fields</h4>
@@ -197,7 +195,6 @@ template:
                   <span class="ms-Button-label">Insert Date field</span>
             </button>
             </p>
-
             <h4>Get and update fields</h4>
             <button id="get-first" class="ms-Button">
             <span class="ms-Button-label">Get first field</span>
@@ -218,7 +215,6 @@ template:
                     <span class="ms-Button-label">Toggle locked/unlocked</span>
                 </button>
             </p>
-
             <h4>Delete fields</h4>
             <button id="delete-first-field"" class="ms-Button">
                         <span class="ms-Button-label">Delete first field</span>
@@ -238,15 +234,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/50-document/manage-footnotes.yaml b/samples/word/50-document/manage-footnotes.yaml
index 85eaa494d..20115c5a3 100644
--- a/samples/word/50-document/manage-footnotes.yaml
+++ b/samples/word/50-document/manage-footnotes.yaml
@@ -1,29 +1,27 @@
 order: 7
 id: word-document-manage-footnotes
 name: Manage footnotes
-description: 'This sample shows how to perform basic footnote operations, including insert, get, and delete.'
+description: This sample shows how to perform basic footnote operations, including insert, get, and delete.
 host: WORD
 api_set:
     WordApi: '1.5'
 script:
-    content: |
-        $("#insert-footnote").on("click", () => tryCatch(insertFootnote));
-        $("#get-reference").on("click", () => tryCatch(getReference));
-        $("#get-footnote-type").on("click", () => tryCatch(getFootnoteType));
-        $("#get-footnote-body").on("click", () => tryCatch(getFootnoteBody));
-        $("#get-next-footnote").on("click", () => tryCatch(getNextFootnote));
-        $("#delete-footnote").on("click", () => tryCatch(deleteFootnote));
-        $("#get-first-footnote").on("click", () => tryCatch(getFirstFootnote));
-        $("#get-footnotes-from-body").on("click", () => tryCatch(getFootnotesFromBody));
-        $("#get-footnotes-from-range").on("click", () => tryCatch(getFootnotesFromRange));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("insert-footnote").addEventListener("click", () => tryCatch(insertFootnote));
+        document.getElementById("get-reference").addEventListener("click", () => tryCatch(getReference));
+        document.getElementById("get-footnote-type").addEventListener("click", () => tryCatch(getFootnoteType));
+        document.getElementById("get-footnote-body").addEventListener("click", () => tryCatch(getFootnoteBody));
+        document.getElementById("get-next-footnote").addEventListener("click", () => tryCatch(getNextFootnote));
+        document.getElementById("delete-footnote").addEventListener("click", () => tryCatch(deleteFootnote));
+        document.getElementById("get-first-footnote").addEventListener("click", () => tryCatch(getFirstFootnote));
+        document.getElementById("get-footnotes-from-body").addEventListener("click", () => tryCatch(getFootnotesFromBody));
+        document.getElementById("get-footnotes-from-range").addEventListener("click", () => tryCatch(getFootnotesFromRange));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function insertFootnote() {
           // Sets a footnote on the selected content.
           await Word.run(async (context) => {
-            const text = $("#input-footnote")
-              .val()
-              .toString();
+            const text = (document.getElementById("input-footnote") as HTMLInputElement).value;
             const footnote: Word.NoteItem = context.document.getSelection().insertFootnote(text);
             await context.sync();
 
@@ -37,7 +35,7 @@ script:
             footnotes.load("items/reference");
             await context.sync();
 
-            const referenceNumber = $("#input-reference").val();
+            const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value;
             const mark = (referenceNumber as number) - 1;
             const item: Word.NoteItem = footnotes.items[mark];
             const reference: Word.Range = item.reference;
@@ -54,7 +52,7 @@ script:
             footnotes.load("items");
             await context.sync();
 
-            const referenceNumber = $("#input-reference").val();
+            const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value;
             const mark = (referenceNumber as number) - 1;
             const item: Word.NoteItem = footnotes.items[mark];
             console.log(`Note type of footnote ${referenceNumber}: ${item.type}`);
@@ -72,7 +70,7 @@ script:
             footnotes.load("items/body");
             await context.sync();
 
-            const referenceNumber = $("#input-reference").val();
+            const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value;
             const mark = (referenceNumber as number) - 1;
             const footnoteBody: Word.Range = footnotes.items[mark].body.getRange();
             footnoteBody.load("text");
@@ -88,7 +86,7 @@ script:
             footnotes.load("items/reference");
             await context.sync();
 
-            const referenceNumber = $("#input-reference").val();
+            const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value;
             const mark = (referenceNumber as number) - 1;
             const reference: Word.Range = footnotes.items[mark].getNext().reference;
             reference.select();
@@ -102,7 +100,7 @@ script:
             footnotes.load("items");
             await context.sync();
 
-            const referenceNumber = $("#input-reference").val();
+            const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value;
             const mark = (referenceNumber as number) - 1;
             footnotes.items[mark].delete();
             await context.sync();
@@ -170,14 +168,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows basic operations using footnotes.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Add sample text</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <h4>Insert footnote</h4>
@@ -238,15 +234,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/50-document/manage-settings.yaml b/samples/word/50-document/manage-settings.yaml
index 1264bfdea..a14fe7961 100644
--- a/samples/word/50-document/manage-settings.yaml
+++ b/samples/word/50-document/manage-settings.yaml
@@ -1,33 +1,27 @@
 order: 9
 id: word-document-manage-settings
 name: Manage settings
-description: 'This sample shows how to add, edit, get, and delete custom settings on a document.'
+description: This sample shows how to add, edit, get, and delete custom settings on a document.
 host: WORD
 api_set:
     WordApi: '1.4'
 script:
-    content: |
-        $("#add-edit-setting").on("click", () => tryCatch(addEditSetting));
-        $("#get-all-settings").on("click", () => tryCatch(getAllSettings));
-        $("#delete-all-settings").on("click", () => tryCatch(deleteAllSettings));
+    content: |-
+        document.getElementById("add-edit-setting").addEventListener("click", () => tryCatch(addEditSetting));
+        document.getElementById("get-all-settings").addEventListener("click", () => tryCatch(getAllSettings));
+        document.getElementById("delete-all-settings").addEventListener("click", () => tryCatch(deleteAllSettings));
 
         async function addEditSetting() {
           // Adds a new custom setting or
           // edits the value of an existing one.
           await Word.run(async (context) => {
-            const key = $("#key")
-              .val()
-              .toString();
-
+            const key = (document.getElementById("key") as HTMLInputElement).value;
             if (key == "") {
               console.error("Key shouldn't be empty.");
               return;
             }
 
-            const value = $("#value")
-              .val()
-              .toString();
-
+            const value = (document.getElementById("value") as HTMLInputElement).value;
             const settings: Word.SettingCollection = context.document.settings;
             const setting: Word.Setting = settings.add(key, value);
             setting.load();
@@ -82,7 +76,6 @@ template:
                 can
                 only be managed by that add-in.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Add a new setting, or edit an existing one</p>
@@ -120,15 +113,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/50-document/manage-styles.yaml b/samples/word/50-document/manage-styles.yaml
index 95a1ba8d8..0398d69e9 100644
--- a/samples/word/50-document/manage-styles.yaml
+++ b/samples/word/50-document/manage-styles.yaml
@@ -6,16 +6,16 @@ host: WORD
 api_set:
     WordApiDesktop: '1.1'
 script:
-    content: |
-        $("#count").on("click", () => tryCatch(getCount));
-        $("#add-style").on("click", () => tryCatch(addStyle));
-        $("#properties").on("click", () => tryCatch(getProperties));
-        $("#apply-style").on("click", () => tryCatch(applyStyle));
-        $("#font-properties").on("click", () => tryCatch(setFontProperties));
-        $("#paragraph-format").on("click", () => tryCatch(setParagraphFormat));
-        $("#border-properties").on("click", () => tryCatch(setBorderProperties));
-        $("#shading-properties").on("click", () => tryCatch(setShadingProperties));
-        $("#delete-style").on("click", () => tryCatch(deleteStyle));
+    content: |-
+        document.getElementById("count").addEventListener("click", () => tryCatch(getCount));
+        document.getElementById("add-style").addEventListener("click", () => tryCatch(addStyle));
+        document.getElementById("properties").addEventListener("click", () => tryCatch(getProperties));
+        document.getElementById("apply-style").addEventListener("click", () => tryCatch(applyStyle));
+        document.getElementById("font-properties").addEventListener("click", () => tryCatch(setFontProperties));
+        document.getElementById("paragraph-format").addEventListener("click", () => tryCatch(setParagraphFormat));
+        document.getElementById("border-properties").addEventListener("click", () => tryCatch(setBorderProperties));
+        document.getElementById("shading-properties").addEventListener("click", () => tryCatch(setShadingProperties));
+        document.getElementById("delete-style").addEventListener("click", () => tryCatch(deleteStyle));
 
         async function getCount() {
           // Gets the number of available styles stored with the document.
@@ -31,7 +31,7 @@ script:
         async function addStyle() {
           // Adds a new style.
           await Word.run(async (context) => {
-            const newStyleName = $("#new-style-name").val() as string;
+            const newStyleName = (document.getElementById("new-style-name") as HTMLInputElement).value;
             if (newStyleName == "") {
               console.warn("Enter a style name to add.");
               return;
@@ -48,7 +48,7 @@ script:
               return;
             }
 
-            const newStyleType = ($("#new-style-type").val() as unknown) as Word.StyleType;
+            const newStyleType = ((document.getElementById("new-style-type") as HTMLSelectElement).value as unknown) as Word.StyleType;
             context.document.addStyle(newStyleName, newStyleType);
             await context.sync();
 
@@ -59,7 +59,7 @@ script:
         async function getProperties() {
           // Gets the properties of the specified style.
           await Word.run(async (context) => {
-            const styleName = $("#style-name-to-use").val() as string;
+            const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value;
             if (styleName == "") {
               console.warn("Enter a style name to get properties.");
               return;
@@ -84,7 +84,7 @@ script:
         async function applyStyle() {
           // Applies the specified style to a paragraph.
           await Word.run(async (context) => {
-            const styleName = $("#style-name-to-use").val() as string;
+            const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value;
             if (styleName == "") {
               console.warn("Enter a style name to apply.");
               return;
@@ -115,7 +115,7 @@ script:
         async function setFontProperties() {
           // Updates font properties (e.g., color, size) of the specified style.
           await Word.run(async (context) => {
-            const styleName = $("#style-name").val() as string;
+            const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
             if (styleName == "") {
               console.warn("Enter a style name to update font properties.");
               return;
@@ -139,7 +139,7 @@ script:
         async function setParagraphFormat() {
           // Sets certain aspects of the specified style's paragraph format e.g., the left indent size and the alignment.
           await Word.run(async (context) => {
-            const styleName = $("#style-name").val() as string;
+            const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
             if (styleName == "") {
               console.warn("Enter a style name to update its paragraph format.");
               return;
@@ -162,7 +162,7 @@ script:
         async function setBorderProperties() {
           // Updates border properties (e.g., type, width, color) of the specified style.
           await Word.run(async (context) => {
-            const styleName = $("#style-name").val() as string;
+            const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
             if (styleName == "") {
               console.warn("Enter a style name to update border properties.");
               return;
@@ -190,7 +190,7 @@ script:
         async function setShadingProperties() {
           // Updates shading properties (e.g., texture, pattern colors) of the specified style.
           await Word.run(async (context) => {
-            const styleName = $("#style-name").val() as string;
+            const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
             if (styleName == "") {
               console.warn("Enter a style name to update shading properties.");
               return;
@@ -219,7 +219,7 @@ script:
         async function deleteStyle() {
           // Deletes the custom style.
           await Word.run(async (context) => {
-            const styleName = $("#style-name-to-delete").val() as string;
+            const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
             if (styleName == "") {
               console.warn("Enter a style name to delete.");
               return;
@@ -253,7 +253,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to manage styles.
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>
@@ -262,7 +261,6 @@ template:
               <span class="ms-Button-label">Get count</span>
             </button>
             </p>
-
             <h4>Add a custom style</h4>
             <div>Give the style an alphanumeric name. Must start with a letter. Examples: NewName, newname1</div>
             <p>
@@ -281,7 +279,6 @@ template:
                 <button id="add-style" class="ms-Button">
             <span class="ms-Button-label">Add style</span>
           </button>
-
                 <h4>Use custom style</h4>
                 <label style="margin-left: 20px">Style name:</label>
                 <input id="style-name-to-use"/>
@@ -293,7 +290,6 @@ template:
                 <button id="apply-style" class="ms-Button">
               <span class="ms-Button-label">Apply style to paragraph</span>
             </button>
-
                 <h4>Update custom style</h4>
                 <label style="margin-left: 20px">Style name:</label>
                 <input id="style-name"/>
@@ -317,7 +313,6 @@ template:
                 <button id="shading-properties" class="ms-Button">
               <span class="ms-Button-label">Set shading properties</span>
             </button>
-
                 <h4>Delete custom style</h4>
                 <p>
                     <label style="margin-left: 20px">Style name:</label>
@@ -341,11 +336,7 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/50-document/manage-tracked-changes.yaml b/samples/word/50-document/manage-tracked-changes.yaml
index 908027c8a..30307f735 100644
--- a/samples/word/50-document/manage-tracked-changes.yaml
+++ b/samples/word/50-document/manage-tracked-changes.yaml
@@ -1,20 +1,20 @@
 order: 5
 id: word-document-manage-tracked-changes
 name: Manage tracked changes
-description: 'This samples shows how to manage tracked changes, including accepting and rejecting changes.'
+description: This samples shows how to manage tracked changes, including accepting and rejecting changes.
 host: WORD
 api_set:
     WordApi: '1.6'
 script:
-    content: |
-        $("#get-all-tracked-changes").on("click", () => tryCatch(getAllTrackedChanges));
-        $("#get-first-tracked-change-range").on("click", () => tryCatch(getFirstTrackedChangeRange));
-        $("#get-next-tracked-change").on("click", () => tryCatch(getNextTrackedChange));
-        $("#accept-first-tracked-change").on("click", () => tryCatch(acceptFirstTrackedChange));
-        $("#reject-first-tracked-change").on("click", () => tryCatch(rejectFirstTrackedChange));
-        $("#accept-all-tracked-changes").on("click", () => tryCatch(acceptAllTrackedChanges));
-        $("#reject-all-tracked-changes").on("click", () => tryCatch(rejectAllTrackedChanges));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("get-all-tracked-changes").addEventListener("click", () => tryCatch(getAllTrackedChanges));
+        document.getElementById("get-first-tracked-change-range").addEventListener("click", () => tryCatch(getFirstTrackedChangeRange));
+        document.getElementById("get-next-tracked-change").addEventListener("click", () => tryCatch(getNextTrackedChange));
+        document.getElementById("accept-first-tracked-change").addEventListener("click", () => tryCatch(acceptFirstTrackedChange));
+        document.getElementById("reject-first-tracked-change").addEventListener("click", () => tryCatch(rejectFirstTrackedChange));
+        document.getElementById("accept-all-tracked-changes").addEventListener("click", () => tryCatch(acceptAllTrackedChanges));
+        document.getElementById("reject-all-tracked-changes").addEventListener("click", () => tryCatch(rejectAllTrackedChanges));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function getAllTrackedChanges() {
           // Gets all tracked changes.
@@ -152,14 +152,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample shows how to manage tracked changes.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Add sample text</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="get-all-tracked-changes" class="ms-Button">
@@ -204,15 +202,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/50-document/save-close.yaml b/samples/word/50-document/save-close.yaml
index 2af9a390d..5f8f691dc 100644
--- a/samples/word/50-document/save-close.yaml
+++ b/samples/word/50-document/save-close.yaml
@@ -6,21 +6,19 @@ host: WORD
 api_set:
     WordApi: '1.5'
 script:
-    content: |
-        $("#save-no-prompt").on("click", () => tryCatch(saveNoPrompt));
-        $("#save-after-prompt").on("click", () => tryCatch(saveAfterPrompt));
-        $("#close-after-save").on("click", () => tryCatch(closeAfterSave));
-        $("#close-no-save").on("click", () => tryCatch(closeWithoutSave));
-        $("#save").on("click", () => tryCatch(save));
-        $("#close").on("click", () => tryCatch(close));
+    content: |-
+        document.getElementById("save-no-prompt").addEventListener("click", () => tryCatch(saveNoPrompt));
+        document.getElementById("save-after-prompt").addEventListener("click", () => tryCatch(saveAfterPrompt));
+        document.getElementById("close-after-save").addEventListener("click", () => tryCatch(closeAfterSave));
+        document.getElementById("close-no-save").addEventListener("click", () => tryCatch(closeWithoutSave));
+        document.getElementById("save").addEventListener("click", () => tryCatch(save));
+        document.getElementById("close").addEventListener("click", () => tryCatch(close));
 
         async function saveNoPrompt() {
           // Saves the document with the provided file name
           // if it hasn't been saved before.
           await Word.run(async (context) => {
-            const text = $("#fileName-text")
-              .val()
-              .toString();
+            const text = (document.getElementById("fileName-text") as HTMLInputElement).value;
             context.document.save(Word.SaveBehavior.save, text);
             await context.sync();
           });
@@ -82,7 +80,6 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to use the options for saving and closing the current document.</p>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>
@@ -132,15 +129,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/90-scenarios/correlated-objects-pattern.yaml b/samples/word/90-scenarios/correlated-objects-pattern.yaml
new file mode 100644
index 000000000..32b972033
--- /dev/null
+++ b/samples/word/90-scenarios/correlated-objects-pattern.yaml
@@ -0,0 +1,166 @@
+order: 3
+id: word-scenarios-correlated-objects-pattern
+name: Correlated objects pattern
+description: Shows the performance benefits of avoiding `context.sync` calls in a loop.
+author: OfficeDev
+host: WORD
+api_set:
+    WordApi: '1.4'
+script:
+    content: |-
+        document.getElementById("replace-placeholders").addEventListener("click", () => tryCatch(replacePlaceholders));
+        document.getElementById("replace-placeholders-slow").addEventListener("click", () => tryCatch(replacePlaceholdersSlow));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-lots-of-text").addEventListener("click", () => tryCatch(addLotsOfText));
+        const jobMapping = [
+          { job: "{Coordinator}", person: "Sally" },
+          { job: "{Deputy}", person: "Bob" },
+          { job: "{Manager}", person: "Kim" }
+        ];
+        async function replacePlaceholders() {
+          Word.run(async (context) => {
+            const startTime = Date.now();
+            let count = 0;
+
+            // Find the locations of all the placeholder strings.
+            const allSearchResults = [];
+            for (let i = 0; i < jobMapping.length; i++) {
+              let options = Word.SearchOptions.newObject(context);
+              options.matchWildcards = false;
+              let searchResults = context.document.body.search(jobMapping[i].job, options);
+              searchResults.load('items');
+              let correlatedSearchResult = {
+                rangesMatchingJob: searchResults,
+                personAssignedToJob: jobMapping[i].person
+              }
+              allSearchResults.push(correlatedSearchResult);
+            }
+
+            // Sync to load those locations in the add-in.
+            await context.sync()
+
+            // Replace the placeholder text at the known locations.
+            for (let i = 0; i < allSearchResults.length; i++) {
+              let correlatedObject = allSearchResults[i];
+
+              for (let j = 0; j < correlatedObject.rangesMatchingJob.items.length; j++) {
+                let targetRange = correlatedObject.rangesMatchingJob.items[j];
+                let name = correlatedObject.personAssignedToJob;
+                targetRange.insertText(name, Word.InsertLocation.replace);
+                count++;
+              }
+            }
+
+            await context.sync();
+            console.log(`Replacing ${count} placeholders with the correlated objects pattern took ${Date.now() - startTime} milliseconds.`);
+            console.log()
+          });
+        }
+        async function replacePlaceholdersSlow() {
+          Word.run(async (context) => {
+            const startTime = Date.now();
+            let count = 0;
+
+            // The context.sync calls in the loops will degrade performance.
+            for (let i = 0; i < jobMapping.length; i++) {
+              let options = Word.SearchOptions.newObject(context);
+              options.matchWildcards = false;
+              let searchResults = context.document.body.search(jobMapping[i].job, options);
+              searchResults.load('items');
+
+              await context.sync();
+
+              for (let j = 0; j < searchResults.items.length; j++) {
+                searchResults.items[j].insertText(jobMapping[i].person, Word.InsertLocation.replace);
+                count++;
+                await context.sync();
+              }
+            }
+            console.log(`Replacing ${count} placeholders with in-loop sync statements took ${Date.now() - startTime} milliseconds.`);
+          });
+        }
+        async function setup(timesToAddText: number = 1) {
+          await Word.run(async (context) => {
+            console.log("Setup beginning...");
+            const body: Word.Body = context.document.body;
+            body.clear();
+            while (timesToAddText > 0) {
+              body.insertParagraph(
+                "This defines the roles of {Coordinator}, {Deputy}, {Manager}.",
+                Word.InsertLocation.end
+              );
+              body.insertParagraph(
+                "{Coordinator}: Oversees daily operations and ensures projects run smoothly by coordinating between different teams and resources.",
+                Word.InsertLocation.end
+              );
+              body.insertParagraph(
+                "{Deputy}: Assists and supports senior management, often stepping in to make decisions or manage tasks in {Manager}'s absence.",
+                Word.InsertLocation.end
+              );
+              body.insertParagraph(
+                "{Manager}: Leads the team, setting goals, planning strategies, and making decisions to achieve organizational objectives.",
+                Word.InsertLocation.end
+              );
+              timesToAddText--;
+            }
+            await context.sync();
+            console.log("Setup complete.");
+          });
+        }
+        async function addLotsOfText() {
+          // Add the setup text 100 times.
+          setup(100);
+        }
+        // Default helper for invoking an action and handling errors.
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+          <p>This sample demonstrates the performance optimization gained from the correlated objects pattern. For more information, see <a href="https://learn.microsoft.com/en-us/office/dev/add-ins/concepts/correlated-objects-pattern">Avoid using the context.sync method in loops</a>.</p>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+          <h3>Setup</h3>
+          <p>Use <b>Setup</b> to create a basic text block with some placeholders. Use <b>More text</b> to create a longer text block to better see performance distinctions.</p>
+          <button id="setup" class="ms-Button">
+              <span class="ms-Button-label">Setup</span>
+          </button><button id="add-lots-of-text" class="ms-Button">
+              <span class="ms-Button-label">More text</span>
+          </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+          <h3>Replace placeholder text</h3>
+          <button id="replace-placeholders" class="ms-Button">
+              <span class="ms-Button-label">Replace all</span>
+          </button>
+          <button id="replace-placeholders-slow" class="ms-Button">
+              <span class="ms-Button-label">Replace all (slow)</span>
+          </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/90-scenarios/doc-assembly.yaml b/samples/word/90-scenarios/doc-assembly.yaml
index 86d7b6556..186206ba1 100644
--- a/samples/word/90-scenarios/doc-assembly.yaml
+++ b/samples/word/90-scenarios/doc-assembly.yaml
@@ -8,11 +8,11 @@ api_set:
     WordApi: '1.1'
 script:
     content: |-
-        $("#insert-header").on("click", () => tryCatch(insertHeader));
-        $("#add-paragraphs").on("click", () => tryCatch(addParagraphs));
-        $("#add-content-controls").on("click", () => tryCatch(addContentControls));
-        $("#change-customer").on("click", () => tryCatch(changeCustomer));
-        $("#add-footer").on("click", () => tryCatch(addFooter));
+        document.getElementById("insert-header").addEventListener("click", () => tryCatch(insertHeader));
+        document.getElementById("add-paragraphs").addEventListener("click", () => tryCatch(addParagraphs));
+        document.getElementById("add-content-controls").addEventListener("click", () => tryCatch(addContentControls));
+        document.getElementById("change-customer").addEventListener("click", () => tryCatch(changeCustomer));
+        document.getElementById("add-footer").addEventListener("click", () => tryCatch(addFooter));
 
         async function insertHeader() {
             await Word.run(async (context) => {
@@ -123,7 +123,6 @@ template:
             This sample demonstrates how to use the basic document assembly objects. It creates a sample document, searches for text,
             creates a template, and adds paragraphs and footers.
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <button id="insert-header" class="ms-Button">
@@ -164,15 +163,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/90-scenarios/multiple-property-set.yaml b/samples/word/90-scenarios/multiple-property-set.yaml
index 41c1674c6..bbd154569 100644
--- a/samples/word/90-scenarios/multiple-property-set.yaml
+++ b/samples/word/90-scenarios/multiple-property-set.yaml
@@ -7,10 +7,10 @@ host: WORD
 api_set:
     WordApi: '1.3'
 script:
-    content: |
-        $("#set-multiple-properties-with-object").on("click", () => tryCatch(setMultiplePropertiesWithObject));
-        $("#copy-properties-from-paragraph").on("click", () => tryCatch(copyPropertiesFromParagraph));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("set-multiple-properties-with-object").addEventListener("click", () => tryCatch(setMultiplePropertiesWithObject));
+        document.getElementById("copy-properties-from-paragraph").addEventListener("click", () => tryCatch(copyPropertiesFromParagraph));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function setMultiplePropertiesWithObject() {
           await Word.run(async (context) => {
@@ -73,14 +73,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             <p>This sample shows how to format text using the object.set method.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
               <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>Set the styling of the first paragraph.</p>
@@ -107,14 +105,8 @@ style:
         }
     language: css
 libraries: |-
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/samples/word/99-preview-apis/close-document-window.yaml b/samples/word/99-preview-apis/close-document-window.yaml
new file mode 100644
index 000000000..7908cc0e5
--- /dev/null
+++ b/samples/word/99-preview-apis/close-document-window.yaml
@@ -0,0 +1,61 @@
+id: word-close-document-window
+name: Close document window
+description: Shows how to close document window.
+host: WORD
+api_set:
+    WordApi: '1.10'
+script:
+    content: |
+        document.getElementById("close-with-save-prompt").addEventListener("click", () => tryCatch(closeWithSavePrompt));
+
+        async function closeWithSavePrompt() {
+          await Word.run(async (context) => {
+            // Closes the document window, prompting to save if this is a new document.
+            const window: Word.Window = context.document.activeWindow;
+            const closeOptions: Word.WindowCloseOptions = { saveChanges: Word.SaveConfiguration.promptToSaveChanges };
+            console.log("About to close the document window...");
+            window.close(closeOptions);
+          });
+        }
+
+        // Default helper for invoking an action and handling errors.
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            This sample demonstrates how to close the document window.
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <button id="close-with-save-prompt" class="ms-Button">
+            <span class="ms-Button-label">Close document</span>
+          </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js-preview/index.d.ts
+
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/99-preview-apis/insert-and-change-content-controls.yaml b/samples/word/99-preview-apis/insert-and-change-content-controls.yaml
index 70b694d4a..c4f5761e8 100644
--- a/samples/word/99-preview-apis/insert-and-change-content-controls.yaml
+++ b/samples/word/99-preview-apis/insert-and-change-content-controls.yaml
@@ -1,17 +1,17 @@
 id: word-insert-and-change-content-controls
 name: Content control basics
-description: 'Inserts, updates, and retrieves content controls.'
+description: Inserts, updates, and retrieves content controls.
 author: OfficeDev
 host: WORD
 api_set:
-    WordApi: '1.9'
+    WordApi: '1.10'
 script:
     content: |
-        $("#insert-controls").on("click", () => tryCatch(insertContentControls));
-        $("#change-controls").on("click", () => tryCatch(modifyContentControls));
-        $("#set-state").on("click", () => tryCatch(setState));
-        $("#reset-state").on("click", () => tryCatch(resetState));
-        $("#setup").on("click", () => tryCatch(setup));
+        document.getElementById("insert-controls").addEventListener("click", () => tryCatch(insertContentControls));
+        document.getElementById("change-controls").addEventListener("click", () => tryCatch(modifyContentControls));
+        document.getElementById("set-state").addEventListener("click", () => tryCatch(setState));
+        document.getElementById("reset-state").addEventListener("click", () => tryCatch(resetState));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function insertContentControls() {
           // Traverses each paragraph of the document and wraps a content control on each with either a even or odd tags.
@@ -74,7 +74,8 @@ script:
         async function setState() {
           // Sets the state of the first content control.
           await Word.run(async (context) => {
-            const state = ($("#state-to-set").val() as unknown) as Word.ContentControlState;
+            const state = ((document.getElementById("state-to-set") as HTMLSelectElement)
+              .value as unknown) as Word.ContentControlState;
             let firstContentControl = context.document.contentControls.getFirstOrNullObject();
             await context.sync();
 
@@ -101,7 +102,7 @@ script:
               console.warn("There are no content controls in this document.");
               return;
             }
-            
+
             firstContentControl.resetState();
             firstContentControl.load("id");
             await context.sync();
@@ -144,14 +145,12 @@ template:
         <section class="ms-Fabric ms-font-m">
             This sample demonstrates how to insert content controls and change their properties.
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
               <span class="ms-Button-label">Setup</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <span class="ms-font-m">Insert content controls on each paragraph.</span>
@@ -163,7 +162,7 @@ template:
             <button id="change-controls" class="ms-Button">
             <span class="ms-Button-label">Modify content controls</span>
           </button>
-            <p />
+          <h4>Preview features</h4>
             <span class="ms-font-m">Set state of first content control.</span>
             <br/>
             <label style="margin-left: 20px">State:</label>
@@ -196,13 +195,7 @@ style:
     language: css
 libraries: |-
     https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
-    @types/office-js-preview
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js-preview/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/99-preview-apis/manage-comments.yaml b/samples/word/99-preview-apis/manage-comments.yaml
index b3eeefb61..8935b24d3 100644
--- a/samples/word/99-preview-apis/manage-comments.yaml
+++ b/samples/word/99-preview-apis/manage-comments.yaml
@@ -1,23 +1,23 @@
 id: word-manage-comments
 name: Manage comments
-description: 'This sample shows how to perform operations on comments (including insert, reply, get, edit, resolve, and delete) and use comment events.'
+description: This sample shows how to perform operations on comments (including insert, reply, get, edit, resolve, and delete) and use comment events.
 host: WORD
 api_set:
-    WordApi: '1.9'
+    WordApi: '1.10'
 script:
-    content: |
-        $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers));
-        $("#insert").on("click", () => tryCatch(insertComment));
-        $("#edit").on("click", () => tryCatch(editFirstCommentInSelection));
-        $("#reply").on("click", () => tryCatch(replyToFirstActiveCommentInSelection));
-        $("#resolve").on("click", () => tryCatch(toggleResolvedStatusOfFirstCommentInSelection));
-        $("#range").on("click", () => tryCatch(getFirstCommentRangeInSelection));
-        $("#get-comments-in-selection").on("click", () => tryCatch(getCommentsInSelection));
-        $("#get-replies-to-first-comment-in-selection").on("click", () => tryCatch(getRepliesToFirstCommentInSelection));
-        $("#delete").on("click", () => tryCatch(deleteFirstCommentInSelection));
-        $("#get-comments").on("click", () => tryCatch(getComments));
-        $("#deregister-event-handlers").on("click", () => tryCatch(deregisterEventHandlers));
-        $("#setup").on("click", () => tryCatch(setup));
+    content: |-
+        document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers));
+        document.getElementById("insert").addEventListener("click", () => tryCatch(insertComment));
+        document.getElementById("edit").addEventListener("click", () => tryCatch(editFirstCommentInSelection));
+        document.getElementById("reply").addEventListener("click", () => tryCatch(replyToFirstActiveCommentInSelection));
+        document.getElementById("resolve").addEventListener("click", () => tryCatch(toggleResolvedStatusOfFirstCommentInSelection));
+        document.getElementById("range").addEventListener("click", () => tryCatch(getFirstCommentRangeInSelection));
+        document.getElementById("get-comments-in-selection").addEventListener("click", () => tryCatch(getCommentsInSelection));
+        document.getElementById("get-replies-to-first-comment-in-selection").addEventListener("click", () => tryCatch(getRepliesToFirstCommentInSelection));
+        document.getElementById("delete").addEventListener("click", () => tryCatch(deleteFirstCommentInSelection));
+        document.getElementById("get-comments").addEventListener("click", () => tryCatch(getComments));
+        document.getElementById("deregister-event-handlers").addEventListener("click", () => tryCatch(deregisterEventHandlers));
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         let eventContexts = [];
 
@@ -42,9 +42,7 @@ script:
         async function insertComment() {
           // Sets a comment on the selected content.
           await Word.run(async (context) => {
-            const text = $("#comment-text")
-              .val()
-              .toString();
+            const text = (document.getElementById("comment-text") as HTMLInputElement).value;
             const comment: Word.Comment = context.document.getSelection().insertComment(text);
 
             // Load object to log in the console.
@@ -58,9 +56,7 @@ script:
         async function editFirstCommentInSelection() {
           // Edits the first active comment in the selected content.
           await Word.run(async (context) => {
-            const text = $("#edit-comment-text")
-              .val()
-              .toString();
+            const text = (document.getElementById("edit-comment-text") as HTMLInputElement).value;
             const comments: Word.CommentCollection = context.document.getSelection().getComments();
             comments.load("items");
             await context.sync();
@@ -84,9 +80,7 @@ script:
         async function replyToFirstActiveCommentInSelection() {
           // Replies to the first active comment in the selected content.
           await Word.run(async (context) => {
-            const text = $("#reply-text")
-              .val()
-              .toString();
+            const text = (document.getElementById("reply-text") as HTMLInputElement).value;
             const comments: Word.CommentCollection = context.document.getSelection().getComments();
             comments.load("items");
             await context.sync();
@@ -273,14 +267,12 @@ template:
                 Word
                 on a different platform.</p>
         </section>
-
         <section class="ms-Fabric setup ms-font-m">
             <h3>Set up</h3>
             <button id="setup" class="ms-Button">
             <span class="ms-Button-label">Add sample text</span>
           </button>
         </section>
-
         <section class="ms-Fabric samples ms-font-m">
             <h3>Try it out</h3>
             <p>
@@ -362,15 +354,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
+libraries: |-
     https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
-    @types/office-js-preview
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js-preview/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file
diff --git a/samples/word/default.yaml b/samples/word/default.yaml
index cf3c1fbfb..d6e45d828 100644
--- a/samples/word/default.yaml
+++ b/samples/word/default.yaml
@@ -6,8 +6,8 @@ host: WORD
 api_set:
     WordApi: '1.1'
 script:
-    content: |
-        $("#run").on("click", () => tryCatch(run));
+    content: |-
+        document.getElementById("run").addEventListener("click", () => tryCatch(run));
 
         async function run() {
             await Word.run(async (context) => {
@@ -31,7 +31,7 @@ script:
         }
     language: typescript
 template:
-    content: |
+    content: |-
         <button id="run" class="ms-Button">
             <span class="ms-Button-label">Run</span>
         </button>
@@ -49,15 +49,9 @@ style:
             min-width: 80px;
         }
     language: css
-libraries: |
-    https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
-    @types/office-js
-
-    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
-    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
-
-    core-js@2.4.1/client/core.min.js
-    @types/core-js
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
 
-    jquery@3.1.1
-    @types/jquery@3.3.1
\ No newline at end of file
+    https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+    https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
diff --git a/snippet-extractor-metadata/excel.xlsx b/snippet-extractor-metadata/excel.xlsx
index 0daeeb2d2..60920aee9 100644
Binary files a/snippet-extractor-metadata/excel.xlsx and b/snippet-extractor-metadata/excel.xlsx differ
diff --git a/snippet-extractor-metadata/outlook.xlsx b/snippet-extractor-metadata/outlook.xlsx
index 837a9fdf5..769da162a 100644
Binary files a/snippet-extractor-metadata/outlook.xlsx and b/snippet-extractor-metadata/outlook.xlsx differ
diff --git a/snippet-extractor-metadata/powerpoint.xlsx b/snippet-extractor-metadata/powerpoint.xlsx
index 4c6d50cb6..27d2f9dba 100644
Binary files a/snippet-extractor-metadata/powerpoint.xlsx and b/snippet-extractor-metadata/powerpoint.xlsx differ
diff --git a/snippet-extractor-metadata/word.xlsx b/snippet-extractor-metadata/word.xlsx
index f90deca3f..8ec0f93ba 100644
Binary files a/snippet-extractor-metadata/word.xlsx and b/snippet-extractor-metadata/word.xlsx differ
diff --git a/snippet-extractor-output/snippets.yaml b/snippet-extractor-output/snippets.yaml
index 35fa286ca..91d9201bb 100644
--- a/snippet-extractor-output/snippets.yaml
+++ b/snippet-extractor-output/snippets.yaml
@@ -1,4 +1,4 @@
-'Excel.AggregationFunction:enum':
+Excel.AggregationFunction:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-filters-and-summaries.yaml
@@ -16,16 +16,7 @@
             await context.sync();
         });
     }
-'Excel.Application#calculate:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/90-scenarios/performance-optimization.yaml
-
-
-    await Excel.run(async (context) => {
-      context.application.calculate(Excel.CalculationType.full);
-    });
-'Excel.Application#decimalSeparator:member':
+Excel.Application#decimalSeparator:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/culture-info.yaml
@@ -54,7 +45,16 @@
 
       await context.sync();
     });
-'Excel.Application#suspendScreenUpdatingUntilNextSync:member(1)':
+Excel.Application#calculate:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/90-scenarios/performance-optimization.yaml
+
+
+    await Excel.run(async (context) => {
+      context.application.calculate(Excel.CalculationType.full);
+    });
+Excel.Application#suspendScreenUpdatingUntilNextSync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/90-scenarios/performance-optimization.yaml
@@ -89,7 +89,7 @@
 
       console.log(`Ending. Adding ${ROW_COUNT * COLUMN_COUNT} cells took ${Date.now() - startTime} milliseconds`);
     });
-'Excel.ArrowheadLength:enum':
+Excel.ArrowheadLength:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-lines.yaml
@@ -108,7 +108,7 @@
 
         await context.sync();
     });
-'Excel.ArrowheadStyle:enum':
+Excel.ArrowheadStyle:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-lines.yaml
@@ -127,7 +127,7 @@
 
         await context.sync();
     });
-'Excel.ArrowheadWidth:enum':
+Excel.ArrowheadWidth:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-lines.yaml
@@ -146,7 +146,7 @@
 
         await context.sync();
     });
-'Excel.AutoFillType:enum':
+Excel.AutoFillType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-auto-fill.yaml
@@ -161,7 +161,7 @@
       sumCell.format.autofitColumns();
       await context.sync();
     });
-'Excel.AutoFilter#apply:member(1)':
+Excel.AutoFilter#apply:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-auto-filter.yaml
@@ -184,7 +184,7 @@
 
         await context.sync();
     });
-'Excel.AutoFilter#clearColumnCriteria:member(1)':
+Excel.AutoFilter#clearColumnCriteria:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-auto-filter.yaml
@@ -200,7 +200,7 @@
         sheet.autoFilter.clearColumnCriteria(3);
         await context.sync();
     });
-'Excel.AutoFilter#reapply:member(1)':
+Excel.AutoFilter#reapply:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-auto-filter.yaml
@@ -217,7 +217,7 @@
         sheet.autoFilter.reapply();
         await context.sync();
     });
-'Excel.AutoFilter#remove:member(1)':
+Excel.AutoFilter#remove:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-auto-filter.yaml
@@ -233,7 +233,7 @@
         sheet.autoFilter.remove();
         await context.sync();
     });
-'Excel.Binding#onDataChanged:member':
+Excel.Binding#onDataChanged:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/data-changed.yaml
@@ -249,7 +249,7 @@
 
         await context.sync();
     });
-'Excel.BindingType:enum':
+Excel.BindingType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-disable-events.yaml
@@ -268,7 +268,7 @@
         }
         await context.sync();
     });
-'Excel.BorderLineStyle:enum':
+Excel.BorderLineStyle:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/cell-properties.yaml
@@ -345,7 +345,7 @@
         sheet.getUsedRange().format.autofitColumns();
         await context.sync();
     });
-'Excel.BuiltInStyle:enum':
+Excel.BuiltInStyle:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/cell-properties.yaml
@@ -422,7 +422,7 @@
         sheet.getUsedRange().format.autofitColumns();
         await context.sync();
     });
-'Excel.CalculationMode:enum':
+Excel.CalculationMode:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-calculation.yaml
@@ -435,7 +435,7 @@
 
       console.log("Current calculation mode: " + context.application.calculationMode);
     });
-'Excel.CalculationType:enum':
+Excel.CalculationType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-calculation.yaml
@@ -445,7 +445,182 @@
       context.application.calculate(Excel.CalculationType.recalculate);
       await context.sync();
     });
-'Excel.CellPropertiesFill#color:member':
+Excel.CardLayoutSection:type:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-entity-attribution.yaml
+
+
+    function makeProductEntity(productID: number, productName: string, product?:
+    any) {
+      const entity: Excel.EntityCellValue = {
+        type: Excel.CellValueType.entity,
+        text: productName,
+        properties: { /* Excel.EntityPropertyType */
+          "Product ID": {
+            type: Excel.CellValueType.string,
+            basicValue: productID.toString() || ""
+          },
+          "Product Name": {
+            type: Excel.CellValueType.string,
+            basicValue: productName || ""
+          },
+          "Quantity Per Unit": {
+            type: Excel.CellValueType.string,
+            basicValue: product.quantityPerUnit || ""
+          },
+          // Add Unit Price as a formatted number.
+          "Unit Price": {
+            type: Excel.CellValueType.formattedNumber,
+            basicValue: product.unitPrice,
+            numberFormat: "$* #,##0.00"
+          }
+        },
+        layouts: { /* Excel.EntityViewLayouts */
+          card: { /* Excel.EntityCardLayout */
+            title: { property: "Product Name" },
+            sections: [ /* Excel.CardLayoutSection */
+              {
+                layout: "List",
+                properties: ["Product ID"]
+              },
+              {
+                layout: "List",
+                title: "Quantity and price",
+                collapsible: true,
+                collapsed: false,
+                properties: ["Quantity Per Unit", "Unit Price"]
+              }
+            ]
+          }
+        },
+        provider: {
+          description: product.providerName, // Name of the data provider. Displays as a tooltip when hovering over the logo. Also displays as a fallback if the source address for the image is broken.
+          logoSourceAddress: product.sourceAddress, // Source URL of the logo to display.
+          logoTargetAddress: product.targetAddress // Destination URL that the logo navigates to when clicked.
+        }
+      };
+
+      return entity;
+    }
+Excel.CellBorder:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/cell-properties.yaml
+
+
+    await Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getActiveWorksheet();
+
+        // Creating the SettableCellProperties objects to use for the range.
+        // In your add-in, these should be created once, outside the function.
+        const topHeaderProps: Excel.SettableCellProperties = {
+            // The style property takes a string matching the name of an Excel style.
+            // Built-in style names are listed in the `BuiltInStyle` enum.
+            // Note that a style will overwrite any formatting,
+            // so do not use the format property with the style property.
+            style: "Heading1"
+        };
+
+        const headerProps: Excel.SettableCellProperties = {
+            // Any subproperties of format that are not set will not be changed when these cell properties are set.
+            format: {
+                fill: {
+                    color: "Blue"
+                },
+                font: {
+                    color: "White",
+                    bold: true
+                }
+            }
+        };
+
+        const nonApplicableProps: Excel.SettableCellProperties = {
+            format: {
+                fill: {
+                    pattern: Excel.FillPattern.gray25
+                },
+                font: {
+                    color: "Gray",
+                    italic: true
+                }
+            }
+        };
+
+        const matchupScoreProps: Excel.SettableCellProperties = {
+            format: {
+                borders: {
+                    bottom: {
+                        style: Excel.BorderLineStyle.continuous
+                    },
+                    left: {
+                        style: Excel.BorderLineStyle.continuous
+                    },
+                    right: {
+                        style: Excel.BorderLineStyle.continuous
+                    },
+                    top: {
+                        style: Excel.BorderLineStyle.continuous
+                    }
+                }
+            }
+        };
+
+        const range = sheet.getRange("A1:E5");
+
+        // You can use empty JSON objects to avoid changing a cell's properties.
+        range.setCellProperties([
+            [topHeaderProps, {}, {}, {}, {}],
+            [{}, {}, headerProps, headerProps, headerProps],
+            [{}, headerProps, nonApplicableProps, matchupScoreProps, matchupScoreProps],
+            [{}, headerProps, matchupScoreProps, nonApplicableProps, matchupScoreProps],
+            [{}, headerProps, matchupScoreProps, matchupScoreProps, nonApplicableProps]
+        ]);
+
+        sheet.getUsedRange().format.autofitColumns();
+        await context.sync();
+    });
+Excel.CellControl:type:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-cell-control.yaml
+
+
+    // Add checkboxes to the table.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getActiveWorksheet();
+
+      // Get the second column in the table, without the header.
+      const range = sheet.tables.getItem("FruitTable").columns.getItem("Analysis").getDataBodyRange();
+
+      // Change the boolean values to checkboxes.
+      range.control = {
+        type: Excel.CellControlType.checkbox
+      };
+      await context.sync();
+    });
+Excel.CellControlType:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-cell-control.yaml
+
+
+    // Add checkboxes to the table.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getActiveWorksheet();
+
+      // Get the second column in the table, without the header.
+      const range = sheet.tables.getItem("FruitTable").columns.getItem("Analysis").getDataBodyRange();
+
+      // Change the boolean values to checkboxes.
+      range.control = {
+        type: Excel.CellControlType.checkbox
+      };
+      await context.sync();
+    });
+Excel.CellPropertiesFill#color:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/cell-properties.yaml
@@ -522,7 +697,7 @@
         sheet.getUsedRange().format.autofitColumns();
         await context.sync();
     });
-'Excel.CellPropertiesFillLoadOptions#color:member':
+Excel.CellPropertiesFillLoadOptions#color:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/cell-properties.yaml
@@ -551,7 +726,7 @@
         console.log(
             `Address: ${cellProperties.address}\nStyle: ${cellProperties.style}\nFill Color: ${cellProperties.format.fill.color}\nFont Color: ${cellProperties.format.font.color}`);
     });
-'Excel.CellPropertiesFont#color:member':
+Excel.CellPropertiesFont#color:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/cell-properties.yaml
@@ -628,7 +803,7 @@
         sheet.getUsedRange().format.autofitColumns();
         await context.sync();
     });
-'Excel.CellPropertiesFontLoadOptions#color:member':
+Excel.CellPropertiesFontLoadOptions#color:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/cell-properties.yaml
@@ -657,7 +832,7 @@
         console.log(
             `Address: ${cellProperties.address}\nStyle: ${cellProperties.style}\nFill Color: ${cellProperties.format.fill.color}\nFont Color: ${cellProperties.format.font.color}`);
     });
-'Excel.CellPropertiesLoadOptions#address:member':
+Excel.CellPropertiesLoadOptions#address:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/cell-properties.yaml
@@ -686,7 +861,7 @@
         console.log(
             `Address: ${cellProperties.address}\nStyle: ${cellProperties.style}\nFill Color: ${cellProperties.format.fill.color}\nFont Color: ${cellProperties.format.font.color}`);
     });
-'Excel.CellValueConditionalFormat#format:member':
+Excel.CellValueConditionalFormat#format:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -702,7 +877,7 @@
 
         await context.sync();
     });
-'Excel.CellValueConditionalFormat#rule:member':
+Excel.CellValueConditionalFormat#rule:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -718,7 +893,7 @@
 
         await context.sync();
     });
-'Excel.CellValueType:enum':
+Excel.CellValueType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-error-values.yaml
@@ -742,7 +917,7 @@
       range.valuesAsJson = [[error]];
       await context.sync();
     });
-'Excel.Chart#getDataTableOrNullObject:member(1)':
+Excel.Chart#getDataTableOrNullObject:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-table.yaml
@@ -761,7 +936,7 @@
       chartDataTable.visible = true;
       await context.sync();
     });
-'Excel.Chart#onActivated:member':
+Excel.Chart#onActivated:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-chart-activated.yaml
@@ -798,7 +973,7 @@
             console.log(`A chart was activated. ID: ${event.chartId}. Chart name: ${activatedChart.name}.`);
         });
     }
-'Excel.Chart#onDeactivated:member':
+Excel.Chart#onDeactivated:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-chart-activated.yaml
@@ -827,7 +1002,7 @@
             console.log("The pie chart is NOT active.");
         });
     }
-'Excel.ChartAxis#displayUnit:member':
+Excel.ChartAxis#displayUnit:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-axis.yaml
@@ -847,7 +1022,7 @@
 
         console.log("The vertical axis display unit is: " + valueAxis.displayUnit);
     });
-'Excel.ChartAxis#showDisplayUnitLabel:member':
+Excel.ChartAxis#showDisplayUnitLabel:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-axis.yaml
@@ -863,7 +1038,7 @@
 
         await context.sync();
     });
-'Excel.ChartCollection#onActivated:member':
+Excel.ChartCollection#onActivated:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-chart-activated.yaml
@@ -900,7 +1075,7 @@
             console.log(`A chart was activated. ID: ${event.chartId}. Chart name: ${activatedChart.name}.`);
         });
     }
-'Excel.ChartCollection#onDeactivated:member':
+Excel.ChartCollection#onDeactivated:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-chart-activated.yaml
@@ -929,7 +1104,50 @@
             console.log("The pie chart is NOT active.");
         });
     }
-'Excel.ChartDataTable#format:member':
+Excel.ChartDataLabel:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-labels.yaml
+
+
+    // This function styles substrings within data label text using font
+    formatting.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem(sheetName);
+      const chart = sheet.charts.getItemAt(0);
+      await context.sync();
+
+      const series = chart.series.getItemAt(0);
+      series.load("points");
+      await context.sync();
+
+      series.points.load("items");
+      await context.sync();
+
+      // Style a substring in the first data label.
+      let searchString = "sports";
+      let dataLabel = series.points.getItemAt(dataLabelInfo[0].index).dataLabel.load("text");
+      await context.sync();
+      let substringStart = dataLabel.text.indexOf(searchString);
+      let subLabel = dataLabel.getSubstring(substringStart, searchString.length);
+      subLabel.font.size = 13;
+      subLabel.font.bold = true;
+
+      // Style a substring in the second data label.
+      searchString = "'Titanic'";
+      dataLabel = series.points.getItemAt(dataLabelInfo[1].index).dataLabel.load("text");
+      await context.sync();
+
+      substringStart = dataLabel.text.indexOf(searchString);
+      subLabel = dataLabel.getSubstring(substringStart, searchString.length);
+      subLabel.font.name = "Calibri";
+      subLabel.font.size = 13;
+      subLabel.font.italic = true;
+      subLabel.font.color = "blue";
+      await context.sync();
+    });
+Excel.ChartDataTable#format:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-table.yaml
@@ -959,7 +1177,7 @@
       chartDataTableFormat.border.color = "blue";
       await context.sync();
     });
-'Excel.ChartDataTable#showHorizontalBorder:member':
+Excel.ChartDataTable#showHorizontalBorder:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-table.yaml
@@ -989,7 +1207,7 @@
       chartDataTableFormat.border.color = "blue";
       await context.sync();
     });
-'Excel.ChartDataTable#showLegendKey:member':
+Excel.ChartDataTable#showLegendKey:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-table.yaml
@@ -1019,7 +1237,7 @@
       chartDataTableFormat.border.color = "blue";
       await context.sync();
     });
-'Excel.ChartDataTable#showOutlineBorder:member':
+Excel.ChartDataTable#showOutlineBorder:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-table.yaml
@@ -1049,7 +1267,7 @@
       chartDataTableFormat.border.color = "blue";
       await context.sync();
     });
-'Excel.ChartDataTable#showVerticalBorder:member':
+Excel.ChartDataTable#showVerticalBorder:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-table.yaml
@@ -1079,7 +1297,7 @@
       chartDataTableFormat.border.color = "blue";
       await context.sync();
     });
-'Excel.ChartDataTable#visible:member':
+Excel.ChartDataTable#visible:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-table.yaml
@@ -1098,7 +1316,7 @@
       chartDataTable.visible = true;
       await context.sync();
     });
-'Excel.ChartDataTableFormat#border:member':
+Excel.ChartDataTableFormat#border:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-table.yaml
@@ -1128,7 +1346,7 @@
       chartDataTableFormat.border.color = "blue";
       await context.sync();
     });
-'Excel.ChartDataTableFormat#font:member':
+Excel.ChartDataTableFormat#font:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-table.yaml
@@ -1158,7 +1376,7 @@
       chartDataTableFormat.border.color = "blue";
       await context.sync();
     });
-'Excel.ChartFill#setSolidColor:member(1)':
+Excel.ChartFill#setSolidColor:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-point.yaml
@@ -1175,7 +1393,53 @@
 
         await context.sync();        
     });
-'Excel.ChartLegendFormat#font:member':
+Excel.ChartLeaderLines:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-leader-lines.yaml
+
+
+    // The following code changes the format of leader lines. It adjusts color,
+    weight, and line style.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem(sheetName);
+      const chart = sheet.charts.getItemAt(0);
+      const series = chart.series.getItemAt(0);
+      const dataLabels = series.dataLabels;
+      const lineFormat = dataLabels.leaderLines.format;
+
+      // Set leader line formatting properties.
+      lineFormat.line.color = "blue";
+      lineFormat.line.weight = 2;
+      lineFormat.line.lineStyle = Excel.ChartLineStyle.dot;
+
+      await context.sync();
+    });
+Excel.ChartLeaderLinesFormat:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-leader-lines.yaml
+
+
+    // The following code changes the format of leader lines. It adjusts color,
+    weight, and line style.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem(sheetName);
+      const chart = sheet.charts.getItemAt(0);
+      const series = chart.series.getItemAt(0);
+      const dataLabels = series.dataLabels;
+      const lineFormat = dataLabels.leaderLines.format;
+
+      // Set leader line formatting properties.
+      lineFormat.line.color = "blue";
+      lineFormat.line.weight = 2;
+      lineFormat.line.lineStyle = Excel.ChartLineStyle.dot;
+
+      await context.sync();
+    });
+Excel.ChartLegendFormat#font:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-legend.yaml
@@ -1198,82 +1462,91 @@
 
         await context.sync();
     });
-'Excel.ChartSeries#delete:member(1)':
+Excel.ChartPoint:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-series.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-labels.yaml
 
 
+    // This function adds data labels to specific chart points 
+
+    // and sets their text and position.
+
     await Excel.run(async (context) => {
-      const sheet = context.workbook.worksheets.getItem("Sample");
-      const seriesCollection = sheet.charts.getItemAt(0).series;
-      seriesCollection.load("count");
+      const sheet = context.workbook.worksheets.getItem(sheetName);
+      const chart = sheet.charts.getItemAt(0);
       await context.sync();
 
-      if (seriesCollection.count > 0) {
-        const series = seriesCollection.getItemAt(0);
+      const series = chart.series.getItemAt(0);
+      series.points.load("dataLabel");
+      await context.sync();
+      
+      // Define properties for data label positioning and shape.
+      const labelProperties = [
+        {
+          top: 70,
+          geometricShapeType: Excel.GeometricShapeType.rectangle
+        },
+        {
+          top: 200,
+          geometricShapeType: Excel.GeometricShapeType.rectangle
+        }
+      ];
 
-        // Delete the first series.
-        series.delete();
-      }
+      // Add data labels to specific chart points and set their text and properties.
+      for (let i = 0; i < dataLabelInfo.length; i++) {
+        const point = series.points.getItemAt(dataLabelInfo[i].index);
+        point.hasDataLabel = true;
 
+        const dataLabel = point.dataLabel;
+        dataLabel.text = dataLabelInfo[i].news;
+        dataLabel.set(labelProperties[i]);
+      }
       await context.sync();
     });
-'Excel.ChartSeries#getDimensionDataSourceString:member(1)':
+Excel.ChartPointsCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-source.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-labels.yaml
 
 
-    // This function retrieves the data source information of a chart series in
-    the Sample worksheet.
-
-    await Excel.run(async (context) => {
-      const sheet = context.workbook.worksheets.getItem("Sample");
+    // This function adds data labels to specific chart points 
 
-      // Get the first chart series from the first chart on the worksheet.
-      const seriesCollection = sheet.charts.getItemAt(0).series;
-      const series = seriesCollection.getItemAt(0);
+    // and sets their text and position.
 
-      // Get the series data source string and type values. 
-      const dataSourceString = series.getDimensionDataSourceString("Values");
-      const dataSourceType = series.getDimensionDataSourceType("Values");
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem(sheetName);
+      const chart = sheet.charts.getItemAt(0);
+      await context.sync();
 
-      series.load("name");
+      const series = chart.series.getItemAt(0);
+      series.points.load("dataLabel");
       await context.sync();
       
-      // Log the data source information to the console.
-      console.log(series.name + " data source string: " + dataSourceString.value);
-      console.log(series.name + " data source type: " + dataSourceType.value);
-    });
-'Excel.ChartSeries#getDimensionDataSourceType:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-source.yaml
-
-
-    // This function retrieves the data source information of a chart series in
-    the Sample worksheet.
-
-    await Excel.run(async (context) => {
-      const sheet = context.workbook.worksheets.getItem("Sample");
-
-      // Get the first chart series from the first chart on the worksheet.
-      const seriesCollection = sheet.charts.getItemAt(0).series;
-      const series = seriesCollection.getItemAt(0);
+      // Define properties for data label positioning and shape.
+      const labelProperties = [
+        {
+          top: 70,
+          geometricShapeType: Excel.GeometricShapeType.rectangle
+        },
+        {
+          top: 200,
+          geometricShapeType: Excel.GeometricShapeType.rectangle
+        }
+      ];
 
-      // Get the series data source string and type values. 
-      const dataSourceString = series.getDimensionDataSourceString("Values");
-      const dataSourceType = series.getDimensionDataSourceType("Values");
+      // Add data labels to specific chart points and set their text and properties.
+      for (let i = 0; i < dataLabelInfo.length; i++) {
+        const point = series.points.getItemAt(dataLabelInfo[i].index);
+        point.hasDataLabel = true;
 
-      series.load("name");
+        const dataLabel = point.dataLabel;
+        dataLabel.text = dataLabelInfo[i].news;
+        dataLabel.set(labelProperties[i]);
+      }
       await context.sync();
-      
-      // Log the data source information to the console.
-      console.log(series.name + " data source string: " + dataSourceString.value);
-      console.log(series.name + " data source type: " + dataSourceType.value);
     });
-'Excel.ChartSeries#getDimensionValues:member(1)':
+Excel.ChartSeries#getDimensionValues:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-bubble-chart.yaml
@@ -1299,40 +1572,279 @@
       // Log the information.
       console.log(`Series ${category.value} - X:${xValues.value},Y:${yValues.value},Bubble:${bubbleSize.value}`);
     });
-'Excel.ChartSeries#markerBackgroundColor:member':
+Excel.ChartSeries#setBubbleSizes:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-series-markers.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-bubble-chart.yaml
 
 
     await Excel.run(async (context) => {
-        let sheet = context.workbook.worksheets.getItem("Sample");
-        let salesTable = sheet.tables.getItem("SalesTable");
-        let dataRange = sheet.getRange("A1:E7");
+      /*
+        The table is expected to look like this:
+        Product, Inventory, Price, Current Market Share
+        Calamansi, 2000, $2.45, 10%
+        ...
 
-        // Create an XY scatter chart.
-        let chart = sheet.charts.add("XYScatterSmooth", dataRange, "Auto");
-        chart.title.text = "Bicycle Parts Quarterly Sales"; 
-      
-        let series = chart.series;
-        let series0 = series.getItemAt(0);
-        let series1 = series.getItemAt(1);
-        let series2 = series.getItemAt(2);
-        let series3 = series.getItemAt(3);
+        We want each bubble to represent a single row.
+      */
 
-        // Set markers.
-        series0.markerStyle = "Dash";
-        series0.markerForegroundColor = "black";
-        series1.markerStyle = "Star";
-        series1.markerForegroundColor = "black";
-        series2.markerStyle = "X";
-        series2.markerSize = 12;
-        series3.markerStyle = "Triangle";
-        series3.markerBackgroundColor = "purple";
+      // Get the worksheet and table data.
+      const sheet = context.workbook.worksheets.getItem("Sample");
+      const table = sheet.tables.getItem("Sales");
+      const dataRange = table.getDataBodyRange();
 
-        await context.sync();
+      // Get the table data without the row names.
+      const valueRange = dataRange.getOffsetRange(0, 1).getResizedRange(0, -1);
+
+      // Create the chart.
+      const bubbleChart = sheet.charts.add(Excel.ChartType.bubble, valueRange);
+      bubbleChart.name = "Product Chart";
+
+      // Remove the default series, since we want a unique series for each row.
+      bubbleChart.series.getItemAt(0).delete();
+
+      // Load the data necessary to make a chart series.
+      dataRange.load(["rowCount", "values"]);
+      await context.sync();
+
+      // For each row, create a chart series (a bubble).
+      for (let i = 0; i < dataRange.rowCount; i++) {
+        const newSeries = bubbleChart.series.add(dataRange.values[i][0], i);
+        newSeries.setXAxisValues(dataRange.getCell(i, 1));
+        newSeries.setValues(dataRange.getCell(i, 2));
+        newSeries.setBubbleSizes(dataRange.getCell(i, 3));
+
+        // Show the product name and market share percentage.
+        newSeries.dataLabels.showSeriesName = true;
+        newSeries.dataLabels.showBubbleSize = true;
+        newSeries.dataLabels.showValue = false;
+      }
+
+      await context.sync();
+    });
+Excel.ChartSeries#getDimensionDataSourceString:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-source.yaml
+
+
+    // This function retrieves the data source information of a chart series in
+    the Sample worksheet.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem("Sample");
+
+      // Get the first chart series from the first chart on the worksheet.
+      const seriesCollection = sheet.charts.getItemAt(0).series;
+      const series = seriesCollection.getItemAt(0);
+
+      // Get the series data source string and type values. 
+      const dataSourceString = series.getDimensionDataSourceString("Values");
+      const dataSourceType = series.getDimensionDataSourceType("Values");
+
+      series.load("name");
+      await context.sync();
+      
+      // Log the data source information to the console.
+      console.log(series.name + " data source string: " + dataSourceString.value);
+      console.log(series.name + " data source type: " + dataSourceType.value);
+    });
+Excel.ChartSeries#getDimensionDataSourceType:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-source.yaml
+
+
+    // This function retrieves the data source information of a chart series in
+    the Sample worksheet.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem("Sample");
+
+      // Get the first chart series from the first chart on the worksheet.
+      const seriesCollection = sheet.charts.getItemAt(0).series;
+      const series = seriesCollection.getItemAt(0);
+
+      // Get the series data source string and type values. 
+      const dataSourceString = series.getDimensionDataSourceString("Values");
+      const dataSourceType = series.getDimensionDataSourceType("Values");
+
+      series.load("name");
+      await context.sync();
+      
+      // Log the data source information to the console.
+      console.log(series.name + " data source string: " + dataSourceString.value);
+      console.log(series.name + " data source type: " + dataSourceType.value);
+    });
+Excel.ChartSeries:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-leader-lines.yaml
+
+
+    // The following code adds data labels to the chart and positions them to
+    demonstrate leader lines.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem(sheetName);
+      const chart = sheet.charts.getItemAt(0);
+      const series = chart.series.getItemAt(0);
+      
+      // Enable data labels for the series. Leader lines are enabled by default.
+      series.hasDataLabels = true;
+      series.points.load("items");
+      await context.sync();
+      
+      // Load the top position for each data label.
+      series.points.items.forEach((point) => point.dataLabel.load("top"));
+      await context.sync();
+
+      // Move some data labels to create distance from their chart points.
+      const point1 = series.points.items[1]; 
+      const point2 = series.points.items[2]; 
+      point1.dataLabel.top -= 50; 
+      point2.dataLabel.top += 50;
+      
+      // Format the data labels.
+      series.dataLabels.geometricShapeType = Excel.GeometricShapeType.rectangle;
+      series.dataLabels.showCategoryName = true;
+      series.dataLabels.format.border.weight = 1;
+      
+      await context.sync();
+    });
+Excel.ChartSeries#hasDataLabels:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-leader-lines.yaml
+
+
+    // The following code adds data labels to the chart and positions them to
+    demonstrate leader lines.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem(sheetName);
+      const chart = sheet.charts.getItemAt(0);
+      const series = chart.series.getItemAt(0);
+      
+      // Enable data labels for the series. Leader lines are enabled by default.
+      series.hasDataLabels = true;
+      series.points.load("items");
+      await context.sync();
+      
+      // Load the top position for each data label.
+      series.points.items.forEach((point) => point.dataLabel.load("top"));
+      await context.sync();
+
+      // Move some data labels to create distance from their chart points.
+      const point1 = series.points.items[1]; 
+      const point2 = series.points.items[2]; 
+      point1.dataLabel.top -= 50; 
+      point2.dataLabel.top += 50;
+      
+      // Format the data labels.
+      series.dataLabels.geometricShapeType = Excel.GeometricShapeType.rectangle;
+      series.dataLabels.showCategoryName = true;
+      series.dataLabels.format.border.weight = 1;
+      
+      await context.sync();
+    });
+Excel.ChartSeries#points:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-leader-lines.yaml
+
+
+    // The following code adds data labels to the chart and positions them to
+    demonstrate leader lines.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem(sheetName);
+      const chart = sheet.charts.getItemAt(0);
+      const series = chart.series.getItemAt(0);
+      
+      // Enable data labels for the series. Leader lines are enabled by default.
+      series.hasDataLabels = true;
+      series.points.load("items");
+      await context.sync();
+      
+      // Load the top position for each data label.
+      series.points.items.forEach((point) => point.dataLabel.load("top"));
+      await context.sync();
+
+      // Move some data labels to create distance from their chart points.
+      const point1 = series.points.items[1]; 
+      const point2 = series.points.items[2]; 
+      point1.dataLabel.top -= 50; 
+      point2.dataLabel.top += 50;
+      
+      // Format the data labels.
+      series.dataLabels.geometricShapeType = Excel.GeometricShapeType.rectangle;
+      series.dataLabels.showCategoryName = true;
+      series.dataLabels.format.border.weight = 1;
+      
+      await context.sync();
+    });
+Excel.ChartSeries#showLeaderLines:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-leader-lines.yaml
+
+
+    // The following code disables leader lines for chart data labels.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem(sheetName);
+      const chart = sheet.charts.getItemAt(0);
+      const series = chart.series.getItemAt(0);
+      const dataLabels = series.dataLabels;
+      
+      // Disable leader lines.
+      dataLabels.showLeaderLines = false;
+      
+      await context.sync();
+    });
+Excel.ChartSeries#delete:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-series.yaml
+
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem("Sample");
+      const seriesCollection = sheet.charts.getItemAt(0).series;
+      seriesCollection.load("count");
+      await context.sync();
+
+      if (seriesCollection.count > 0) {
+        const series = seriesCollection.getItemAt(0);
+
+        // Delete the first series.
+        series.delete();
+      }
+
+      await context.sync();
+    });
+Excel.ChartSeries#setValues:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-series.yaml
+
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem("Sample");
+
+      let seriesCollection = sheet.charts.getItemAt(0);
+      let rangeSelection = sheet.getRange("C2:C7");
+      let xRangeSelection = sheet.getRange("A1:A7");
+
+      // Add a series.
+      let newSeries = seriesCollection.series.add("Qtr2");
+      newSeries.setValues(rangeSelection);
+      newSeries.setXAxisValues(xRangeSelection);
+
+      await context.sync();
     });
-'Excel.ChartSeries#markerForegroundColor:member':
+Excel.ChartSeries#markerBackgroundColor:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-series-markers.yaml
@@ -1365,7 +1877,7 @@
 
         await context.sync();
     });
-'Excel.ChartSeries#markerSize:member':
+Excel.ChartSeries#markerForegroundColor:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-series-markers.yaml
@@ -1398,7 +1910,7 @@
 
         await context.sync();
     });
-'Excel.ChartSeries#markerStyle:member':
+Excel.ChartSeries#markerSize:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-series-markers.yaml
@@ -1431,90 +1943,53 @@
 
         await context.sync();
     });
-'Excel.ChartSeries#setBubbleSizes:member(1)':
+Excel.ChartSeries#markerStyle:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-bubble-chart.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-series-markers.yaml
 
 
     await Excel.run(async (context) => {
-      /*
-        The table is expected to look like this:
-        Product, Inventory, Price, Current Market Share
-        Calamansi, 2000, $2.45, 10%
-        ...
-
-        We want each bubble to represent a single row.
-      */
-
-      // Get the worksheet and table data.
-      const sheet = context.workbook.worksheets.getItem("Sample");
-      const table = sheet.tables.getItem("Sales");
-      const dataRange = table.getDataBodyRange();
-
-      // Get the table data without the row names.
-      const valueRange = dataRange.getOffsetRange(0, 1).getResizedRange(0, -1);
-
-      // Create the chart.
-      const bubbleChart = sheet.charts.add(Excel.ChartType.bubble, valueRange);
-      bubbleChart.name = "Product Chart";
-
-      // Remove the default series, since we want a unique series for each row.
-      bubbleChart.series.getItemAt(0).delete();
-
-      // Load the data necessary to make a chart series.
-      dataRange.load(["rowCount", "values"]);
-      await context.sync();
+        let sheet = context.workbook.worksheets.getItem("Sample");
+        let salesTable = sheet.tables.getItem("SalesTable");
+        let dataRange = sheet.getRange("A1:E7");
 
-      // For each row, create a chart series (a bubble).
-      for (let i = 0; i < dataRange.rowCount; i++) {
-        const newSeries = bubbleChart.series.add(dataRange.values[i][0], i);
-        newSeries.setXAxisValues(dataRange.getCell(i, 1));
-        newSeries.setValues(dataRange.getCell(i, 2));
-        newSeries.setBubbleSizes(dataRange.getCell(i, 3));
+        // Create an XY scatter chart.
+        let chart = sheet.charts.add("XYScatterSmooth", dataRange, "Auto");
+        chart.title.text = "Bicycle Parts Quarterly Sales"; 
+      
+        let series = chart.series;
+        let series0 = series.getItemAt(0);
+        let series1 = series.getItemAt(1);
+        let series2 = series.getItemAt(2);
+        let series3 = series.getItemAt(3);
 
-        // Show the product name and market share percentage.
-        newSeries.dataLabels.showSeriesName = true;
-        newSeries.dataLabels.showBubbleSize = true;
-        newSeries.dataLabels.showValue = false;
-      }
+        // Set markers.
+        series0.markerStyle = "Dash";
+        series0.markerForegroundColor = "black";
+        series1.markerStyle = "Star";
+        series1.markerForegroundColor = "black";
+        series2.markerStyle = "X";
+        series2.markerSize = 12;
+        series3.markerStyle = "Triangle";
+        series3.markerBackgroundColor = "purple";
 
-      await context.sync();
+        await context.sync();
     });
-'Excel.ChartSeries#setValues:member(1)':
+Excel.ChartSeriesBy:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-series.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-source.yaml
 
 
     await Excel.run(async (context) => {
-      const sheet = context.workbook.worksheets.getItem("Sample");
-
-      let seriesCollection = sheet.charts.getItemAt(0);
-      let rangeSelection = sheet.getRange("C2:C7");
-      let xRangeSelection = sheet.getRange("A1:A7");
-
-      // Add a series.
-      let newSeries = seriesCollection.series.add("Qtr2");
-      newSeries.setValues(rangeSelection);
-      newSeries.setXAxisValues(xRangeSelection);
-
-      await context.sync();
-    });
-'Excel.ChartSeriesBy:enum':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-source.yaml
-
-
-    await Excel.run(async (context) => {
-      // Create a new worksheet called "Sample" and activate it.
-      context.workbook.worksheets.getItemOrNullObject("Sample").delete();
-      const sheet = context.workbook.worksheets.add("Sample");
-      
-      // Create an a table named SalesTable on the Sample worksheet.
-      let expensesTable = sheet.tables.add("A1:E1", true);
-      expensesTable.name = "SalesTable";
+      // Create a new worksheet called "Sample" and activate it.
+      context.workbook.worksheets.getItemOrNullObject("Sample").delete();
+      const sheet = context.workbook.worksheets.add("Sample");
+      
+      // Create an a table named SalesTable on the Sample worksheet.
+      let expensesTable = sheet.tables.add("A1:E1", true);
+      expensesTable.name = "SalesTable";
 
       expensesTable.getHeaderRowRange().values = [["Product", "Qtr1", "Qtr2", "Qtr3", "Qtr4"]];        
       expensesTable.rows.add(null, [
@@ -1541,7 +2016,7 @@
 
       await context.sync();
     });
-'Excel.ChartSeriesDimension:enum':
+Excel.ChartSeriesDimension:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-bubble-chart.yaml
@@ -1567,7 +2042,7 @@
       // Log the information.
       console.log(`Series ${category.value} - X:${xValues.value},Y:${yValues.value},Bubble:${bubbleSize.value}`);
     });
-'Excel.ChartTitle#getSubstring:member(1)':
+Excel.ChartTitle#getSubstring:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-title-format.yaml
@@ -1581,7 +2056,7 @@
         chart.title.getSubstring(0, 7).font.color = "Yellow";
         await context.sync();
     });
-'Excel.ChartTitle#textOrientation:member':
+Excel.ChartTitle#textOrientation:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-title-format.yaml
@@ -1594,7 +2069,7 @@
 
         await context.sync();
     });
-'Excel.ChartTrendline#type:member':
+Excel.ChartTrendline#type:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-trendlines.yaml
@@ -1613,7 +2088,7 @@
 
         console.log("The trendline type is:" + trendline.type);  
     });
-'Excel.ChartTrendlineCollection#add:member(1)':
+Excel.ChartTrendlineCollection#add:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-trendlines.yaml
@@ -1629,7 +2104,7 @@
 
         await context.sync();
     });
-'Excel.ChartTrendlineFormat#line:member':
+Excel.ChartTrendlineFormat#line:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-trendlines.yaml
@@ -1649,7 +2124,7 @@
 
         console.log("The trendline color has been set to:" + line.color);
     });
-'Excel.ChartType:enum':
+Excel.ChartType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-create-several-charts.yaml
@@ -1671,7 +2146,27 @@
 
       await context.sync();
     });
-'Excel.ClearApplyTo:enum':
+Excel.CheckboxCellControl:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-cell-control.yaml
+
+
+    // Add checkboxes to the table.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getActiveWorksheet();
+
+      // Get the second column in the table, without the header.
+      const range = sheet.tables.getItem("FruitTable").columns.getItem("Analysis").getDataBodyRange();
+
+      // Change the boolean values to checkboxes.
+      range.control = {
+        type: Excel.CellControlType.checkbox
+      };
+      await context.sync();
+    });
+Excel.ClearApplyTo:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-hyperlink.yaml
@@ -1700,7 +2195,7 @@
 
         await context.sync();
     });
-'Excel.CloseBehavior:enum':
+Excel.CloseBehavior:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-save-and-close.yaml
@@ -1709,7 +2204,7 @@
     await Excel.run(async (context) => {
         context.workbook.close(Excel.CloseBehavior.skipSave);
     });
-'Excel.ColorScaleConditionalFormat#criteria:member':
+Excel.ColorScaleConditionalFormat#criteria:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -1729,10 +2224,10 @@
 
         await context.sync();
     });
-'Excel.Comment#content:member':
+Excel.Comment#content:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-basics.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-basics.yaml
 
 
     await Excel.run(async (context) => {
@@ -1741,20 +2236,20 @@
         comment.content = "PLEASE add headers here.";
         await context.sync();
     });
-'Excel.Comment#delete:member(1)':
+Excel.Comment#delete:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-basics.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-basics.yaml
 
 
     await Excel.run(async (context) => {
         context.workbook.comments.getItemByCell("Comments!A2").delete();
         await context.sync();
     });
-'Excel.Comment#load:member(2)':
+Excel.Comment#load:member(2):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-basics.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-basics.yaml
 
 
     await Excel.run(async (context) => {
@@ -1765,10 +2260,10 @@
         console.log(`${comment.creationDate.toDateString()}: ${comment.authorName} (${comment.authorEmail})`);
         await context.sync();
     });
-'Excel.Comment#resolved:member':
+Excel.Comment#resolved:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-resolution.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-resolution.yaml
 
 
     await Excel.run(async (context) => {
@@ -1776,10 +2271,10 @@
         sheet.comments.getItemAt(0).resolved = true;
         await context.sync();
     });
-'Excel.CommentCollection#add:member(1)':
+Excel.CommentCollection#add:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-basics.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-basics.yaml
 
 
     await Excel.run(async (context) => {
@@ -1789,7 +2284,7 @@
         sheet.comments.add("A2", "TODO: add data.");
         await context.sync();
     });
-'Excel.CommentCollection#onAdded:member':
+Excel.CommentCollection#onAdded:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-comment-event-handler.yaml
@@ -1831,7 +2326,7 @@
             console.log(`    Creation date:${addedComment.creationDate}`);
         });
     }
-'Excel.CommentCollection#onChanged:member':
+Excel.CommentCollection#onChanged:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-comment-event-handler.yaml
@@ -1873,7 +2368,7 @@
             console.log(`    Creation date: ${changedComment.creationDate}`);
         });
     }
-'Excel.CommentCollection#onDeleted:member':
+Excel.CommentCollection#onDeleted:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-comment-event-handler.yaml
@@ -1904,10 +2399,10 @@
             console.log(`    ID: ${event.commentDetails[0].commentId}`);
         });
     }
-'Excel.CommentReply#content:member':
+Excel.CommentReply#content:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-replies.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-replies.yaml
 
 
     await Excel.run(async (context) => {
@@ -1922,10 +2417,10 @@
         reply.content += " Please!";
         await context.sync();
     });
-'Excel.CommentReply#delete:member(1)':
+Excel.CommentReply#delete:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-replies.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-replies.yaml
 
 
     await Excel.run(async (context) => {
@@ -1935,10 +2430,10 @@
         comment.replies.getItemAt(0).delete();
         await context.sync();
     });
-'Excel.CommentReplyCollection#add:member(1)':
+Excel.CommentReplyCollection#add:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-replies.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-replies.yaml
 
 
     await Excel.run(async (context) => {
@@ -1948,10 +2443,10 @@
         comment.replies.add("Add content to this worksheet.");
         await context.sync();
     });
-'Excel.CommentRichContent#mentions:member':
+Excel.CommentRichContent#mentions:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-mentions.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-mentions.yaml
 
 
     await Excel.run(async (context) => {
@@ -1973,7 +2468,7 @@
         sheet.comments.add("A1", commentBody, Excel.ContentType.mention);
         await context.sync();
     });
-'Excel.ConditionalCellValueRule#formula1:member':
+Excel.ConditionalCellValueRule#formula1:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -1989,7 +2484,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalCellValueRule#operator:member':
+Excel.ConditionalCellValueRule#operator:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2005,7 +2500,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalDataBarDirection:enum':
+Excel.ConditionalDataBarDirection:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2020,7 +2515,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalFormat#cellValue:member':
+Excel.ConditionalFormat#cellValue:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2036,7 +2531,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalFormat#colorScale:member':
+Excel.ConditionalFormat#colorScale:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2056,7 +2551,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalFormat#custom:member':
+Excel.ConditionalFormat#custom:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2071,7 +2566,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalFormat#dataBar:member':
+Excel.ConditionalFormat#dataBar:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2086,7 +2581,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalFormat#getRange:member(1)':
+Excel.ConditionalFormat#getRange:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2117,7 +2612,7 @@
             console.log("No conditional formats applied.");
         }
     });
-'Excel.ConditionalFormat#iconSet:member':
+Excel.ConditionalFormat#iconSet:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2161,7 +2656,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalFormat#preset:member':
+Excel.ConditionalFormat#preset:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2177,7 +2672,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalFormat#textComparison:member':
+Excel.ConditionalFormat#textComparison:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2193,7 +2688,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalFormat#type:member':
+Excel.ConditionalFormat#type:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2224,7 +2719,7 @@
             console.log("No conditional formats applied.");
         }
     });
-'Excel.ConditionalFormatCollection#add:member(1)':
+Excel.ConditionalFormatCollection#add:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2244,7 +2739,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalFormatCollection#clearAll:member(1)':
+Excel.ConditionalFormatCollection#clearAll:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2257,9 +2752,11 @@
 
         await context.sync();
 
-        $(".conditional-formats").hide();
+        document.querySelectorAll(".conditional-formats").forEach(element => {
+            element.style.display = "none";
+        });
     });
-'Excel.ConditionalFormatCollection#getItemAt:member(1)':
+Excel.ConditionalFormatCollection#getItemAt:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2290,7 +2787,7 @@
             console.log("No conditional formats applied.");
         }
     });
-'Excel.ConditionalFormatColorCriterionType:enum':
+Excel.ConditionalFormatColorCriterionType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2310,7 +2807,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalFormatIconRuleType:enum':
+Excel.ConditionalFormatIconRuleType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2354,7 +2851,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalFormatPresetCriterion:enum':
+Excel.ConditionalFormatPresetCriterion:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-advanced.yaml
@@ -2393,7 +2890,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalFormatRule#formula:member':
+Excel.ConditionalFormatRule#formula:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2408,7 +2905,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalFormatType:enum':
+Excel.ConditionalFormatType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-advanced.yaml
@@ -2447,7 +2944,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalIconCriterion#formula:member':
+Excel.ConditionalIconCriterion#formula:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2491,7 +2988,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalIconCriterion#operator:member':
+Excel.ConditionalIconCriterion#operator:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2535,7 +3032,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalIconCriterion#type:member':
+Excel.ConditionalIconCriterion#type:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2579,7 +3076,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalIconCriterionOperator:enum':
+Excel.ConditionalIconCriterionOperator:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2623,7 +3120,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalPresetCriteriaRule#criterion:member':
+Excel.ConditionalPresetCriteriaRule#criterion:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2639,7 +3136,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalTextComparisonRule#text:member':
+Excel.ConditionalTextComparisonRule#text:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2655,7 +3152,7 @@
 
         await context.sync();
     });
-'Excel.ConditionalTextOperator:enum':
+Excel.ConditionalTextOperator:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2671,7 +3168,7 @@
 
         await context.sync();
     });
-'Excel.ConnectorType:enum':
+Excel.ConnectorType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-lines.yaml
@@ -2683,10 +3180,10 @@
         line.name = "StraightLine";
         await context.sync();
     });
-'Excel.ContentType:enum':
+Excel.ContentType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-mentions.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-mentions.yaml
 
 
     await Excel.run(async (context) => {
@@ -2708,7 +3205,7 @@
         sheet.comments.add("A1", commentBody, Excel.ContentType.mention);
         await context.sync();
     });
-'Excel.CultureInfo#datetimeFormat:member':
+Excel.CultureInfo#datetimeFormat:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/culture-info-date-time.yaml
@@ -2749,7 +3246,7 @@
 
       await context.sync();
     });
-'Excel.CustomConditionalFormat#format:member':
+Excel.CustomConditionalFormat#format:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -2764,7 +3261,7 @@
 
         await context.sync();
     });
-'Excel.CustomPropertyCollection#add:member(1)':
+Excel.CustomPropertyCollection#add:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/26-document/custom-properties.yaml
@@ -2772,8 +3269,8 @@
 
     await Excel.run(async (context) => {
       // Get the key/value pair from the task pane.
-      const userKey = $("#key").text();
-      const userValue = $("#value").text();
+      const userKey = document.getElementById("key").textContent;
+      const userValue = document.getElementById("value").textContent;
 
       // Add the custom property.
       const customDocProperties = context.workbook.properties.custom;
@@ -2783,7 +3280,7 @@
 
       console.log(`Successfully set custom document property ${userKey}:${userValue}.`);
     });
-'Excel.CustomXmlPart#delete:member(1)':
+Excel.CustomXmlPart#delete:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml
@@ -2803,20 +3300,20 @@
             await context.sync();
 
             if (customXmlPart.isNullObject) {
-                $("#display-xml").text(`The XML part with the id ${xmlPartIDSetting.value} has been deleted.`);
+                document.getElementById("display-xml").textContent = `The XML part with the id ${xmlPartIDSetting.value} has been deleted.`;
 
                 // Delete the unneeded setting too.
                 xmlPartIDSetting.delete();            
             } else {
                 const readableXml = addLineBreaksToXML(xmlBlob.value);
                 const strangeMessage = `This is strange. The XML part with the id ${xmlPartIDSetting.value} has not been deleted:\n${readableXml}`
-                $("#display-xml").text(strangeMessage);
+                document.getElementById("display-xml").textContent = strangeMessage;
             }
 
             await context.sync();
         }
     });
-'Excel.CustomXmlPart#getXml:member(1)':
+Excel.CustomXmlPart#getXml:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml
@@ -2833,7 +3330,7 @@
         await context.sync();
 
         const readableXml = addLineBreaksToXML(xmlBlob.value);
-        $("#display-xml").text(readableXml);
+        document.getElementById("display-xml").textContent = readableXml;
 
         // Store the XML part's ID in a setting.
         const settings = context.workbook.settings;
@@ -2841,7 +3338,7 @@
 
         await context.sync();
     });
-'Excel.CustomXmlPart#id:member':
+Excel.CustomXmlPart#id:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml
@@ -2858,7 +3355,7 @@
         await context.sync();
 
         const readableXml = addLineBreaksToXML(xmlBlob.value);
-        $("#display-xml").text(readableXml);
+        document.getElementById("display-xml").textContent = readableXml;
 
         // Store the XML part's ID in a setting.
         const settings = context.workbook.settings;
@@ -2866,7 +3363,7 @@
 
         await context.sync();
     });
-'Excel.CustomXmlPart#setXml:member(1)':
+Excel.CustomXmlPart#setXml:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml
@@ -2887,11 +3384,11 @@
             await context.sync();
 
             const readableXml = addLineBreaksToXML(xmlBlob.value);
-            $("#display-xml").text(readableXml);
+            document.getElementById("display-xml").textContent = readableXml;
             await context.sync();
         }
     });
-'Excel.CustomXmlPartCollection#add:member(1)':
+Excel.CustomXmlPartCollection#add:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml
@@ -2908,7 +3405,7 @@
         await context.sync();
 
         const readableXml = addLineBreaksToXML(xmlBlob.value);
-        $("#display-xml").text(readableXml);
+        document.getElementById("display-xml").textContent = readableXml;
 
         // Store the XML part's ID in a setting.
         const settings = context.workbook.settings;
@@ -2916,40 +3413,7 @@
 
         await context.sync();
     });
-'Excel.CustomXmlPartCollection#getByNamespace:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml
-
-
-    await Excel.run(async (context) => {
-        $("#display-xml").text("");
-        const contosoNamespace = "http://schemas.contoso.com/review/1.0";
-        const customXmlParts = context.workbook.customXmlParts;
-        const filteredXmlParts = customXmlParts.getByNamespace(contosoNamespace);
-        const numberOfPartsInNamespace = filteredXmlParts.getCount();
-
-        await context.sync();
-
-        if (numberOfPartsInNamespace.value == 1) {
-            const onlyXmlPartInNamespace = filteredXmlParts.getOnlyItem();
-            const xmlBlob = onlyXmlPartInNamespace.getXml();
-
-            await context.sync();
-
-            // Make it a bit more readable.
-            const readableXml = xmlBlob.value.replace(/></g, ">\n<");
-
-            $("#display-xml").text(`The only XML part in the namespace ${contosoNamespace} is:
-                ${readableXml}`);
-
-        } else {
-            console.log(`There are ${numberOfPartsInNamespace.value} XML parts with namespace ${contosoNamespace}. There should be exactly 1.`);
-        }        
-
-        await context.sync();
-    });
-'Excel.CustomXmlPartCollection#getItem:member(1)':
+Excel.CustomXmlPartCollection#getItem:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml
@@ -2970,18 +3434,18 @@
             await context.sync();
 
             const readableXml = addLineBreaksToXML(xmlBlob.value);
-            $("#display-xml").text(readableXml);
+            document.getElementById("display-xml").textContent = readableXml;
             await context.sync();
         }
     });
-'Excel.CustomXmlPartScopedCollection#getCount:member(1)':
+Excel.CustomXmlPartCollection#getByNamespace:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml
 
 
     await Excel.run(async (context) => {
-        $("#display-xml").text("");
+        document.getElementById("display-xml").textContent = "";
         const contosoNamespace = "http://schemas.contoso.com/review/1.0";
         const customXmlParts = context.workbook.customXmlParts;
         const filteredXmlParts = customXmlParts.getByNamespace(contosoNamespace);
@@ -2998,8 +3462,8 @@
             // Make it a bit more readable.
             const readableXml = xmlBlob.value.replace(/></g, ">\n<");
 
-            $("#display-xml").text(`The only XML part in the namespace ${contosoNamespace} is:
-                ${readableXml}`);
+            document.getElementById("display-xml").textContent = `The only XML part in the namespace ${contosoNamespace} is:
+                ${readableXml}`;
 
         } else {
             console.log(`There are ${numberOfPartsInNamespace.value} XML parts with namespace ${contosoNamespace}. There should be exactly 1.`);
@@ -3007,7 +3471,7 @@
 
         await context.sync();
     });
-'Excel.CustomXmlPartScopedCollection#getItemOrNullObject:member(1)':
+Excel.CustomXmlPartScopedCollection#getItemOrNullObject:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml
@@ -3027,27 +3491,27 @@
             await context.sync();
 
             if (customXmlPart.isNullObject) {
-                $("#display-xml").text(`The XML part with the id ${xmlPartIDSetting.value} has been deleted.`);
+                document.getElementById("display-xml").textContent = `The XML part with the id ${xmlPartIDSetting.value} has been deleted.`;
 
                 // Delete the unneeded setting too.
                 xmlPartIDSetting.delete();            
             } else {
                 const readableXml = addLineBreaksToXML(xmlBlob.value);
                 const strangeMessage = `This is strange. The XML part with the id ${xmlPartIDSetting.value} has not been deleted:\n${readableXml}`
-                $("#display-xml").text(strangeMessage);
+                document.getElementById("display-xml").textContent = strangeMessage;
             }
 
             await context.sync();
         }
     });
-'Excel.CustomXmlPartScopedCollection#getOnlyItem:member(1)':
+Excel.CustomXmlPartScopedCollection#getCount:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml
 
 
     await Excel.run(async (context) => {
-        $("#display-xml").text("");
+        document.getElementById("display-xml").textContent = "";
         const contosoNamespace = "http://schemas.contoso.com/review/1.0";
         const customXmlParts = context.workbook.customXmlParts;
         const filteredXmlParts = customXmlParts.getByNamespace(contosoNamespace);
@@ -3064,8 +3528,8 @@
             // Make it a bit more readable.
             const readableXml = xmlBlob.value.replace(/></g, ">\n<");
 
-            $("#display-xml").text(`The only XML part in the namespace ${contosoNamespace} is:
-                ${readableXml}`);
+            document.getElementById("display-xml").textContent = `The only XML part in the namespace ${contosoNamespace} is:
+                ${readableXml}`;
 
         } else {
             console.log(`There are ${numberOfPartsInNamespace.value} XML parts with namespace ${contosoNamespace}. There should be exactly 1.`);
@@ -3073,37 +3537,55 @@
 
         await context.sync();
     });
-'Excel.DataBarConditionalFormat#barDirection:member':
+Excel.CustomXmlPartScopedCollection#getOnlyItem:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Sample");
-        const range = sheet.getRange("B8:E13");
-        const conditionalFormat = range.conditionalFormats
-            .add(Excel.ConditionalFormatType.dataBar);
-        conditionalFormat.dataBar.barDirection = Excel.ConditionalDataBarDirection.leftToRight;
+        document.getElementById("display-xml").textContent = "";
+        const contosoNamespace = "http://schemas.contoso.com/review/1.0";
+        const customXmlParts = context.workbook.customXmlParts;
+        const filteredXmlParts = customXmlParts.getByNamespace(contosoNamespace);
+        const numberOfPartsInNamespace = filteredXmlParts.getCount();
+
+        await context.sync();
+
+        if (numberOfPartsInNamespace.value == 1) {
+            const onlyXmlPartInNamespace = filteredXmlParts.getOnlyItem();
+            const xmlBlob = onlyXmlPartInNamespace.getXml();
+
+            await context.sync();
+
+            // Make it a bit more readable.
+            const readableXml = xmlBlob.value.replace(/></g, ">\n<");
+
+            document.getElementById("display-xml").textContent = `The only XML part in the namespace ${contosoNamespace} is:
+                ${readableXml}`;
+
+        } else {
+            console.log(`There are ${numberOfPartsInNamespace.value} XML parts with namespace ${contosoNamespace}. There should be exactly 1.`);
+        }        
 
         await context.sync();
     });
-'Excel.DataPivotHierarchy#name:member':
+Excel.DataBarConditionalFormat#barDirection:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-create-and-modify.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
 
 
     await Excel.run(async (context) => {
-        const dataHierarchies = context.workbook.worksheets.getActiveWorksheet().pivotTables.getItem("Farm Sales").dataHierarchies
-        dataHierarchies.load("no-properties-needed");
-        await context.sync();
+        const sheet = context.workbook.worksheets.getItem("Sample");
+        const range = sheet.getRange("B8:E13");
+        const conditionalFormat = range.conditionalFormats
+            .add(Excel.ConditionalFormatType.dataBar);
+        conditionalFormat.dataBar.barDirection = Excel.ConditionalDataBarDirection.leftToRight;
 
-        dataHierarchies.items[0].name = "Farm Sales";
-        dataHierarchies.items[1].name = "Wholesale";
         await context.sync();
     });
-'Excel.DataPivotHierarchy#showAs:member':
+Excel.DataPivotHierarchy#showAs:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-calculations.yaml
@@ -3130,7 +3612,59 @@
         wholesaleDataHierarchy.showAs = wholesaleShowAs;
         await context.sync();
     });
-'Excel.DataValidation#errorAlert:member':
+Excel.DataPivotHierarchy#name:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-create-and-modify.yaml
+
+
+    await Excel.run(async (context) => {
+        const dataHierarchies = context.workbook.worksheets.getActiveWorksheet().pivotTables.getItem("Farm Sales").dataHierarchies
+        dataHierarchies.load("no-properties-needed");
+        await context.sync();
+
+        dataHierarchies.items[0].name = "Farm Sales";
+        dataHierarchies.items[1].name = "Wholesale";
+        await context.sync();
+    });
+Excel.DataValidationErrorAlert:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/22-data-validation/data-validation.yaml
+
+
+    await Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getItem("Decision");
+        const rankingRange = sheet.tables.getItem("NameOptionsTable").columns.getItem("Ranking").getDataBodyRange();
+
+        // When you are developing, it is a good practice to
+        // clear the dataValidation object with each run of your code.
+        rankingRange.dataValidation.clear();
+
+        let greaterThanZeroRule = {
+            wholeNumber: {
+                formula1: 0,
+                operator: Excel.DataValidationOperator.greaterThan
+            }
+        };
+        rankingRange.dataValidation.rule = greaterThanZeroRule;
+
+        rankingRange.dataValidation.prompt = {
+            message: "Please enter a positive number.",
+            showPrompt: true,
+            title: "Positive numbers only."
+        };
+
+        rankingRange.dataValidation.errorAlert = {
+            message: "Sorry, only positive numbers are allowed",
+            showAlert: true,
+            style: "Stop",
+            title: "Negative Number Entered"
+        };
+
+        await context.sync();
+    });
+Excel.DataValidation#errorAlert:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/22-data-validation/data-validation.yaml
@@ -3163,7 +3697,7 @@
 
         await context.sync();
     });
-'Excel.DataValidation#prompt:member':
+Excel.DataValidation#prompt:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/22-data-validation/data-validation.yaml
@@ -3200,7 +3734,7 @@
 
         await context.sync();
     });
-'Excel.DataValidation#rule:member':
+Excel.DataValidation#rule:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/22-data-validation/data-validation.yaml
@@ -3227,7 +3761,7 @@
 
         await context.sync();
     });
-'Excel.DataValidationOperator:enum':
+Excel.DataValidationOperator:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/22-data-validation/data-validation.yaml
@@ -3264,7 +3798,7 @@
 
         await context.sync();
     });
-'Excel.DataValidationRule#list:member':
+Excel.DataValidationRule#list:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/22-data-validation/data-validation.yaml
@@ -3291,7 +3825,7 @@
 
         await context.sync();
     });
-'Excel.DataValidationRule#wholeNumber:member':
+Excel.DataValidationRule#wholeNumber:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/22-data-validation/data-validation.yaml
@@ -3328,7 +3862,7 @@
 
         await context.sync();
     });
-'Excel.DateFilterCondition:enum':
+Excel.DateFilterCondition:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotfilters.yaml
@@ -3361,7 +3895,7 @@
 
       await context.sync();
     });
-'Excel.DeleteShiftDirection:enum':
+Excel.DeleteShiftDirection:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-worksheet.yaml
@@ -3375,7 +3909,7 @@
         const range = sheet.getRange("A5:F5");
         range.delete(Excel.DeleteShiftDirection.up);
     });
-'Excel.DocumentProperties#custom:member':
+Excel.DocumentProperties#custom:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/26-document/custom-properties.yaml
@@ -3393,7 +3927,62 @@
         console.log(`${property.key}:${property.value}`);
       });
     });
-'Excel.DynamicFilterCriteria:enum':
+Excel.DoubleCellValue#numberFormat:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-formatted-number.yaml
+
+
+    // This function creates a double data type,
+
+    // and sets the format of this data type as a currency.
+
+    await Excel.run(async (context) => {
+      // Get the Sample worksheet and a range on that sheet.
+      const sheet = context.workbook.worksheets.getItemOrNullObject("Sample");
+      const currencyRange = sheet.getRange("A2");
+
+      // Write a number formatted as currency to cell A2.
+      currencyRange.valuesAsJson = [
+        [
+          {
+            type: Excel.CellValueType.double,
+            basicValue: 12.34,
+            numberFormat: "$* #,##0.00"
+          }
+        ]
+      ];
+
+      await context.sync();
+    });
+Excel.DoubleCellValue#type:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-formatted-number.yaml
+
+
+    // This function creates a double data type,
+
+    // and sets the format of this data type as a date.
+
+    await Excel.run(async (context) => {
+      // Get the Sample worksheet and a range on that sheet.
+      const sheet = context.workbook.worksheets.getItemOrNullObject("Sample");
+      const dateRange = sheet.getRange("A1");
+
+      // Write a number formatted as a date to cell A1.
+      dateRange.valuesAsJson = [
+        [
+          {
+            type: Excel.CellValueType.double,
+            basicValue: 32889.0,
+            numberFormat: "m/d/yyyy"
+          }
+        ]
+      ];
+      await context.sync();
+    });
+Excel.DynamicFilterCriteria:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/46-table/filter-data.yaml
@@ -3418,7 +4007,65 @@
 
         await context.sync();
        });
-'Excel.EntityCompactLayoutIcons:enum':
+Excel.EntityCardLayout:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-entity-attribution.yaml
+
+
+    function makeProductEntity(productID: number, productName: string, product?:
+    any) {
+      const entity: Excel.EntityCellValue = {
+        type: Excel.CellValueType.entity,
+        text: productName,
+        properties: { /* Excel.EntityPropertyType */
+          "Product ID": {
+            type: Excel.CellValueType.string,
+            basicValue: productID.toString() || ""
+          },
+          "Product Name": {
+            type: Excel.CellValueType.string,
+            basicValue: productName || ""
+          },
+          "Quantity Per Unit": {
+            type: Excel.CellValueType.string,
+            basicValue: product.quantityPerUnit || ""
+          },
+          // Add Unit Price as a formatted number.
+          "Unit Price": {
+            type: Excel.CellValueType.formattedNumber,
+            basicValue: product.unitPrice,
+            numberFormat: "$* #,##0.00"
+          }
+        },
+        layouts: { /* Excel.EntityViewLayouts */
+          card: { /* Excel.EntityCardLayout */
+            title: { property: "Product Name" },
+            sections: [ /* Excel.CardLayoutSection */
+              {
+                layout: "List",
+                properties: ["Product ID"]
+              },
+              {
+                layout: "List",
+                title: "Quantity and price",
+                collapsible: true,
+                collapsed: false,
+                properties: ["Quantity Per Unit", "Unit Price"]
+              }
+            ]
+          }
+        },
+        provider: {
+          description: product.providerName, // Name of the data provider. Displays as a tooltip when hovering over the logo. Also displays as a fallback if the source address for the image is broken.
+          logoSourceAddress: product.sourceAddress, // Source URL of the logo to display.
+          logoTargetAddress: product.targetAddress // Destination URL that the logo navigates to when clicked.
+        }
+      };
+
+      return entity;
+    }
+Excel.EntityCompactLayoutIcons:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-entity-icons.yaml
@@ -3447,7 +4094,123 @@
       });
       return entities;
     }
-'Excel.ErrorCellValue:type':
+Excel.EntityPropertyType:type:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-entity-attribution.yaml
+
+
+    function makeProductEntity(productID: number, productName: string, product?:
+    any) {
+      const entity: Excel.EntityCellValue = {
+        type: Excel.CellValueType.entity,
+        text: productName,
+        properties: { /* Excel.EntityPropertyType */
+          "Product ID": {
+            type: Excel.CellValueType.string,
+            basicValue: productID.toString() || ""
+          },
+          "Product Name": {
+            type: Excel.CellValueType.string,
+            basicValue: productName || ""
+          },
+          "Quantity Per Unit": {
+            type: Excel.CellValueType.string,
+            basicValue: product.quantityPerUnit || ""
+          },
+          // Add Unit Price as a formatted number.
+          "Unit Price": {
+            type: Excel.CellValueType.formattedNumber,
+            basicValue: product.unitPrice,
+            numberFormat: "$* #,##0.00"
+          }
+        },
+        layouts: { /* Excel.EntityViewLayouts */
+          card: { /* Excel.EntityCardLayout */
+            title: { property: "Product Name" },
+            sections: [ /* Excel.CardLayoutSection */
+              {
+                layout: "List",
+                properties: ["Product ID"]
+              },
+              {
+                layout: "List",
+                title: "Quantity and price",
+                collapsible: true,
+                collapsed: false,
+                properties: ["Quantity Per Unit", "Unit Price"]
+              }
+            ]
+          }
+        },
+        provider: {
+          description: product.providerName, // Name of the data provider. Displays as a tooltip when hovering over the logo. Also displays as a fallback if the source address for the image is broken.
+          logoSourceAddress: product.sourceAddress, // Source URL of the logo to display.
+          logoTargetAddress: product.targetAddress // Destination URL that the logo navigates to when clicked.
+        }
+      };
+
+      return entity;
+    }
+Excel.EntityViewLayouts:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-entity-attribution.yaml
+
+
+    function makeProductEntity(productID: number, productName: string, product?:
+    any) {
+      const entity: Excel.EntityCellValue = {
+        type: Excel.CellValueType.entity,
+        text: productName,
+        properties: { /* Excel.EntityPropertyType */
+          "Product ID": {
+            type: Excel.CellValueType.string,
+            basicValue: productID.toString() || ""
+          },
+          "Product Name": {
+            type: Excel.CellValueType.string,
+            basicValue: productName || ""
+          },
+          "Quantity Per Unit": {
+            type: Excel.CellValueType.string,
+            basicValue: product.quantityPerUnit || ""
+          },
+          // Add Unit Price as a formatted number.
+          "Unit Price": {
+            type: Excel.CellValueType.formattedNumber,
+            basicValue: product.unitPrice,
+            numberFormat: "$* #,##0.00"
+          }
+        },
+        layouts: { /* Excel.EntityViewLayouts */
+          card: { /* Excel.EntityCardLayout */
+            title: { property: "Product Name" },
+            sections: [ /* Excel.CardLayoutSection */
+              {
+                layout: "List",
+                properties: ["Product ID"]
+              },
+              {
+                layout: "List",
+                title: "Quantity and price",
+                collapsible: true,
+                collapsed: false,
+                properties: ["Quantity Per Unit", "Unit Price"]
+              }
+            ]
+          }
+        },
+        provider: {
+          description: product.providerName, // Name of the data provider. Displays as a tooltip when hovering over the logo. Also displays as a fallback if the source address for the image is broken.
+          logoSourceAddress: product.sourceAddress, // Source URL of the logo to display.
+          logoTargetAddress: product.targetAddress // Destination URL that the logo navigates to when clicked.
+        }
+      };
+
+      return entity;
+    }
+Excel.ErrorCellValue:type:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-error-values.yaml
@@ -3471,7 +4234,7 @@
       range.valuesAsJson = [[error]];
       await context.sync();
     });
-'Excel.ErrorCellValueType:enum':
+Excel.ErrorCellValueType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-error-values.yaml
@@ -3495,7 +4258,7 @@
       range.valuesAsJson = [[error]];
       await context.sync();
     });
-'Excel.FillPattern:enum':
+Excel.FillPattern:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/cell-properties.yaml
@@ -3572,7 +4335,7 @@
         sheet.getUsedRange().format.autofitColumns();
         await context.sync();
     });
-'Excel.FilterCriteria#filterOn:member':
+Excel.FilterCriteria#filterOn:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-auto-filter.yaml
@@ -3595,7 +4358,7 @@
 
         await context.sync();
     });
-'Excel.FilterDatetimeSpecificity:enum':
+Excel.FilterDatetimeSpecificity:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotfilters.yaml
@@ -3628,82 +4391,27 @@
 
       await context.sync();
     });
-'Excel.FormattedNumberCellValue#numberFormat:member':
+Excel.Functions:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-formatted-number.yaml
-
-
-    // This function creates a formatted number data type,
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-built-in-functions.yaml
 
-    // and sets the format of this data type as a currency.
 
     await Excel.run(async (context) => {
-      // Get the Sample worksheet and a range on that sheet.
-      const sheet = context.workbook.worksheets.getItemOrNullObject("Sample");
-      const currencyRange = sheet.getRange("A2");
+      // This function uses VLOOKUP to find data in the "Wrench" row on the worksheet. 
+      let range = context.workbook.worksheets.getItem("Sample").getRange("A1:D4");
 
-      // Write a number formatted as currency to cell A2.
-      currencyRange.valuesAsJson = [
-        [
-          {
-            type: Excel.CellValueType.formattedNumber,
-            basicValue: 12.34,
-            numberFormat: "$* #,##0.00"
-          }
-        ]
-      ];
+      // Get the value in the second column in the "Wrench" row.
+      let unitSoldInNov = context.workbook.functions.vlookup("Wrench", range, 2, false);
+      unitSoldInNov.load("value");
 
       await context.sync();
+      console.log(" Number of wrenches sold in November = " + unitSoldInNov.value);
     });
-'Excel.FormattedNumberCellValue#type:member':
+Excel.Functions#vlookup:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-formatted-number.yaml
-
-
-    // This function creates a formatted number data type,
-
-    // and sets the format of this data type as a date.
-
-    await Excel.run(async (context) => {
-      // Get the Sample worksheet and a range on that sheet.
-      const sheet = context.workbook.worksheets.getItemOrNullObject("Sample");
-      const dateRange = sheet.getRange("A1");
-
-      // Write a number formatted as a date to cell A1.
-      dateRange.valuesAsJson = [
-        [
-          {
-            type: Excel.CellValueType.formattedNumber,
-            basicValue: 32889.0,
-            numberFormat: "m/d/yyyy"
-          }
-        ]
-      ];
-      await context.sync();
-    });
-'Excel.Functions:class':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-built-in-functions.yaml
-
-
-    await Excel.run(async (context) => {
-      // This function uses VLOOKUP to find data in the "Wrench" row on the worksheet. 
-      let range = context.workbook.worksheets.getItem("Sample").getRange("A1:D4");
-
-      // Get the value in the second column in the "Wrench" row.
-      let unitSoldInNov = context.workbook.functions.vlookup("Wrench", range, 2, false);
-      unitSoldInNov.load("value");
-
-      await context.sync();
-      console.log(" Number of wrenches sold in November = " + unitSoldInNov.value);
-    });
-'Excel.Functions#vlookup:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-built-in-functions.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-built-in-functions.yaml
 
 
     await Excel.run(async (context) => {
@@ -3717,7 +4425,7 @@
       await context.sync();
       console.log(" Number of wrenches sold in November = " + unitSoldInNov.value);
     });
-'Excel.Functions#sum:member(1)':
+Excel.Functions#sum:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-built-in-functions.yaml
@@ -3740,7 +4448,7 @@
       await context.sync();
       console.log(" Number of wrenches sold in November, December, and January = " + sumOfTwoLookups.value);
     });
-'Excel.GeometricShapeType:enum':
+Excel.GeometricShapeType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-create-and-delete.yaml
@@ -3755,7 +4463,7 @@
         shape.width = 200;
         await context.sync();
     });
-'Excel.GroupOption:enum':
+Excel.GroupOption:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/outline.yaml
@@ -3774,7 +4482,7 @@
         sheet.getRange("7:8").group(Excel.GroupOption.byRows);
         await context.sync();
     });
-'Excel.HorizontalAlignment:enum':
+Excel.HorizontalAlignment:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-merged-ranges.yaml
@@ -3794,7 +4502,7 @@
 
       await context.sync();
     });
-'Excel.IconSet:enum':
+Excel.IconSet:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -3838,7 +4546,7 @@
 
         await context.sync();
     });
-'Excel.IconSetConditionalFormat#criteria:member':
+Excel.IconSetConditionalFormat#criteria:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -3882,7 +4590,7 @@
 
         await context.sync();
     });
-'Excel.IconSetConditionalFormat#style:member':
+Excel.IconSetConditionalFormat#style:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -3926,7 +4634,7 @@
 
         await context.sync();
     });
-'Excel.Image#format:member':
+Excel.Image#format:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-images.yaml
@@ -3941,7 +4649,7 @@
         console.log("The image's format is: " + image.format);
         await context.sync();
     });
-'Excel.InsertShiftDirection:enum':
+Excel.InsertShiftDirection:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/insert-delete-clear-range.yaml
@@ -3955,7 +4663,7 @@
         
         await context.sync();
     });
-'Excel.KeyboardDirection:enum':
+Excel.KeyboardDirection:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-get-range-edge.yaml
@@ -3981,7 +4689,7 @@
 
       await context.sync();
     });
-'Excel.LabelFilterCondition:enum':
+Excel.LabelFilterCondition:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotfilters.yaml
@@ -4008,7 +4716,7 @@
 
       await context.sync();
     });
-'Excel.Line#connectBeginShape:member(1)':
+Excel.Line#connectBeginShape:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-lines.yaml
@@ -4021,7 +4729,7 @@
         line.connectEndShape(shapes.getItem("Right"), 0);
         await context.sync();
     });
-'Excel.Line#connectEndShape:member(1)':
+Excel.Line#connectEndShape:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-lines.yaml
@@ -4034,7 +4742,7 @@
         line.connectEndShape(shapes.getItem("Right"), 0);
         await context.sync();
     });
-'Excel.Line#disconnectBeginShape:member(1)':
+Excel.Line#disconnectBeginShape:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-lines.yaml
@@ -4047,7 +4755,7 @@
         line.disconnectEndShape();
         await context.sync();
     });
-'Excel.Line#disconnectEndShape:member(1)':
+Excel.Line#disconnectEndShape:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-lines.yaml
@@ -4060,7 +4768,7 @@
         line.disconnectEndShape();
         await context.sync();
     });
-'Excel.NamedItem:class':
+Excel.NamedItem:class:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/34-named-item/create-and-remove-named-item.yaml
@@ -4080,7 +4788,7 @@
 
         await context.sync();
     });
-'Excel.NamedItem#delete:member(1)':
+Excel.NamedItem#delete:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/34-named-item/create-and-remove-named-item.yaml
@@ -4103,7 +4811,7 @@
 
         await context.sync();
     });
-'Excel.NamedItem#formula:member':
+Excel.NamedItem#formula:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/34-named-item/update-named-item.yaml
@@ -4128,7 +4836,7 @@
             console.log(`Just updated the named item "${myNamedItem.name}" -- it's now located here: ${myNamedItem.formula}`);
         }
     });
-'Excel.NamedItemCollection#add:member(1)':
+Excel.NamedItemCollection#add:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/34-named-item/create-and-remove-named-item.yaml
@@ -4143,7 +4851,159 @@
 
         await context.sync();
     });
-'Excel.NumberFormatInfo#numberDecimalSeparator:member':
+Excel.Note:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/excel-note-basics.yaml
+
+
+    // This function changes the height and width of the first note.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem("Notes");
+      const note = sheet.notes.getItemAt(0);
+      note.height = 200;
+      note.width = 400;
+      await context.sync();
+    });
+Excel.Note#content:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/excel-note-basics.yaml
+
+
+    // This function changes the content in the first note.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem("Notes");
+      const note = sheet.notes.getItemAt(0);
+      note.content = "Changing the content of the first note.";
+      await context.sync();
+    });
+Excel.Note#height:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/excel-note-basics.yaml
+
+
+    // This function changes the height and width of the first note.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem("Notes");
+      const note = sheet.notes.getItemAt(0);
+      note.height = 200;
+      note.width = 400;
+      await context.sync();
+    });
+Excel.Note#visible:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/excel-note-basics.yaml
+
+
+    // This function sets the note on cell A1 to visible.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem("Notes");
+      const firstNote = sheet.notes.getItem("A1");
+
+      firstNote.load();
+      await context.sync();
+
+      firstNote.visible = true;
+    });
+Excel.Note#width:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/excel-note-basics.yaml
+
+
+    // This function changes the height and width of the first note.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem("Notes");
+      const note = sheet.notes.getItemAt(0);
+      note.height = 200;
+      note.width = 400;
+      await context.sync();
+    });
+Excel.Note#delete:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/excel-note-basics.yaml
+
+
+    // This function deletes the note from cell A2.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem("Notes");
+      const note = sheet.notes.getItem("A2");
+      note.delete();
+
+      await context.sync();
+    });
+Excel.NoteCollection:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/excel-note-basics.yaml
+
+
+    // This function adds a note to the selected cell.
+
+    await Excel.run(async (context) => {
+      const selectedRange = context.workbook.getSelectedRange();
+
+      // Note that an InvalidArgument error is thrown if multiple cells are selected.
+      context.workbook.notes.add(selectedRange, "The first note.");
+      await context.sync();
+    });
+Excel.NoteCollection#add:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/excel-note-basics.yaml
+
+
+    // This function adds a note to the selected cell.
+
+    await Excel.run(async (context) => {
+      const selectedRange = context.workbook.getSelectedRange();
+
+      // Note that an InvalidArgument error is thrown if multiple cells are selected.
+      context.workbook.notes.add(selectedRange, "The first note.");
+      await context.sync();
+    });
+Excel.NoteCollection#getItem:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/excel-note-basics.yaml
+
+
+    // This function sets the note on cell A1 to visible.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem("Notes");
+      const firstNote = sheet.notes.getItem("A1");
+
+      firstNote.load();
+      await context.sync();
+
+      firstNote.visible = true;
+    });
+Excel.NoteCollection#getItemAt:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/excel-note-basics.yaml
+
+
+    // This function changes the content in the first note.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem("Notes");
+      const note = sheet.notes.getItemAt(0);
+      note.content = "Changing the content of the first note.";
+      await context.sync();
+    });
+Excel.NumberFormatInfo#numberDecimalSeparator:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/culture-info.yaml
@@ -4185,7 +5045,7 @@
 
     await context.sync();
       });
-'Excel.NumberFormatInfo#numberGroupSeparator:member':
+Excel.NumberFormatInfo#numberGroupSeparator:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/culture-info.yaml
@@ -4211,7 +5071,7 @@
       resultRange.format.autofitColumns();
       await context.sync();
     });
-'Excel.PageBreakCollection#add:member(1)':
+Excel.PageBreakCollection#add:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-page-layout.yaml
@@ -4222,7 +5082,7 @@
         farmSheet.horizontalPageBreaks.add("A21:E21");
         await context.sync();
     });
-'Excel.PageLayout#centerHorizontally:member':
+Excel.PageLayout#centerHorizontally:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-page-layout.yaml
@@ -4234,7 +5094,7 @@
         farmSheet.pageLayout.centerVertically = true;
         await context.sync();
     });
-'Excel.PageLayout#centerVertically:member':
+Excel.PageLayout#centerVertically:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-page-layout.yaml
@@ -4246,7 +5106,7 @@
         farmSheet.pageLayout.centerVertically = true;
         await context.sync();
     });
-'Excel.PageLayout#orientation:member':
+Excel.PageLayout#orientation:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-page-layout.yaml
@@ -4257,7 +5117,7 @@
         farmSheet.pageLayout.orientation = Excel.PageOrientation.landscape;
         await context.sync();
     });
-'Excel.PageLayout#setPrintArea:member(1)':
+Excel.PageLayout#setPrintArea:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-page-layout.yaml
@@ -4268,7 +5128,7 @@
         farmSheet.pageLayout.setPrintArea("A1:D41");
         await context.sync();
     });
-'Excel.PageLayout#setPrintTitleRows:member(1)':
+Excel.PageLayout#setPrintTitleRows:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-page-layout.yaml
@@ -4279,7 +5139,7 @@
         farmSheet.pageLayout.setPrintTitleRows("$1:$1");
         await context.sync();
     });
-'Excel.PageLayout#zoom:member':
+Excel.PageLayout#zoom:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-page-layout.yaml
@@ -4290,7 +5150,7 @@
         farmSheet.pageLayout.zoom = { scale: 200 };
         await context.sync();
     });
-'Excel.PageOrientation:enum':
+Excel.PageOrientation:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-page-layout.yaml
@@ -4301,7 +5161,7 @@
         farmSheet.pageLayout.orientation = Excel.PageOrientation.landscape;
         await context.sync();
     });
-'Excel.PictureFormat:enum':
+Excel.PictureFormat:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-images.yaml
@@ -4317,7 +5177,7 @@
         // Your add-in would save this string as a .png file.
         console.log("The image's Base64-encoded string: " + imageString);
     });
-'Excel.PivotField#clearAllFilters:member(1)':
+Excel.PivotField#clearAllFilters:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotfilters.yaml
@@ -4337,7 +5197,7 @@
       });
       await context.sync();
     });
-'Excel.PivotFilters#dateFilter:member':
+Excel.PivotFilters#dateFilter:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotfilters.yaml
@@ -4370,7 +5230,7 @@
 
       await context.sync();
     });
-'Excel.PivotFilters#labelFilter:member':
+Excel.PivotFilters#labelFilter:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotfilters.yaml
@@ -4397,7 +5257,7 @@
 
       await context.sync();
     });
-'Excel.PivotFilters#manualFilter:member':
+Excel.PivotFilters#manualFilter:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotfilters.yaml
@@ -4424,7 +5284,7 @@
 
       await context.sync();
     });
-'Excel.PivotFilters#valueFilter:member':
+Excel.PivotFilters#valueFilter:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotfilters.yaml
@@ -4451,7 +5311,7 @@
 
       await context.sync();
     });
-'Excel.PivotHierarchy#fields:member':
+Excel.PivotHierarchy#fields:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotfilters.yaml
@@ -4478,7 +5338,29 @@
 
       await context.sync();
     });
-'Excel.PivotLayout#altTextDescription:member':
+Excel.PivotLayout#getDataBodyRange:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-filters-and-summaries.yaml
+
+
+    await Excel.run(async (context) => {
+        const pivotTable = context.workbook.worksheets.getActiveWorksheet().pivotTables.getItem("Farm Sales");
+
+        // The layout controls the ranges used by the PivotTable.
+        const range = pivotTable.layout.getDataBodyRange();
+
+        // Get all the data hierarchy totals.
+        const grandTotalRange = range.getLastRow();
+        grandTotalRange.load("address");
+        await context.sync();
+        
+        // Use the wholesale and farm sale totals to make a final sum.
+        const masterTotalRange = context.workbook.worksheets.getActiveWorksheet().getRange("B27:C27");
+        masterTotalRange.formulas = [["All Crates", "=SUM(" + grandTotalRange.address + ")"]];
+        await context.sync();
+    });
+Excel.PivotLayout#altTextDescription:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotlayout.yaml
@@ -4495,7 +5377,7 @@
 
       await context.sync();
     });
-'Excel.PivotLayout#displayBlankLineAfterEachItem:member(1)':
+Excel.PivotLayout#displayBlankLineAfterEachItem:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotlayout.yaml
@@ -4511,7 +5393,7 @@
 
       await context.sync();
     });
-'Excel.PivotLayout#emptyCellText:member':
+Excel.PivotLayout#emptyCellText:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotlayout.yaml
@@ -4528,7 +5410,7 @@
       pivotLayout.getDataBodyRange().format.horizontalAlignment = Excel.HorizontalAlignment.right;
       await context.sync();
     });
-'Excel.PivotLayout#fillEmptyCells:member':
+Excel.PivotLayout#fillEmptyCells:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotlayout.yaml
@@ -4548,29 +5430,7 @@
       pivotLayout.fillEmptyCells = fillToSet;
       await context.sync();
     });
-'Excel.PivotLayout#getDataBodyRange:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-filters-and-summaries.yaml
-
-
-    await Excel.run(async (context) => {
-        const pivotTable = context.workbook.worksheets.getActiveWorksheet().pivotTables.getItem("Farm Sales");
-
-        // The layout controls the ranges used by the PivotTable.
-        const range = pivotTable.layout.getDataBodyRange();
-
-        // Get all the data hierarchy totals.
-        const grandTotalRange = range.getLastRow();
-        grandTotalRange.load("address");
-        await context.sync();
-        
-        // Use the wholesale and farm sale totals to make a final sum.
-        const masterTotalRange = context.workbook.worksheets.getActiveWorksheet().getRange("B27:C27");
-        masterTotalRange.formulas = [["All Crates", "=SUM(" + grandTotalRange.address + ")"]];
-        await context.sync();
-    });
-'Excel.PivotLayout#layoutType:member':
+Excel.PivotLayout#layoutType:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotlayout.yaml
@@ -4594,7 +5454,7 @@
       await context.sync();
       console.log("Pivot layout is now " + pivotTable.layout.layoutType);
     });
-'Excel.PivotLayout#preserveFormatting:member':
+Excel.PivotLayout#preserveFormatting:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotlayout.yaml
@@ -4614,7 +5474,7 @@
       pivotLayout.preserveFormatting = preserveFormattingToSet;
       await context.sync();
     });
-'Excel.PivotLayout#repeatAllItemLabels:member(1)':
+Excel.PivotLayout#repeatAllItemLabels:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotlayout.yaml
@@ -4630,7 +5490,7 @@
 
       await context.sync();
     });
-'Excel.PivotLayout#showColumnGrandTotals:member':
+Excel.PivotLayout#showColumnGrandTotals:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotlayout.yaml
@@ -4654,7 +5514,7 @@
 
       await context.sync();
     });
-'Excel.PivotLayout#showFieldHeaders:member':
+Excel.PivotLayout#showFieldHeaders:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotlayout.yaml
@@ -4672,7 +5532,7 @@
       pivotLayout.showFieldHeaders = showHeaders;
       await context.sync();
     });
-'Excel.PivotLayout#showRowGrandTotals:member':
+Excel.PivotLayout#showRowGrandTotals:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotlayout.yaml
@@ -4696,7 +5556,7 @@
 
       await context.sync();
     });
-'Excel.PivotTable#columnHierarchies:member':
+Excel.PivotTable#columnHierarchies:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-create-and-modify.yaml
@@ -4719,7 +5579,7 @@
 
         await context.sync();
     });
-'Excel.PivotTable#dataHierarchies:member':
+Excel.PivotTable#dataHierarchies:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-create-and-modify.yaml
@@ -4732,7 +5592,7 @@
 
         await context.sync();
     });
-'Excel.PivotTable#delete:member(1)':
+Excel.PivotTable#delete:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-create-and-modify.yaml
@@ -4743,28 +5603,29 @@
 
         await context.sync();
     });
-'Excel.PivotTable#filterHierarchies:member':
+Excel.PivotTable#layout:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-filters-and-summaries.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-create-and-modify.yaml
 
 
-    async function filter(functionType: Excel.AggregationFunction) {
-        await Excel.run(async (context) => {
-            const pivotTable = context.workbook.worksheets.getActiveWorksheet().pivotTables.getItem("Farm Sales");
-            const filters = pivotTable.filterHierarchies;
-            const filter = filters.getItemOrNullObject("Classification");
-            filter.load();
-            await context.sync();
+    await Excel.run(async (context) => {
+        const pivotTable = context.workbook.worksheets.getActiveWorksheet().pivotTables.getItem("Farm Sales");
+        pivotTable.layout.load("layoutType");
+        await context.sync();
 
-            // Add the Classification hierarchy to the filter, if it's not already there.
-            if (filter.isNullObject) {
-                filters.add(pivotTable.hierarchies.getItem("Classification"));
-                await context.sync();
-            }
-        });
-    }
-'Excel.PivotTable#getDataSourceString:member(1)':
+        // Cycle between the three layout types.
+        if (pivotTable.layout.layoutType === "Compact") {
+            pivotTable.layout.layoutType = "Outline";
+        } else if (pivotTable.layout.layoutType === "Outline") {
+            pivotTable.layout.layoutType = "Tabular";
+        } else {
+            pivotTable.layout.layoutType = "Compact";
+        }
+        await context.sync();
+        console.log("Pivot layout is now " + pivotTable.layout.layoutType);
+    });
+Excel.PivotTable#getDataSourceString:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-source-data.yaml
@@ -4785,7 +5646,7 @@
       console.log("Data source: " + pivotTableDataSourceString.value);
       console.log("Source type: " + pivotTableDataSourceType.value);
     });
-'Excel.PivotTable#getDataSourceType:member(1)':
+Excel.PivotTable#getDataSourceType:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-source-data.yaml
@@ -4806,29 +5667,28 @@
       console.log("Data source: " + pivotTableDataSourceString.value);
       console.log("Source type: " + pivotTableDataSourceType.value);
     });
-'Excel.PivotTable#layout:member':
+Excel.PivotTable#filterHierarchies:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-create-and-modify.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-filters-and-summaries.yaml
 
 
-    await Excel.run(async (context) => {
-        const pivotTable = context.workbook.worksheets.getActiveWorksheet().pivotTables.getItem("Farm Sales");
-        pivotTable.layout.load("layoutType");
-        await context.sync();
+    async function filter(functionType: Excel.AggregationFunction) {
+        await Excel.run(async (context) => {
+            const pivotTable = context.workbook.worksheets.getActiveWorksheet().pivotTables.getItem("Farm Sales");
+            const filters = pivotTable.filterHierarchies;
+            const filter = filters.getItemOrNullObject("Classification");
+            filter.load();
+            await context.sync();
 
-        // Cycle between the three layout types.
-        if (pivotTable.layout.layoutType === "Compact") {
-            pivotTable.layout.layoutType = "Outline";
-        } else if (pivotTable.layout.layoutType === "Outline") {
-            pivotTable.layout.layoutType = "Tabular";
-        } else {
-            pivotTable.layout.layoutType = "Compact";
-        }
-        await context.sync();
-        console.log("Pivot layout is now " + pivotTable.layout.layoutType);
-    });
-'Excel.PivotTable#refresh:member(1)':
+            // Add the Classification hierarchy to the filter, if it's not already there.
+            if (filter.isNullObject) {
+                filters.add(pivotTable.hierarchies.getItem("Classification"));
+                await context.sync();
+            }
+        });
+    }
+Excel.PivotTable#refresh:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-refresh.yaml
@@ -4843,7 +5703,7 @@
       pivotTable.refresh();
       await context.sync();
     });
-'Excel.PivotTableCollection#add:member(1)':
+Excel.PivotTableCollection#add:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-create-and-modify.yaml
@@ -4856,7 +5716,7 @@
 
         await context.sync();
     });
-'Excel.PivotTableCollection#getItem:member(1)':
+Excel.PivotTableCollection#getItem:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-refresh.yaml
@@ -4871,7 +5731,7 @@
       pivotTable.refresh();
       await context.sync();
     });
-'Excel.PresetCriteriaConditionalFormat#rule:member':
+Excel.PresetCriteriaConditionalFormat#rule:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -4887,145 +5747,87 @@
 
         await context.sync();
     });
-'Excel.Range#autoFill:member(1)':
+Excel.Range#clearOrResetContents:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-auto-fill.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-cell-control.yaml
 
 
+    // Remove all content from the Analysis column.
+
     await Excel.run(async (context) => {
       const sheet = context.workbook.worksheets.getActiveWorksheet();
-      const sumCell = sheet.getRange("P4");
-      
-      // Copy everything. The formulas will be contextually updated based on their new locations.
-      sumCell.autoFill("P4:P7", Excel.AutoFillType.fillCopy);
-      sumCell.format.autofitColumns();
+
+      // Get the second column in the table, without the header.
+      const range = sheet.tables.getItem("FruitTable").columns.getItem("Analysis").getDataBodyRange();
+
+      // Clear all the data from the second column.
+      range.clearOrResetContents();
       await context.sync();
     });
-'Excel.Range#copyFrom:member(1)':
+Excel.Range#control:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-copyfrom.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-cell-control.yaml
+
 
+    // Add checkboxes to the table.
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Sample");
-        // Place a label in front of the copied data.
-        sheet.getRange("F2").values = [["Copied Formula"]];
+      const sheet = context.workbook.worksheets.getActiveWorksheet();
 
-        // Copy a range preserving the formulas.
-        // Note: non-formula values are copied over as is.
-        sheet.getRange("G2").copyFrom("A1:E1", Excel.RangeCopyType.formulas);
-        await context.sync();
+      // Get the second column in the table, without the header.
+      const range = sheet.tables.getItem("FruitTable").columns.getItem("Analysis").getDataBodyRange();
+
+      // Change the boolean values to checkboxes.
+      range.control = {
+        type: Excel.CellControlType.checkbox
+      };
+      await context.sync();
     });
-'Excel.Range#find:member(1)':
+Excel.Range#values:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-find.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-cell-control.yaml
 
 
+    // Change the value of the checkbox in B3.
+
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Sample");
-        const table = sheet.tables.getItem("ExpensesTable");
-        const searchRange = table.getRange();
-
-        // NOTE: If no match is found, an ItemNotFound error
-        // is thrown when Range.find is evaluated.
-        const foundRange = searchRange.find($("#searchText").val().toString(), {
-            completeMatch: isCompleteMatchToggle,
-            matchCase: isMatchCaseToggle,
-            searchDirection: searchDirectionToggle
-        });
-        
-        foundRange.load("address");
-        await context.sync();
-
-
-        console.log(foundRange.address);
-    });
-'Excel.Range#findOrNullObject:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-find.yaml
-
-
-    await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Sample");
-        const table = sheet.tables.getItem("ExpensesTable");
-        const searchRange = table.getRange();
-        const foundRange = searchRange.findOrNullObject($("#searchText").val().toString(), {
-            completeMatch: isCompleteMatchToggle,
-            matchCase: isMatchCaseToggle,
-            searchDirection: searchDirectionToggle
-        });
-        
-        foundRange.load("address");
-        await context.sync();
-
-        if (foundRange.isNullObject) {
-            console.log("Text not found");
-        } else {
-            console.log(foundRange.address);
-        }
-    });
-'Excel.Range#getCellProperties:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/cell-properties.yaml
-
-
-    await Excel.run(async (context) => {
-        const cell = context.workbook.getActiveCell();
-
-        // Define the cell properties to get by setting the matching LoadOptions to true.
-        const propertiesToGet = cell.getCellProperties({
-            address: true,
-            format: {
-                fill: {
-                    color: true
-                },
-                font: {
-                    color: true
-                }
-            },
-            style: true
-        });
+      const sheet = context.workbook.worksheets.getActiveWorksheet();
+      const range = sheet.getRange("B3");
 
-        // Sync to get the data from the workbook.
-        await context.sync();
-        const cellProperties = propertiesToGet.value[0][0];
-        console.log(
-            `Address: ${cellProperties.address}\nStyle: ${cellProperties.style}\nFill Color: ${cellProperties.format.fill.color}\nFont Color: ${cellProperties.format.font.color}`);
+      range.values = [["TRUE"]];
+      await context.sync();
     });
-'Excel.Range#getDependents:member(1)':
+Excel.Range#valuesAsJson:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-dependents.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-formatted-number.yaml
 
 
-    // This function highlights all the dependent cells of the active cell.
+    // This function creates a double data type,
 
-    // Dependent cells contain formulas that refer to other cells.
+    // and sets the format of this data type as a date.
 
     await Excel.run(async (context) => {
-      // Get addresses of the active cell's dependent cells.
-      const range = context.workbook.getActiveCell();
-      const dependents = range.getDependents();
-      range.load("address");
-      dependents.areas.load("address");
-      await context.sync();
-
-      console.log(`All dependent cells of ${range.address}:`);
+      // Get the Sample worksheet and a range on that sheet.
+      const sheet = context.workbook.worksheets.getItemOrNullObject("Sample");
+      const dateRange = sheet.getRange("A1");
 
-      // Use the dependents API to loop through dependents of the active cell.
-      for (let i = 0; i < dependents.areas.items.length; i++) {
-        // Highlight and print out the address of each dependent cell.
-        dependents.areas.items[i].format.fill.color = "Orange";
-        console.log(`  ${dependents.areas.items[i].address}`);
-      }
+      // Write a number formatted as a date to cell A1.
+      dateRange.valuesAsJson = [
+        [
+          {
+            type: Excel.CellValueType.double,
+            basicValue: 32889.0,
+            numberFormat: "m/d/yyyy"
+          }
+        ]
+      ];
       await context.sync();
     });
-'Excel.Range#getDirectDependents:member(1)':
+Excel.Range#getDirectDependents:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-direct-dependents.yaml
@@ -5049,118 +5851,37 @@
       }
       await context.sync();
     });
-'Excel.Range#getDirectPrecedents:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/precedents.yaml
-
-
-    await Excel.run(async (context) => {
-      // Precedents are cells referenced by the formula in a cell.
-      // A "direct precedent" is a cell directly referenced by the selected formula.
-      let range = context.workbook.getActiveCell();
-      let directPrecedents = range.getDirectPrecedents();
-      range.load("address");
-      directPrecedents.areas.load("address");
-      await context.sync();
-
-      console.log(`Direct precedent cells of ${range.address}:`);
-
-      // Use the direct precedents API to loop through precedents of the active cell.
-      for (let i = 0; i < directPrecedents.areas.items.length; i++) {
-        // Highlight and console the address of each precedent cell.
-        directPrecedents.areas.items[i].format.fill.color = "Yellow";
-        console.log(`  ${directPrecedents.areas.items[i].address}`);
-      }
-      await context.sync();
-    });
-'Excel.Range#getExtendedRange:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-get-range-edge.yaml
-
-
-    await Excel.run(async (context) => {
-      // Get the selected range.
-      const range = context.workbook.getSelectedRange();
-
-      // Specify the direction with the `KeyboardDirection` enum.
-      const direction = Excel.KeyboardDirection.down;
-
-      // Get the active cell in the workbook.
-      const activeCell = context.workbook.getActiveCell();
-
-      // Get all the cells from the currently selected range to the bottom-most edge of the used range.
-      // This method acts like the Ctrl+Shift+Arrow key keyboard shortcut while a range is selected.
-      const extendedRange = range.getExtendedRange(
-        direction,
-        activeCell // If the selected range contains more than one cell, the active cell must be defined.
-      );
-      extendedRange.select();
-
-      await context.sync();
-    });
-'Excel.Range#getIntersectionOrNullObject:member(1)':
+Excel.Range#sort:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-relationships.yaml
-
-
-    await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Sample");
-        const salesTable = sheet.tables.getItem("SalesTable");
-        const dataRange = salesTable.getDataBodyRange();
-
-        // We want the most recent quarter that has data, so
-        // exclude quarters without data and get the last of
-        // the remaining columns.
-        const usedDataRange = dataRange.getUsedRange(true /* valuesOnly */);
-        const currentQuarterRange = usedDataRange.getLastColumn();
-
-        // Asian and European teams have separate contests.
-        const asianSalesRange = sheet.getRange("A2:E4");
-        const europeanSalesRange = sheet.getRange("A5:E7");
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/event-column-and-row-sort.yaml
 
-        // The data for each chart is the intersection of the
-        // current quarter column and the rows for the continent.
-        const asianContestRange = asianSalesRange.getIntersectionOrNullObject(currentQuarterRange);
-        const europeanContestRange = europeanSalesRange.getIntersectionOrNullObject(currentQuarterRange);
 
-        // Must sync before you can test the output of *OrNullObject
-        // method/property.
-        await context.sync();
+    async function sortTopToBottom(criteria: string) {
+        await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getActiveWorksheet();
+            const range = sheet.getRange("A1:E5");
 
-        if (asianContestRange.isNullObject) {
-            // See the declaration of this function for how to
-            // test this code path.
-            reportMissingData("Asian");
-        } else {
-            createContinentChart(
-                sheet,
-                "Asian",
-                asianContestRange,
-                "A9",
-                "F24"
-            );
-        }
+            // Find the column header that provides the sort criteria.
+            const header = range.find(criteria, {});
+            header.load("columnIndex");
+            await context.sync();
 
-        if (europeanContestRange.isNullObject) {
-            // See the declaration of this function for how to
-            // test this code path.
-            reportMissingData("European");
-        } else {
-            createContinentChart(
-                sheet,
-                "European",
-                europeanContestRange,
-                "A25",
-                "F40"
+            range.sort.apply(
+                [
+                    {
+                        key: header.columnIndex,
+                        sortOn: Excel.SortOn.value
+                    }
+                ],
+                false /*matchCase*/,
+                true /*hasHeaders*/,
+                Excel.SortOrientation.rows
             );
-        }
-
-        await context.sync();
-    });
-'Excel.Range#getMergedAreasOrNullObject:member(1)':
+            await context.sync();
+        });
+    }
+Excel.Range#getMergedAreasOrNullObject:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-merged-ranges.yaml
@@ -5187,351 +5908,208 @@
 
       await context.sync();
     });
-'Excel.Range#getPivotTables:member(1)':
+Excel.Range#merge:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-get-pivottables.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-merged-ranges.yaml
 
 
     await Excel.run(async (context) => {
-      const activeRange = context.workbook.getSelectedRange();
+      // Retrieve the worksheet and the table in that worksheet.
+      const sheet = context.workbook.worksheets.getActiveWorksheet();
+      const tableRange = sheet.getRange("B2:E6");
 
-      // Get all the PivotTables that intersect with this range.
-      const partiallyContainedPivotTables = activeRange.getPivotTables();
-      // Get all the PivotTables that are completely contained within this range.
-      const fullyContainedPivotTables = activeRange.getPivotTables(true);
+      // Create a merged range in the first row of the table.
+      const chartTitle = tableRange.getRow(0);
+      chartTitle.merge(true);
 
-      partiallyContainedPivotTables.load("name");
-      fullyContainedPivotTables.load("name");
-      await context.sync();
+      // Format the merged range.
+      chartTitle.format.horizontalAlignment = "Center";
 
-      // Display the names in the console.
-      console.log("PivotTables in the current range:")
-      partiallyContainedPivotTables.items.forEach((pivotTable) => {
-        console.log(`\t${pivotTable.name}`);
-      });
-      console.log("PivotTables completely contained in the current range:")
-      fullyContainedPivotTables.items.forEach((pivotTable) => {
-        console.log(`\t${pivotTable.name}`);
-      });
+      await context.sync();
     });
-'Excel.Range#getPrecedents:member(1)':
+Excel.Range#group:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/precedents.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/outline.yaml
 
 
-    await Excel.run(async (context) => {
-      // Precedents are cells referenced by the formula in a cell.
-      let range = context.workbook.getActiveCell();
-      let precedents = range.getPrecedents();
-      range.load("address");
-      precedents.areas.load("address");
-      await context.sync();
-
-      console.log(`All precedent cells of ${range.address}:`);
+    Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getActiveWorksheet();
+        
+        // Group the larger, main level. Note that the outline controls
+        // will be on row 10, meaning 4-9 will collapse and expand.
+        sheet.getRange("4:9").group(Excel.GroupOption.byRows);
 
-      // Use the precedents API to loop through precedents of the active cell.
-      for (let i = 0; i < precedents.areas.items.length; i++) {
-        // Highlight and console the address of each precedent cell.
-        precedents.areas.items[i].format.fill.color = "Orange";
-        console.log(`  ${precedents.areas.items[i].address}`);
-      }
-      await context.sync();
+        // Group the smaller, sublevels. Note that the outline controls
+        // will be on rows 6 and 9, meaning 4-5 and 7-8 will collapse and expand.
+        sheet.getRange("4:5").group(Excel.GroupOption.byRows);
+        sheet.getRange("7:8").group(Excel.GroupOption.byRows);
+        await context.sync();
     });
-'Excel.Range#getRangeEdge:member(1)':
+Excel.Range#ungroup:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-get-range-edge.yaml
-
-
-    await Excel.run(async (context) => {
-      // Get the selected range.
-      const range = context.workbook.getSelectedRange();
-
-      // Specify the direction with the `KeyboardDirection` enum.
-      const direction = Excel.KeyboardDirection.up;
-
-      // Get the active cell in the workbook.
-      const activeCell = context.workbook.getActiveCell();
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/outline.yaml
 
-      // Get the top-most cell of the current used range.
-      // This method acts like the Ctrl+Arrow key keyboard shortcut while a range is selected.
-      const rangeEdge = range.getRangeEdge(
-        direction,
-        activeCell // If the selected range contains more than one cell, the active cell must be defined.
-      );
-      rangeEdge.select();
 
-      await context.sync();
+    Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getActiveWorksheet();
+        
+        // This removes two levels of groups from the "A1-R10" range.
+        // Any groups at the same level on the same dimension will be removed by a single call.
+        sheet.getRange("A1:R10").ungroup(Excel.GroupOption.byRows);
+        sheet.getRange("A1:R10").ungroup(Excel.GroupOption.byRows);
+        sheet.getRange("A1:R10").ungroup(Excel.GroupOption.byColumns);
+        sheet.getRange("A1:R10").ungroup(Excel.GroupOption.byColumns);
+        await context.sync();
     });
-'Excel.Range#getSpecialCells:member(1)':
+Excel.Range#getPivotTables:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-areas.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-get-pivottables.yaml
 
 
     await Excel.run(async (context) => {
+      const activeRange = context.workbook.getSelectedRange();
 
-        const sheet = context.workbook.worksheets.getActiveWorksheet();
-        const usedRange = sheet.getUsedRange();
+      // Get all the PivotTables that intersect with this range.
+      const partiallyContainedPivotTables = activeRange.getPivotTables();
+      // Get all the PivotTables that are completely contained within this range.
+      const fullyContainedPivotTables = activeRange.getPivotTables(true);
 
-        // Find the ranges with either text or logical (boolean) values.
-        const formulaRanges = usedRange.getSpecialCells("Constants", "LogicalText");
-        formulaRanges.format.fill.color = "orange";
+      partiallyContainedPivotTables.load("name");
+      fullyContainedPivotTables.load("name");
+      await context.sync();
 
-        return context.sync();
+      // Display the names in the console.
+      console.log("PivotTables in the current range:")
+      partiallyContainedPivotTables.items.forEach((pivotTable) => {
+        console.log(`\t${pivotTable.name}`);
+      });
+      console.log("PivotTables completely contained in the current range:")
+      fullyContainedPivotTables.items.forEach((pivotTable) => {
+        console.log(`\t${pivotTable.name}`);
+      });
     });
-'Excel.Range#getSpillingToRange:member(1)':
+Excel.Range#getDirectPrecedents:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/dynamic-arrays.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/precedents.yaml
 
 
     await Excel.run(async (context) => {
-      const sheet = context.workbook.worksheets.getItem("Sample");
-
-      // Set G4 to a formula that returns a dynamic array.
-      const targetCell = sheet.getRange("G4");
-      targetCell.formulas = [["=A4:D4"]];
+      // Precedents are cells referenced by the formula in a cell.
+      // A "direct precedent" is a cell directly referenced by the selected formula.
+      let range = context.workbook.getActiveCell();
+      let directPrecedents = range.getDirectPrecedents();
+      range.load("address");
+      directPrecedents.areas.load("address");
+      await context.sync();
 
-      // Get the address of the cells that the dynamic array spilled into.
-      const spillRange = targetCell.getSpillingToRange();
-      spillRange.load("address");
+      console.log(`Direct precedent cells of ${range.address}:`);
 
-      // Fit the columns for readability.
-      sheet.getUsedRange().format.autofitColumns();
+      // Use the direct precedents API to loop through precedents of the active cell.
+      for (let i = 0; i < directPrecedents.areas.items.length; i++) {
+        // Highlight and console the address of each precedent cell.
+        directPrecedents.areas.items[i].format.fill.color = "Yellow";
+        console.log(`  ${directPrecedents.areas.items[i].address}`);
+      }
       await context.sync();
-
-      console.log(`Copying the table headers spilled into ${spillRange.address}.`);
     });
-'Excel.Range#getUsedRange:member(1)':
+Excel.Range#getPrecedents:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-relationships.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/precedents.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Sample");
-        const salesTable = sheet.tables.getItem("SalesTable");
-        const dataRange = salesTable.getDataBodyRange();
+      // Precedents are cells referenced by the formula in a cell.
+      let range = context.workbook.getActiveCell();
+      let precedents = range.getPrecedents();
+      range.load("address");
+      precedents.areas.load("address");
+      await context.sync();
 
-        // We want the most recent quarter that has data, so
-        // exclude quarters without data and get the last of
-        // the remaining columns.
-        const usedDataRange = dataRange.getUsedRange(true /* valuesOnly */);
-        const currentQuarterRange = usedDataRange.getLastColumn();
+      console.log(`All precedent cells of ${range.address}:`);
 
-        // Asian and European teams have separate contests.
-        const asianSalesRange = sheet.getRange("A2:E4");
-        const europeanSalesRange = sheet.getRange("A5:E7");
+      // Use the precedents API to loop through precedents of the active cell.
+      for (let i = 0; i < precedents.areas.items.length; i++) {
+        // Highlight and console the address of each precedent cell.
+        precedents.areas.items[i].format.fill.color = "Orange";
+        console.log(`  ${precedents.areas.items[i].address}`);
+      }
+      await context.sync();
+    });
+Excel.Range#getSpecialCells:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-areas.yaml
 
-        // The data for each chart is the intersection of the
-        // current quarter column and the rows for the continent.
-        const asianContestRange = asianSalesRange.getIntersectionOrNullObject(currentQuarterRange);
-        const europeanContestRange = europeanSalesRange.getIntersectionOrNullObject(currentQuarterRange);
 
-        // Must sync before you can test the output of *OrNullObject
-        // method/property.
-        await context.sync();
+    await Excel.run(async (context) => {
 
-        if (asianContestRange.isNullObject) {
-            // See the declaration of this function for how to
-            // test this code path.
-            reportMissingData("Asian");
-        } else {
-            createContinentChart(
-                sheet,
-                "Asian",
-                asianContestRange,
-                "A9",
-                "F24"
-            );
-        }
+        const sheet = context.workbook.worksheets.getActiveWorksheet();
+        const usedRange = sheet.getUsedRange();
 
-        if (europeanContestRange.isNullObject) {
-            // See the declaration of this function for how to
-            // test this code path.
-            reportMissingData("European");
-        } else {
-            createContinentChart(
-                sheet,
-                "European",
-                europeanContestRange,
-                "A25",
-                "F40"
-            );
-        }
+        // Find the ranges with either text or logical (boolean) values.
+        const formulaRanges = usedRange.getSpecialCells("Constants", "LogicalText");
+        formulaRanges.format.fill.color = "orange";
 
-        await context.sync();
+        return context.sync();
     });
-'Excel.Range#getUsedRangeOrNullObject:member(1)':
+Excel.Range#autoFill:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/used-range.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-auto-fill.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Sample");
-        const salesTable = sheet.tables.getItem("SalesTable");
-        const dataRange = salesTable.getDataBodyRange();
-
-        // Pass true so only cells with values count as used
-        const usedDataRange = dataRange.getUsedRangeOrNullObject(
-            true /* valuesOnly */
-        );
-
-        //Must sync before reading value returned from *OrNullObject method/property.
-        await context.sync();
-
-        if (usedDataRange.isNullObject) {
-            console.log("Need Data to Make Chart");
-            console.log("To create a meaningful chart, press 'Fill the table' (or add names to the Product column and numbers to some of the other cells). Then press 'Try to create chart' again.");
-        } else {
-            const chart = sheet.charts.add(
-                Excel.ChartType.columnClustered,
-                dataRange,
-                "Columns"
-            );
-            chart.setPosition("A15", "F30");
-            chart.title.text = "Quarterly sales chart";
-            chart.legend.position = "Right";
-            chart.legend.format.fill.setSolidColor("white");
-            chart.dataLabels.format.font.size = 15;
-            chart.dataLabels.format.font.color = "black";
-        }
-
-        await context.sync();
+      const sheet = context.workbook.worksheets.getActiveWorksheet();
+      const sumCell = sheet.getRange("P4");
+      
+      // Copy everything. The formulas will be contextually updated based on their new locations.
+      sumCell.autoFill("P4:P7", Excel.AutoFillType.fillCopy);
+      sumCell.format.autofitColumns();
+      await context.sync();
     });
-'Excel.Range#group:member(1)':
+Excel.Range#getCellProperties:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/outline.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/cell-properties.yaml
 
 
-    Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getActiveWorksheet();
-        
-        // Group the larger, main level. Note that the outline controls
-        // will be on row 10, meaning 4-9 will collapse and expand.
-        sheet.getRange("4:9").group(Excel.GroupOption.byRows);
+    await Excel.run(async (context) => {
+        const cell = context.workbook.getActiveCell();
 
-        // Group the smaller, sublevels. Note that the outline controls
-        // will be on rows 6 and 9, meaning 4-5 and 7-8 will collapse and expand.
-        sheet.getRange("4:5").group(Excel.GroupOption.byRows);
-        sheet.getRange("7:8").group(Excel.GroupOption.byRows);
+        // Define the cell properties to get by setting the matching LoadOptions to true.
+        const propertiesToGet = cell.getCellProperties({
+            address: true,
+            format: {
+                fill: {
+                    color: true
+                },
+                font: {
+                    color: true
+                }
+            },
+            style: true
+        });
+
+        // Sync to get the data from the workbook.
         await context.sync();
+        const cellProperties = propertiesToGet.value[0][0];
+        console.log(
+            `Address: ${cellProperties.address}\nStyle: ${cellProperties.style}\nFill Color: ${cellProperties.format.fill.color}\nFont Color: ${cellProperties.format.font.color}`);
     });
-'Excel.Range#hyperlink:member':
+Excel.Range#setCellProperties:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-hyperlink.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/cell-properties.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Orders");
-
-        let productsRange = sheet.getRange("A3:A5");
-        productsRange.load("values");
-
-        await context.sync();
-
-        // Create a hyperlink to a URL 
-        // for each product name in the first table.
-        for (let i = 0; i < productsRange.values.length; i++) {
-            let cellRange = productsRange.getCell(i, 0);
-            let cellText = productsRange.values[i][0];
-
-            let hyperlink = {
-                textToDisplay: cellText,
-                screenTip: "Search Bing for '" + cellText + "'",
-                address: "https://www.bing.com/?q=" + cellText
-            }
-            cellRange.hyperlink = hyperlink;
-        }
-
-        await context.sync();
-    });
-'Excel.Range#merge:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-merged-ranges.yaml
-
-
-    await Excel.run(async (context) => {
-      // Retrieve the worksheet and the table in that worksheet.
-      const sheet = context.workbook.worksheets.getActiveWorksheet();
-      const tableRange = sheet.getRange("B2:E6");
-
-      // Create a merged range in the first row of the table.
-      const chartTitle = tableRange.getRow(0);
-      chartTitle.merge(true);
-
-      // Format the merged range.
-      chartTitle.format.horizontalAlignment = "Center";
-
-      await context.sync();
-    });
-'Excel.Range#moveTo:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-copyfrom.yaml
-
-
-    await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Sample");
-        // Place a label in front of the moved data.
-        sheet.getRange("F12").values = [["Moved Range:"]];
-
-        // Move the range from A1:E1 to G12:K12.
-        sheet.getRange("A1:E1").moveTo("G12");
-        await context.sync();
-    });
-'Excel.Range#removeDuplicates:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-remove-duplicates.yaml
-
-
-    await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Sample");
-        const range = sheet.getRange("B2:D11");
-
-        const deleteResult = range.removeDuplicates([0],true);    
-        deleteResult.load();    
-        await context.sync();
-
-        console.log(deleteResult.removed + " entries with duplicate names removed.");
-        console.log(deleteResult.uniqueRemaining + " entries with unique names remain in the range.");
-    });
-'Excel.Range#set:member(2)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/90-scenarios/multiple-property-set.yaml
-
-
-    await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Sample");
-
-        const sourceRange = sheet.getRange("B2:E2");
-        sourceRange.load("format/fill/color, format/font/name, format/font/color");
-        await context.sync();
-
-        // Set properties based on the loaded and synced 
-        // source range.
-        const targetRange = sheet.getRange("B7:E7");
-        targetRange.set(sourceRange); 
-        targetRange.format.autofitColumns();
-        await context.sync();
-    });
-'Excel.Range#setCellProperties:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/cell-properties.yaml
-
-
-    await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getActiveWorksheet();
+        const sheet = context.workbook.worksheets.getActiveWorksheet();
 
         // Creating the SettableCellProperties objects to use for the range.
         // In your add-in, these should be created once, outside the function.
@@ -5601,207 +6179,193 @@
         sheet.getUsedRange().format.autofitColumns();
         await context.sync();
     });
-'Excel.Range#sort:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/event-column-and-row-sort.yaml
-
-
-    async function sortTopToBottom(criteria: string) {
-        await Excel.run(async (context) => {
-            const sheet = context.workbook.worksheets.getActiveWorksheet();
-            const range = sheet.getRange("A1:E5");
-
-            // Find the column header that provides the sort criteria.
-            const header = range.find(criteria, {});
-            header.load("columnIndex");
-            await context.sync();
-
-            range.sort.apply(
-                [
-                    {
-                        key: header.columnIndex,
-                        sortOn: Excel.SortOn.value
-                    }
-                ],
-                false /*matchCase*/,
-                true /*hasHeaders*/,
-                Excel.SortOrientation.rows
-            );
-            await context.sync();
-        });
-    }
-'Excel.Range#style:member':
+Excel.Range#copyFrom:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/style.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-copyfrom.yaml
 
 
     await Excel.run(async (context) => {
-        let worksheet = context.workbook.worksheets.getItem("Sample");
-        let range = worksheet.getRange("A1:E1");
-
-        // Apply built-in style. 
-        // Styles are in the Home tab ribbon.
-        range.style = Excel.BuiltInStyle.neutral;
-        range.format.horizontalAlignment = "Right";
+        const sheet = context.workbook.worksheets.getItem("Sample");
+        // Place a label in front of the copied data.
+        sheet.getRange("F2").values = [["Copied Formula"]];
 
+        // Copy a range preserving the formulas.
+        // Note: non-formula values are copied over as is.
+        sheet.getRange("G2").copyFrom("A1:E1", Excel.RangeCopyType.formulas);
         await context.sync();
     });
-'Excel.Range#ungroup:member(1)':
+Excel.Range#moveTo:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/outline.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-copyfrom.yaml
 
 
-    Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getActiveWorksheet();
-        
-        // This removes two levels of groups from the "A1-R10" range.
-        // Any groups at the same level on the same dimension will be removed by a single call.
-        sheet.getRange("A1:R10").ungroup(Excel.GroupOption.byRows);
-        sheet.getRange("A1:R10").ungroup(Excel.GroupOption.byRows);
-        sheet.getRange("A1:R10").ungroup(Excel.GroupOption.byColumns);
-        sheet.getRange("A1:R10").ungroup(Excel.GroupOption.byColumns);
+    await Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getItem("Sample");
+        // Place a label in front of the moved data.
+        sheet.getRange("F12").values = [["Moved Range:"]];
+
+        // Move the range from A1:E1 to G12:K12.
+        sheet.getRange("A1:E1").moveTo("G12");
         await context.sync();
     });
-'Excel.Range#valuesAsJson:member':
+Excel.Range#getDependents:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-formatted-number.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-dependents.yaml
 
 
-    // This function creates a formatted number data type,
+    // This function highlights all the dependent cells of the active cell.
 
-    // and sets the format of this data type as a date.
+    // Dependent cells contain formulas that refer to other cells.
 
     await Excel.run(async (context) => {
-      // Get the Sample worksheet and a range on that sheet.
-      const sheet = context.workbook.worksheets.getItemOrNullObject("Sample");
-      const dateRange = sheet.getRange("A1");
+      // Get addresses of the active cell's dependent cells.
+      const range = context.workbook.getActiveCell();
+      const dependents = range.getDependents();
+      range.load("address");
+      dependents.areas.load("address");
+      await context.sync();
 
-      // Write a number formatted as a date to cell A1.
-      dateRange.valuesAsJson = [
-        [
-          {
-            type: Excel.CellValueType.formattedNumber,
-            basicValue: 32889.0,
-            numberFormat: "m/d/yyyy"
-          }
-        ]
-      ];
+      console.log(`All dependent cells of ${range.address}:`);
+
+      // Use the dependents API to loop through dependents of the active cell.
+      for (let i = 0; i < dependents.areas.items.length; i++) {
+        // Highlight and print out the address of each dependent cell.
+        dependents.areas.items[i].format.fill.color = "Orange";
+        console.log(`  ${dependents.areas.items[i].address}`);
+      }
       await context.sync();
     });
-'Excel.RangeAreas#format:member':
+Excel.Range#getSpillingToRange:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-areas.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/dynamic-arrays.yaml
 
 
     await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getItem("Sample");
 
-        const sheet = context.workbook.worksheets.getActiveWorksheet();
-        const usedRange = sheet.getUsedRange();
+      // Set G4 to a formula that returns a dynamic array.
+      const targetCell = sheet.getRange("G4");
+      targetCell.formulas = [["=A4:D4"]];
 
-        // Find the ranges with formulas.
-        const formulaRanges = usedRange.getSpecialCells("Formulas");
-        formulaRanges.format.fill.color = "lightgreen";
+      // Get the address of the cells that the dynamic array spilled into.
+      const spillRange = targetCell.getSpillingToRange();
+      spillRange.load("address");
 
-        await context.sync();
+      // Fit the columns for readability.
+      sheet.getUsedRange().format.autofitColumns();
+      await context.sync();
+
+      console.log(`Copying the table headers spilled into ${spillRange.address}.`);
     });
-'Excel.RangeCopyType:enum':
+Excel.Range#find:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-copyfrom.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-find.yaml
 
 
     await Excel.run(async (context) => {
         const sheet = context.workbook.worksheets.getItem("Sample");
-        // Place a label in front of the copied data.
-        sheet.getRange("F2").values = [["Copied Formula"]];
+        const table = sheet.tables.getItem("ExpensesTable");
+        const searchRange = table.getRange();
 
-        // Copy a range preserving the formulas.
-        // Note: non-formula values are copied over as is.
-        sheet.getRange("G2").copyFrom("A1:E1", Excel.RangeCopyType.formulas);
+        // NOTE: If no match is found, an ItemNotFound error
+        // is thrown when Range.find is evaluated.
+        const searchText = (document.getElementById("searchText") as HTMLTextAreaElement).value;
+        const foundRange = searchRange.find(searchText, {
+            completeMatch: isCompleteMatchToggle,
+            matchCase: isMatchCaseToggle,
+            searchDirection: searchDirectionToggle
+        });
+        
+        foundRange.load("address");
         await context.sync();
+
+
+        console.log(foundRange.address);
     });
-'Excel.RangeFormat#textOrientation:member':
+Excel.Range#findOrNullObject:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-text-orientation.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-find.yaml
 
 
     await Excel.run(async (context) => {
         const sheet = context.workbook.worksheets.getItem("Sample");
-        const range = sheet.getRange("B2:E2");
-
-        // Set textOrientation to either an integer between -90 and 90
-        // or to 180 for vertically-oriented text.
-        range.format.textOrientation = 90;
-
+        const table = sheet.tables.getItem("ExpensesTable");
+        const searchRange = table.getRange();
+        const searchText = (document.getElementById("searchText") as HTMLTextAreaElement).value;
+        const foundRange = searchRange.findOrNullObject(searchText, {
+            completeMatch: isCompleteMatchToggle,
+            matchCase: isMatchCaseToggle,
+            searchDirection: searchDirectionToggle
+        });
+        
+        foundRange.load("address");
         await context.sync();
+
+        if (foundRange.isNullObject) {
+            console.log("Text not found");
+        } else {
+            console.log(foundRange.address);
+        }
     });
-'Excel.RangeHyperlink#address:member':
+Excel.Range#getExtendedRange:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-hyperlink.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-get-range-edge.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Orders");
+      // Get the selected range.
+      const range = context.workbook.getSelectedRange();
 
-        let productsRange = sheet.getRange("A3:A5");
-        productsRange.load("values");
-
-        await context.sync();
+      // Specify the direction with the `KeyboardDirection` enum.
+      const direction = Excel.KeyboardDirection.down;
 
-        // Create a hyperlink to a URL 
-        // for each product name in the first table.
-        for (let i = 0; i < productsRange.values.length; i++) {
-            let cellRange = productsRange.getCell(i, 0);
-            let cellText = productsRange.values[i][0];
+      // Get the active cell in the workbook.
+      const activeCell = context.workbook.getActiveCell();
 
-            let hyperlink = {
-                textToDisplay: cellText,
-                screenTip: "Search Bing for '" + cellText + "'",
-                address: "https://www.bing.com/?q=" + cellText
-            }
-            cellRange.hyperlink = hyperlink;
-        }
+      // Get all the cells from the currently selected range to the bottom-most edge of the used range.
+      // This method acts like the Ctrl+Shift+Arrow key keyboard shortcut while a range is selected.
+      const extendedRange = range.getExtendedRange(
+        direction,
+        activeCell // If the selected range contains more than one cell, the active cell must be defined.
+      );
+      extendedRange.select();
 
-        await context.sync();
+      await context.sync();
     });
-'Excel.RangeHyperlink#documentReference:member':
+Excel.Range#getRangeEdge:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-hyperlink.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-get-range-edge.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Orders");
-
-        let productsRange = sheet.getRange("A9:A11");
-        productsRange.load("values");
+      // Get the selected range.
+      const range = context.workbook.getSelectedRange();
 
-        await context.sync();
+      // Specify the direction with the `KeyboardDirection` enum.
+      const direction = Excel.KeyboardDirection.up;
 
-        // Create a hyperlink to a location within the workbook
-        // for each product name in the second table.
-        for (let i = 0; i < productsRange.values.length; i++) {
-            let cellRange = productsRange.getCell(i, 0);
-            let cellText = productsRange.values[i][0];
+      // Get the active cell in the workbook.
+      const activeCell = context.workbook.getActiveCell();
 
-            let hyperlink = {
-                textToDisplay: cellText,
-                screenTip: "Navigate to the '" + cellText + "' worksheet",
-                documentReference: cellText + "!A1"
-            }
-            cellRange.hyperlink = hyperlink;
-        }
+      // Get the top-most cell of the current used range.
+      // This method acts like the Ctrl+Arrow key keyboard shortcut while a range is selected.
+      const rangeEdge = range.getRangeEdge(
+        direction,
+        activeCell // If the selected range contains more than one cell, the active cell must be defined.
+      );
+      rangeEdge.select();
 
-        await context.sync();
+      await context.sync();
     });
-'Excel.RangeHyperlink#screenTip:member':
+Excel.Range#hyperlink:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-hyperlink.yaml
@@ -5831,87 +6395,127 @@
 
         await context.sync();
     });
-'Excel.RangeHyperlink#textToDisplay:member':
+Excel.Range#getIntersectionOrNullObject:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-hyperlink.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-relationships.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Orders");
+        const sheet = context.workbook.worksheets.getItem("Sample");
+        const salesTable = sheet.tables.getItem("SalesTable");
+        const dataRange = salesTable.getDataBodyRange();
 
-        let productsRange = sheet.getRange("A3:A5");
-        productsRange.load("values");
+        // We want the most recent quarter that has data, so
+        // exclude quarters without data and get the last of
+        // the remaining columns.
+        const usedDataRange = dataRange.getUsedRange(true /* valuesOnly */);
+        const currentQuarterRange = usedDataRange.getLastColumn();
+
+        // Asian and European teams have separate contests.
+        const asianSalesRange = sheet.getRange("A2:E4");
+        const europeanSalesRange = sheet.getRange("A5:E7");
+
+        // The data for each chart is the intersection of the
+        // current quarter column and the rows for the continent.
+        const asianContestRange = asianSalesRange.getIntersectionOrNullObject(currentQuarterRange);
+        const europeanContestRange = europeanSalesRange.getIntersectionOrNullObject(currentQuarterRange);
 
+        // Must sync before you can test the output of *OrNullObject
+        // method/property.
         await context.sync();
 
-        // Create a hyperlink to a URL 
-        // for each product name in the first table.
-        for (let i = 0; i < productsRange.values.length; i++) {
-            let cellRange = productsRange.getCell(i, 0);
-            let cellText = productsRange.values[i][0];
+        if (asianContestRange.isNullObject) {
+            // See the declaration of this function for how to
+            // test this code path.
+            reportMissingData("Asian");
+        } else {
+            createContinentChart(
+                sheet,
+                "Asian",
+                asianContestRange,
+                "A9",
+                "F24"
+            );
+        }
 
-            let hyperlink = {
-                textToDisplay: cellText,
-                screenTip: "Search Bing for '" + cellText + "'",
-                address: "https://www.bing.com/?q=" + cellText
-            }
-            cellRange.hyperlink = hyperlink;
+        if (europeanContestRange.isNullObject) {
+            // See the declaration of this function for how to
+            // test this code path.
+            reportMissingData("European");
+        } else {
+            createContinentChart(
+                sheet,
+                "European",
+                europeanContestRange,
+                "A25",
+                "F40"
+            );
         }
 
         await context.sync();
     });
-'Excel.RangeUnderlineStyle:enum':
+Excel.Range#getUsedRange:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-hyperlink.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-relationships.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Orders");
-
-        const productsRange = sheet.getRange("A3:A11");
-        productsRange.load("values");
-
-        await context.sync();
+        const sheet = context.workbook.worksheets.getItem("Sample");
+        const salesTable = sheet.tables.getItem("SalesTable");
+        const dataRange = salesTable.getDataBodyRange();
 
-        // Clear all hyperlinks.
-        for (let i = 0; i < productsRange.values.length; i++) {
-            let cellRange = productsRange.getCell(i, 0);
+        // We want the most recent quarter that has data, so
+        // exclude quarters without data and get the last of
+        // the remaining columns.
+        const usedDataRange = dataRange.getUsedRange(true /* valuesOnly */);
+        const currentQuarterRange = usedDataRange.getLastColumn();
 
-            // Clear the hyperlink.
-            // This removes the hyperlink but does not update text format.
-            cellRange.clear(Excel.ClearApplyTo.hyperlinks);
+        // Asian and European teams have separate contests.
+        const asianSalesRange = sheet.getRange("A2:E4");
+        const europeanSalesRange = sheet.getRange("A5:E7");
 
-            // Update text format.
-            cellRange.format.font.underline = Excel.RangeUnderlineStyle.none;
-            cellRange.format.font.color = "#000000";
-        }
+        // The data for each chart is the intersection of the
+        // current quarter column and the rows for the continent.
+        const asianContestRange = asianSalesRange.getIntersectionOrNullObject(currentQuarterRange);
+        const europeanContestRange = europeanSalesRange.getIntersectionOrNullObject(currentQuarterRange);
 
+        // Must sync before you can test the output of *OrNullObject
+        // method/property.
         await context.sync();
-    });
-'Excel.ReadingOrder:enum':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/style.yaml
 
+        if (asianContestRange.isNullObject) {
+            // See the declaration of this function for how to
+            // test this code path.
+            reportMissingData("Asian");
+        } else {
+            createContinentChart(
+                sheet,
+                "Asian",
+                asianContestRange,
+                "A9",
+                "F24"
+            );
+        }
 
-    await Excel.run(async (context) => {
-        let style = context.workbook.styles.getItem("Diagonal Orientation Style");            
-        style.load("textOrientation, horizontalAlignment, autoIndent, readingOrder, wrapText, includeProtection, shrinkToFit, locked");
+        if (europeanContestRange.isNullObject) {
+            // See the declaration of this function for how to
+            // test this code path.
+            reportMissingData("European");
+        } else {
+            createContinentChart(
+                sheet,
+                "European",
+                europeanContestRange,
+                "A25",
+                "F40"
+            );
+        }
 
         await context.sync();
-
-        console.log("Orientation: " + style.textOrientation);
-        console.log("Horizontal alignment: " + style.horizontalAlignment);
-        console.log("Add indent: " + style.autoIndent);
-        console.log("Reading order: " + style.readingOrder);
-        console.log("Wrap text: " + style.wrapText);
-        console.log("Include protection: " + style.includeProtection);
-        console.log("Shrink to fit: " + style.shrinkToFit);
-        console.log("Style locked: " + style.locked);
     });
-'Excel.RemoveDuplicatesResult#uniqueRemaining:member':
+Excel.Range#removeDuplicates:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-remove-duplicates.yaml
@@ -5928,383 +6532,525 @@
         console.log(deleteResult.removed + " entries with duplicate names removed.");
         console.log(deleteResult.uniqueRemaining + " entries with unique names remain in the range.");
     });
-'Excel.Runtime#enableEvents:member':
+Excel.Range#style:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-disable-events.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/style.yaml
 
 
     await Excel.run(async (context) => {
-        context.runtime.load("enableEvents");
-        await context.sync();
+        let worksheet = context.workbook.worksheets.getItem("Sample");
+        let range = worksheet.getRange("A1:E1");
 
-        // check if events are enabled and toggle accordingly
-        const eventBoolean = !context.runtime.enableEvents
-        context.runtime.enableEvents = eventBoolean;
-        if (eventBoolean) {
-            console.log("Events are currently on.");
-        } else {
-            console.log("Events are currently off.");
-        }
+        // Apply built-in style. 
+        // Styles are in the Home tab ribbon.
+        range.style = Excel.BuiltInStyle.neutral;
+        range.format.horizontalAlignment = "Right";
 
         await context.sync();
     });
-'Excel.SaveBehavior:enum':
+Excel.Range#getUsedRangeOrNullObject:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-save-and-close.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/used-range.yaml
 
 
     await Excel.run(async (context) => {
-        context.workbook.save(Excel.SaveBehavior.prompt);
-    });
-'Excel.SearchDirection:enum':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-find.yaml
+        const sheet = context.workbook.worksheets.getItem("Sample");
+        const salesTable = sheet.tables.getItem("SalesTable");
+        const dataRange = salesTable.getDataBodyRange();
 
+        // Pass true so only cells with values count as used
+        const usedDataRange = dataRange.getUsedRangeOrNullObject(
+            true /* valuesOnly */
+        );
 
-    searchDirectionToggle = searchDirectionToggle ===
-    Excel.SearchDirection.forward ? Excel.SearchDirection.backwards :
-    Excel.SearchDirection.forward;
+        //Must sync before reading value returned from *OrNullObject method/property.
+        await context.sync();
 
-    console.log("Search direction = " + searchDirectionToggle);
-'Excel.SettableCellProperties#style:member':
+        if (usedDataRange.isNullObject) {
+            console.log("Need Data to Make Chart");
+            console.log("To create a meaningful chart, press 'Fill the table' (or add names to the Product column and numbers to some of the other cells). Then press 'Try to create chart' again.");
+        } else {
+            const chart = sheet.charts.add(
+                Excel.ChartType.columnClustered,
+                dataRange,
+                "Columns"
+            );
+            chart.setPosition("A15", "F30");
+            chart.title.text = "Quarterly sales chart";
+            chart.legend.position = "Right";
+            chart.legend.format.fill.setSolidColor("white");
+            chart.dataLabels.format.font.size = 15;
+            chart.dataLabels.format.font.color = "black";
+        }
+
+        await context.sync();
+    });
+Excel.Range#set:member(2):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/cell-properties.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/90-scenarios/multiple-property-set.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getActiveWorksheet();
+        const sheet = context.workbook.worksheets.getItem("Sample");
 
-        // Creating the SettableCellProperties objects to use for the range.
-        // In your add-in, these should be created once, outside the function.
-        const topHeaderProps: Excel.SettableCellProperties = {
-            // The style property takes a string matching the name of an Excel style.
-            // Built-in style names are listed in the `BuiltInStyle` enum.
-            // Note that a style will overwrite any formatting,
-            // so do not use the format property with the style property.
-            style: "Heading1"
-        };
+        const sourceRange = sheet.getRange("B2:E2");
+        sourceRange.load("format/fill/color, format/font/name, format/font/color");
+        await context.sync();
 
-        const headerProps: Excel.SettableCellProperties = {
-            // Any subproperties of format that are not set will not be changed when these cell properties are set.
-            format: {
-                fill: {
-                    color: "Blue"
-                },
-                font: {
-                    color: "White",
-                    bold: true
-                }
-            }
-        };
+        // Set properties based on the loaded and synced 
+        // source range.
+        const targetRange = sheet.getRange("B7:E7");
+        targetRange.set(sourceRange); 
+        targetRange.format.autofitColumns();
+        await context.sync();
+    });
+Excel.RangeAreas#format:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-areas.yaml
 
-        const nonApplicableProps: Excel.SettableCellProperties = {
-            format: {
-                fill: {
-                    pattern: Excel.FillPattern.gray25
-                },
-                font: {
-                    color: "Gray",
-                    italic: true
-                }
-            }
-        };
 
-        const matchupScoreProps: Excel.SettableCellProperties = {
-            format: {
-                borders: {
-                    bottom: {
-                        style: Excel.BorderLineStyle.continuous
-                    },
-                    left: {
-                        style: Excel.BorderLineStyle.continuous
-                    },
-                    right: {
-                        style: Excel.BorderLineStyle.continuous
-                    },
-                    top: {
-                        style: Excel.BorderLineStyle.continuous
-                    }
-                }
-            }
-        };
+    await Excel.run(async (context) => {
 
-        const range = sheet.getRange("A1:E5");
+        const sheet = context.workbook.worksheets.getActiveWorksheet();
+        const usedRange = sheet.getUsedRange();
 
-        // You can use empty JSON objects to avoid changing a cell's properties.
-        range.setCellProperties([
-            [topHeaderProps, {}, {}, {}, {}],
-            [{}, {}, headerProps, headerProps, headerProps],
-            [{}, headerProps, nonApplicableProps, matchupScoreProps, matchupScoreProps],
-            [{}, headerProps, matchupScoreProps, nonApplicableProps, matchupScoreProps],
-            [{}, headerProps, matchupScoreProps, matchupScoreProps, nonApplicableProps]
-        ]);
+        // Find the ranges with formulas.
+        const formulaRanges = usedRange.getSpecialCells("Formulas");
+        formulaRanges.format.fill.color = "lightgreen";
 
-        sheet.getUsedRange().format.autofitColumns();
         await context.sync();
     });
-'Excel.Setting#delete:member(1)':
+Excel.RangeCopyType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/create-get-change-delete-settings.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-copyfrom.yaml
 
 
     await Excel.run(async (context) => {
-        const settings = context.workbook.settings;
-        let needsReview = settings.getItem("NeedsReview");
-        needsReview.delete();
-        needsReview = settings.getItemOrNullObject("NeedsReview");
-
-        await context.sync();
-
-        if (needsReview.isNullObject) {
-            console.log("The setting has been deleted");
-        } else {
-            console.log("The setting was not deleted");
-        }
+        const sheet = context.workbook.worksheets.getItem("Sample");
+        // Place a label in front of the copied data.
+        sheet.getRange("F2").values = [["Copied Formula"]];
 
+        // Copy a range preserving the formulas.
+        // Note: non-formula values are copied over as is.
+        sheet.getRange("G2").copyFrom("A1:E1", Excel.RangeCopyType.formulas);
         await context.sync();
     });
-'Excel.SettingCollection#add:member(1)':
+Excel.RangeFormat#textOrientation:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-text-orientation.yaml
 
 
     await Excel.run(async (context) => {
-        const settings = context.workbook.settings; 
-        settings.onSettingsChanged.add(onChangedSetting);
+        const sheet = context.workbook.worksheets.getItem("Sample");
+        const range = sheet.getRange("B2:E2");
+
+        // Set textOrientation to either an integer between -90 and 90
+        // or to 180 for vertically-oriented text.
+        range.format.textOrientation = 90;
 
         await context.sync();
-        console.log("Settings changed handler registered.");
     });
-'Excel.SettingCollection#getItemOrNullObject:member(1)':
+Excel.RangeHyperlink#address:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/create-get-change-delete-settings.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-hyperlink.yaml
 
 
     await Excel.run(async (context) => {
-        const settings = context.workbook.settings;
-        let needsReview = settings.getItem("NeedsReview");
-        needsReview.delete();
-        needsReview = settings.getItemOrNullObject("NeedsReview");
+        const sheet = context.workbook.worksheets.getItem("Orders");
+
+        let productsRange = sheet.getRange("A3:A5");
+        productsRange.load("values");
 
         await context.sync();
 
-        if (needsReview.isNullObject) {
-            console.log("The setting has been deleted");
-        } else {
-            console.log("The setting was not deleted");
+        // Create a hyperlink to a URL 
+        // for each product name in the first table.
+        for (let i = 0; i < productsRange.values.length; i++) {
+            let cellRange = productsRange.getCell(i, 0);
+            let cellText = productsRange.values[i][0];
+
+            let hyperlink = {
+                textToDisplay: cellText,
+                screenTip: "Search Bing for '" + cellText + "'",
+                address: "https://www.bing.com/?q=" + cellText
+            }
+            cellRange.hyperlink = hyperlink;
         }
 
         await context.sync();
     });
-'Excel.SettingCollection#onSettingsChanged:member':
+Excel.RangeHyperlink#documentReference:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-hyperlink.yaml
 
 
     await Excel.run(async (context) => {
-        const settings = context.workbook.settings; 
-        settings.onSettingsChanged.add(onChangedSetting);
+        const sheet = context.workbook.worksheets.getItem("Orders");
+
+        let productsRange = sheet.getRange("A9:A11");
+        productsRange.load("values");
+
+        await context.sync();
+
+        // Create a hyperlink to a location within the workbook
+        // for each product name in the second table.
+        for (let i = 0; i < productsRange.values.length; i++) {
+            let cellRange = productsRange.getCell(i, 0);
+            let cellText = productsRange.values[i][0];
+
+            let hyperlink = {
+                textToDisplay: cellText,
+                screenTip: "Navigate to the '" + cellText + "' worksheet",
+                documentReference: cellText + "!A1"
+            }
+            cellRange.hyperlink = hyperlink;
+        }
 
         await context.sync();
-        console.log("Settings changed handler registered.");
     });
-'Excel.Shape#delete:member(1)':
+Excel.RangeHyperlink#screenTip:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-create-and-delete.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-hyperlink.yaml
 
 
     await Excel.run(async (context) => {
-        context.workbook.worksheets.getItemOrNullObject("Shapes").delete();
-        const sheet = context.workbook.worksheets.add("Shapes");
+        const sheet = context.workbook.worksheets.getItem("Orders");
 
-        const shapes = sheet.shapes;
+        let productsRange = sheet.getRange("A3:A5");
+        productsRange.load("values");
 
-        // load all the shapes in the collection without loading their properties
-        shapes.load("items/$none");
         await context.sync();
 
-        shapes.items.forEach((shape) => shape.delete());
-        await context.sync();
-    });
-'Excel.Shape#fill:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-create-and-delete.yaml
+        // Create a hyperlink to a URL 
+        // for each product name in the first table.
+        for (let i = 0; i < productsRange.values.length; i++) {
+            let cellRange = productsRange.getCell(i, 0);
+            let cellText = productsRange.values[i][0];
 
+            let hyperlink = {
+                textToDisplay: cellText,
+                screenTip: "Search Bing for '" + cellText + "'",
+                address: "https://www.bing.com/?q=" + cellText
+            }
+            cellRange.hyperlink = hyperlink;
+        }
 
-    await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Shapes");
-        const shape = sheet.shapes.addGeometricShape(Excel.GeometricShapeType.smileyFace);
-        shape.left = 300;
-        shape.top = 100;
-        shape.height = 100;
-        shape.width = 100;
-        shape.fill.foregroundColor = "yellow"
         await context.sync();
     });
-'Excel.Shape#getAsImage:member(1)':
+Excel.RangeHyperlink#textToDisplay:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-images.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-hyperlink.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Shapes");
-        const shape = sheet.shapes.getItem("Image");
-        const result = shape.getAsImage(Excel.PictureFormat.png);
+        const sheet = context.workbook.worksheets.getItem("Orders");
+
+        let productsRange = sheet.getRange("A3:A5");
+        productsRange.load("values");
+
         await context.sync();
 
-        const imageString = result.value;
-        // Your add-in would save this string as a .png file.
-        console.log("The image's Base64-encoded string: " + imageString);
+        // Create a hyperlink to a URL 
+        // for each product name in the first table.
+        for (let i = 0; i < productsRange.values.length; i++) {
+            let cellRange = productsRange.getCell(i, 0);
+            let cellText = productsRange.values[i][0];
+
+            let hyperlink = {
+                textToDisplay: cellText,
+                screenTip: "Search Bing for '" + cellText + "'",
+                address: "https://www.bing.com/?q=" + cellText
+            }
+            cellRange.hyperlink = hyperlink;
+        }
+
+        await context.sync();
     });
-'Excel.Shape#group:member':
+Excel.RangeUnderlineStyle:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-groups.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-hyperlink.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Shapes");
+        const sheet = context.workbook.worksheets.getItem("Orders");
 
-        const shapeGroup = sheet.shapes.getItem("Group").group;
-        shapeGroup.ungroup();
-        console.log("Shapes ungrouped");
+        const productsRange = sheet.getRange("A3:A11");
+        productsRange.load("values");
+
+        await context.sync();
+
+        // Clear all hyperlinks.
+        for (let i = 0; i < productsRange.values.length; i++) {
+            let cellRange = productsRange.getCell(i, 0);
+
+            // Clear the hyperlink.
+            // This removes the hyperlink but does not update text format.
+            cellRange.clear(Excel.ClearApplyTo.hyperlinks);
+
+            // Update text format.
+            cellRange.format.font.underline = Excel.RangeUnderlineStyle.none;
+            cellRange.format.font.color = "#000000";
+        }
 
         await context.sync();
     });
-'Excel.Shape#incrementLeft:member(1)':
+Excel.ReadingOrder:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-move-and-order.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/style.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Shapes");
-        const shape = sheet.shapes.getItem("Square")
-        shape.incrementLeft(-25);
+        let style = context.workbook.styles.getItem("Diagonal Orientation Style");            
+        style.load("textOrientation, horizontalAlignment, autoIndent, readingOrder, wrapText, includeProtection, shrinkToFit, locked");
+
         await context.sync();
+
+        console.log("Orientation: " + style.textOrientation);
+        console.log("Horizontal alignment: " + style.horizontalAlignment);
+        console.log("Add indent: " + style.autoIndent);
+        console.log("Reading order: " + style.readingOrder);
+        console.log("Wrap text: " + style.wrapText);
+        console.log("Include protection: " + style.includeProtection);
+        console.log("Shrink to fit: " + style.shrinkToFit);
+        console.log("Style locked: " + style.locked);
     });
-'Excel.Shape#incrementRotation:member(1)':
+Excel.RemoveDuplicatesResult#uniqueRemaining:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-images.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-remove-duplicates.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Shapes");
-        const shape = sheet.shapes.getItem("Image");
-        shape.incrementRotation(180);
+        const sheet = context.workbook.worksheets.getItem("Sample");
+        const range = sheet.getRange("B2:D11");
+
+        const deleteResult = range.removeDuplicates([0],true);    
+        deleteResult.load();    
         await context.sync();
+
+        console.log(deleteResult.removed + " entries with duplicate names removed.");
+        console.log(deleteResult.uniqueRemaining + " entries with unique names remain in the range.");
     });
-'Excel.Shape#incrementTop:member(1)':
+Excel.Runtime#enableEvents:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-move-and-order.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-disable-events.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Shapes");
-        const shape = sheet.shapes.getItem("Pentagon")
-        shape.incrementTop(25);
+        context.runtime.load("enableEvents");
+        await context.sync();
+
+        // check if events are enabled and toggle accordingly
+        const eventBoolean = !context.runtime.enableEvents
+        context.runtime.enableEvents = eventBoolean;
+        if (eventBoolean) {
+            console.log("Events are currently on.");
+        } else {
+            console.log("Events are currently off.");
+        }
+
         await context.sync();
     });
-'Excel.Shape#line:member':
+Excel.SaveBehavior:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-lines.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-save-and-close.yaml
 
 
     await Excel.run(async (context) => {
-        const shapes = context.workbook.worksheets.getItem("Shapes").shapes;
-        const line = shapes.getItem("StraightLine").line;
-        line.beginArrowheadLength = Excel.ArrowheadLength.long;
-        line.beginArrowheadWidth = Excel.ArrowheadWidth.wide;
-        line.beginArrowheadStyle = Excel.ArrowheadStyle.oval;
+        context.workbook.save(Excel.SaveBehavior.prompt);
+    });
+Excel.SearchDirection:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-find.yaml
 
-        line.endArrowheadLength = Excel.ArrowheadLength.long;
-        line.endArrowheadWidth = Excel.ArrowheadWidth.wide;
-        line.endArrowheadStyle = Excel.ArrowheadStyle.triangle;
 
+    searchDirectionToggle = searchDirectionToggle ===
+    Excel.SearchDirection.forward ? Excel.SearchDirection.backwards :
+    Excel.SearchDirection.forward;
+
+    console.log("Search direction = " + searchDirectionToggle);
+Excel.SettableCellProperties#style:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/cell-properties.yaml
+
+
+    await Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getActiveWorksheet();
+
+        // Creating the SettableCellProperties objects to use for the range.
+        // In your add-in, these should be created once, outside the function.
+        const topHeaderProps: Excel.SettableCellProperties = {
+            // The style property takes a string matching the name of an Excel style.
+            // Built-in style names are listed in the `BuiltInStyle` enum.
+            // Note that a style will overwrite any formatting,
+            // so do not use the format property with the style property.
+            style: "Heading1"
+        };
+
+        const headerProps: Excel.SettableCellProperties = {
+            // Any subproperties of format that are not set will not be changed when these cell properties are set.
+            format: {
+                fill: {
+                    color: "Blue"
+                },
+                font: {
+                    color: "White",
+                    bold: true
+                }
+            }
+        };
+
+        const nonApplicableProps: Excel.SettableCellProperties = {
+            format: {
+                fill: {
+                    pattern: Excel.FillPattern.gray25
+                },
+                font: {
+                    color: "Gray",
+                    italic: true
+                }
+            }
+        };
+
+        const matchupScoreProps: Excel.SettableCellProperties = {
+            format: {
+                borders: {
+                    bottom: {
+                        style: Excel.BorderLineStyle.continuous
+                    },
+                    left: {
+                        style: Excel.BorderLineStyle.continuous
+                    },
+                    right: {
+                        style: Excel.BorderLineStyle.continuous
+                    },
+                    top: {
+                        style: Excel.BorderLineStyle.continuous
+                    }
+                }
+            }
+        };
+
+        const range = sheet.getRange("A1:E5");
+
+        // You can use empty JSON objects to avoid changing a cell's properties.
+        range.setCellProperties([
+            [topHeaderProps, {}, {}, {}, {}],
+            [{}, {}, headerProps, headerProps, headerProps],
+            [{}, headerProps, nonApplicableProps, matchupScoreProps, matchupScoreProps],
+            [{}, headerProps, matchupScoreProps, nonApplicableProps, matchupScoreProps],
+            [{}, headerProps, matchupScoreProps, matchupScoreProps, nonApplicableProps]
+        ]);
+
+        sheet.getUsedRange().format.autofitColumns();
         await context.sync();
     });
-'Excel.Shape#lockAspectRatio:member':
+Excel.Setting#delete:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-move-and-order.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/create-get-change-delete-settings.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Shapes");
-        const shape = sheet.shapes.getItem("Octagon")
-        shape.lockAspectRatio = true;
-        shape.scaleHeight(1.25, Excel.ShapeScaleType.currentSize);
+        const settings = context.workbook.settings;
+        let needsReview = settings.getItem("NeedsReview");
+        needsReview.delete();
+        needsReview = settings.getItemOrNullObject("NeedsReview");
+
+        await context.sync();
+
+        if (needsReview.isNullObject) {
+            console.log("The setting has been deleted");
+        } else {
+            console.log("The setting was not deleted");
+        }
+
         await context.sync();
     });
-'Excel.Shape#rotation:member':
+Excel.SettingCollection#add:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-create-and-delete.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Shapes");
-        const shape = sheet.shapes.addGeometricShape(Excel.GeometricShapeType.triangle);
-        shape.left = 100;
-        shape.top = 300;
-        shape.height = 150;
-        shape.width = 200;
-        shape.rotation = 45;
-        shape.fill.clear();
+        const settings = context.workbook.settings; 
+        settings.onSettingsChanged.add(onChangedSetting);
+
         await context.sync();
+        console.log("Settings changed handler registered.");
     });
-'Excel.Shape#scaleHeight:member(1)':
+Excel.SettingCollection#onSettingsChanged:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-move-and-order.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Shapes");
-        const shape = sheet.shapes.getItem("Octagon")
-        shape.lockAspectRatio = true;
-        shape.scaleHeight(1.25, Excel.ShapeScaleType.currentSize);
+        const settings = context.workbook.settings; 
+        settings.onSettingsChanged.add(onChangedSetting);
+
         await context.sync();
+        console.log("Settings changed handler registered.");
     });
-'Excel.Shape#setZOrder:member(1)':
+Excel.SettingCollection#getItemOrNullObject:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-move-and-order.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/create-get-change-delete-settings.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Shapes");
-        const shape = sheet.shapes.getItem("Octagon")
-        shape.setZOrder(Excel.ShapeZOrder.sendBackward);
+        const settings = context.workbook.settings;
+        let needsReview = settings.getItem("NeedsReview");
+        needsReview.delete();
+        needsReview = settings.getItemOrNullObject("NeedsReview");
+
+        await context.sync();
+
+        if (needsReview.isNullObject) {
+            console.log("The setting has been deleted");
+        } else {
+            console.log("The setting was not deleted");
+        }
+
         await context.sync();
     });
-'Excel.ShapeAutoSize:enum':
+Excel.Shape#delete:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-textboxes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-create-and-delete.yaml
 
 
     await Excel.run(async (context) => {
-        const shapes = context.workbook.worksheets.getItem("Shapes").shapes;
-        const textbox = shapes.getItem("Textbox");
-        textbox.textFrame.autoSizeSetting = Excel.ShapeAutoSize.autoSizeShapeToFitText;
+        context.workbook.worksheets.getItemOrNullObject("Shapes").delete();
+        const sheet = context.workbook.worksheets.add("Shapes");
+
+        const shapes = sheet.shapes;
+
+        // load all the shapes in the collection without loading their properties
+        shapes.load("items/$none");
+        await context.sync();
+
+        shapes.items.forEach((shape) => shape.delete());
         await context.sync();
     });
-'Excel.ShapeCollection#addGeometricShape:member(1)':
+Excel.Shape#fill:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-create-and-delete.yaml
@@ -6312,14 +7058,32 @@
 
     await Excel.run(async (context) => {
         const sheet = context.workbook.worksheets.getItem("Shapes");
-        const shape = sheet.shapes.addGeometricShape(Excel.GeometricShapeType.hexagon);
-        shape.left = 5;
-        shape.top = 5;
-        shape.height = 175;
+        const shape = sheet.shapes.addGeometricShape(Excel.GeometricShapeType.smileyFace);
+        shape.left = 300;
+        shape.top = 100;
+        shape.height = 100;
+        shape.width = 100;
+        shape.fill.foregroundColor = "yellow"
+        await context.sync();
+    });
+Excel.Shape#rotation:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-create-and-delete.yaml
+
+
+    await Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getItem("Shapes");
+        const shape = sheet.shapes.addGeometricShape(Excel.GeometricShapeType.triangle);
+        shape.left = 100;
+        shape.top = 300;
+        shape.height = 150;
         shape.width = 200;
+        shape.rotation = 45;
+        shape.fill.clear();
         await context.sync();
     });
-'Excel.ShapeCollection#addGroup:member(1)':
+Excel.Shape#group:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-groups.yaml
@@ -6327,26 +7091,177 @@
 
     await Excel.run(async (context) => {
         const sheet = context.workbook.worksheets.getItem("Shapes");
-        const square = sheet.shapes.getItem("Square");
-        const pentagon = sheet.shapes.getItem("Pentagon");
-        const octagon = sheet.shapes.getItem("Octagon");
 
-        const shapeGroup = sheet.shapes.addGroup([square, pentagon, octagon]);
-        shapeGroup.name = "Group";
-        console.log("Shapes grouped");
+        const shapeGroup = sheet.shapes.getItem("Group").group;
+        shapeGroup.ungroup();
+        console.log("Shapes ungrouped");
 
         await context.sync();
     });
-'Excel.ShapeCollection#addImage:member(1)':
+Excel.Shape#getAsImage:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-images.yaml
 
 
-    const myFile = <HTMLInputElement>document.getElementById("selectedFile");
-
-    const reader = new FileReader();
-
+    await Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getItem("Shapes");
+        const shape = sheet.shapes.getItem("Image");
+        const result = shape.getAsImage(Excel.PictureFormat.png);
+        await context.sync();
+
+        const imageString = result.value;
+        // Your add-in would save this string as a .png file.
+        console.log("The image's Base64-encoded string: " + imageString);
+    });
+Excel.Shape#incrementRotation:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-images.yaml
+
+
+    await Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getItem("Shapes");
+        const shape = sheet.shapes.getItem("Image");
+        shape.incrementRotation(180);
+        await context.sync();
+    });
+Excel.Shape#line:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-lines.yaml
+
+
+    await Excel.run(async (context) => {
+        const shapes = context.workbook.worksheets.getItem("Shapes").shapes;
+        const line = shapes.getItem("StraightLine").line;
+        line.beginArrowheadLength = Excel.ArrowheadLength.long;
+        line.beginArrowheadWidth = Excel.ArrowheadWidth.wide;
+        line.beginArrowheadStyle = Excel.ArrowheadStyle.oval;
+
+        line.endArrowheadLength = Excel.ArrowheadLength.long;
+        line.endArrowheadWidth = Excel.ArrowheadWidth.wide;
+        line.endArrowheadStyle = Excel.ArrowheadStyle.triangle;
+
+        await context.sync();
+    });
+Excel.Shape#incrementLeft:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-move-and-order.yaml
+
+
+    await Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getItem("Shapes");
+        const shape = sheet.shapes.getItem("Square")
+        shape.incrementLeft(-25);
+        await context.sync();
+    });
+Excel.Shape#incrementTop:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-move-and-order.yaml
+
+
+    await Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getItem("Shapes");
+        const shape = sheet.shapes.getItem("Pentagon")
+        shape.incrementTop(25);
+        await context.sync();
+    });
+Excel.Shape#lockAspectRatio:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-move-and-order.yaml
+
+
+    await Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getItem("Shapes");
+        const shape = sheet.shapes.getItem("Octagon")
+        shape.lockAspectRatio = true;
+        shape.scaleHeight(1.25, Excel.ShapeScaleType.currentSize);
+        await context.sync();
+    });
+Excel.Shape#scaleHeight:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-move-and-order.yaml
+
+
+    await Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getItem("Shapes");
+        const shape = sheet.shapes.getItem("Octagon")
+        shape.lockAspectRatio = true;
+        shape.scaleHeight(1.25, Excel.ShapeScaleType.currentSize);
+        await context.sync();
+    });
+Excel.Shape#setZOrder:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-move-and-order.yaml
+
+
+    await Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getItem("Shapes");
+        const shape = sheet.shapes.getItem("Octagon")
+        shape.setZOrder(Excel.ShapeZOrder.sendBackward);
+        await context.sync();
+    });
+Excel.ShapeAutoSize:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-textboxes.yaml
+
+
+    await Excel.run(async (context) => {
+        const shapes = context.workbook.worksheets.getItem("Shapes").shapes;
+        const textbox = shapes.getItem("Textbox");
+        textbox.textFrame.autoSizeSetting = Excel.ShapeAutoSize.autoSizeShapeToFitText;
+        await context.sync();
+    });
+Excel.ShapeCollection#addGeometricShape:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-create-and-delete.yaml
+
+
+    await Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getItem("Shapes");
+        const shape = sheet.shapes.addGeometricShape(Excel.GeometricShapeType.hexagon);
+        shape.left = 5;
+        shape.top = 5;
+        shape.height = 175;
+        shape.width = 200;
+        await context.sync();
+    });
+Excel.ShapeCollection#addGroup:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-groups.yaml
+
+
+    await Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getItem("Shapes");
+        const square = sheet.shapes.getItem("Square");
+        const pentagon = sheet.shapes.getItem("Pentagon");
+        const octagon = sheet.shapes.getItem("Octagon");
+
+        const shapeGroup = sheet.shapes.addGroup([square, pentagon, octagon]);
+        shapeGroup.name = "Group";
+        console.log("Shapes grouped");
+
+        await context.sync();
+    });
+Excel.ShapeCollection#addImage:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-images.yaml
+
+
+    const myFile = document.getElementById("selectedFile") as HTMLInputElement;
+
+    const reader = new FileReader();
+
 
     reader.onload = (event) => {
         Excel.run((context) => {
@@ -6363,7 +7278,7 @@
     // Read in the image file as a data URL.
 
     reader.readAsDataURL(myFile.files[0]);
-'Excel.ShapeCollection#addLine:member(1)':
+Excel.ShapeCollection#addLine:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-lines.yaml
@@ -6375,7 +7290,7 @@
         line.name = "StraightLine";
         await context.sync();
     });
-'Excel.ShapeCollection#addTextBox:member(1)':
+Excel.ShapeCollection#addTextBox:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-textboxes.yaml
@@ -6391,7 +7306,7 @@
         textbox.name = "Textbox";
         await context.sync();
     });
-'Excel.ShapeGroup#ungroup:member(1)':
+Excel.ShapeGroup#ungroup:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-groups.yaml
@@ -6406,7 +7321,7 @@
 
         await context.sync();
     });
-'Excel.ShapeScaleType:enum':
+Excel.ShapeScaleType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-move-and-order.yaml
@@ -6419,7 +7334,7 @@
         shape.scaleHeight(1.25, Excel.ShapeScaleType.currentSize);
         await context.sync();
     });
-'Excel.ShapeTextHorizontalAlignment:enum':
+Excel.ShapeTextHorizontalAlignment:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-textboxes.yaml
@@ -6431,7 +7346,7 @@
         textbox.textFrame.horizontalAlignment = Excel.ShapeTextHorizontalAlignment.center;
         await context.sync();
     });
-'Excel.ShapeZOrder:enum':
+Excel.ShapeZOrder:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-move-and-order.yaml
@@ -6443,7 +7358,7 @@
         shape.setZOrder(Excel.ShapeZOrder.sendBackward);
         await context.sync();
     });
-'Excel.SheetVisibility:enum':
+Excel.SheetVisibility:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-visibility.yaml
@@ -6464,7 +7379,7 @@
             console.log("Cannot hide the only visible worksheet");
         }
     });
-'Excel.ShowAsCalculation:enum':
+Excel.ShowAsCalculation:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-calculations.yaml
@@ -6491,7 +7406,7 @@
         wholesaleDataHierarchy.showAs = wholesaleShowAs;
         await context.sync();
     });
-'Excel.ShowAsRule#baseItem:member':
+Excel.ShowAsRule#baseItem:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-calculations.yaml
@@ -6521,7 +7436,7 @@
         wholesaleDataHierarchy.showAs = wholesaleShowAs;
         await context.sync();
     });
-'Excel.Slicer#clearFilters:member(1)':
+Excel.Slicer#clearFilters:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-slicer.yaml
@@ -6532,7 +7447,7 @@
         slicer.clearFilters();
         await context.sync();
     });
-'Excel.Slicer#delete:member(1)':
+Excel.Slicer#delete:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-slicer.yaml
@@ -6543,7 +7458,7 @@
         sheet.slicers.getItemAt(0).delete();
         await context.sync();
     });
-'Excel.Slicer#selectItems:member(1)':
+Excel.Slicer#selectItems:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-slicer.yaml
@@ -6554,7 +7469,7 @@
         slicer.selectItems(["Lemon", "Lime", "Orange"]);
         await context.sync();
     });
-'Excel.Slicer#style:member':
+Excel.Slicer#style:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-slicer.yaml
@@ -6565,7 +7480,7 @@
         slicer.style = "SlicerStyleLight6";
         await context.sync();
     });
-'Excel.SlicerCollection#add:member(1)':
+Excel.SlicerCollection#add:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-slicer.yaml
@@ -6580,7 +7495,7 @@
         slicer.name = "Fruit Slicer";
         await context.sync();
     });
-'Excel.SlicerCollection#getItem:member(1)':
+Excel.SlicerCollection#getItem:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-slicer.yaml
@@ -6595,7 +7510,7 @@
         slicer.width = 150;
         await context.sync();
     });
-'Excel.SortOn:enum':
+Excel.SortOn:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/event-column-and-row-sort.yaml
@@ -6625,7 +7540,7 @@
             await context.sync();
         });
     }
-'Excel.SortOrientation:enum':
+Excel.SortOrientation:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/event-column-and-row-sort.yaml
@@ -6655,7 +7570,7 @@
             await context.sync();
         });
     }
-'CustomFunctions.StreamingInvocation#setResult:member':
+CustomFunctions.StreamingInvocation#setResult:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/16-custom-functions/streaming-function.yaml
@@ -6681,7 +7596,7 @@
         clearInterval(timer);
       }
     }
-'Excel.Style#delete:member(1)':
+Excel.Style#delete:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/style.yaml
@@ -6698,7 +7613,7 @@
 
         console.log("Successfully deleted the diagonal orientation style from the Home tab ribbon.");
     });
-'Excel.Style#font:member':
+Excel.Style#font:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/style.yaml
@@ -6718,7 +7633,7 @@
         console.log("Size: " + style.font.size);
         console.log("Fill color: " + style.fill.color);
     });
-'Excel.Style#horizontalAlignment:member':
+Excel.Style#horizontalAlignment:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/style.yaml
@@ -6735,7 +7650,7 @@
 
         await context.sync();
     });
-'Excel.Style#load:member(1)':
+Excel.Style#load:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/style.yaml
@@ -6756,7 +7671,7 @@
         console.log("Shrink to fit: " + style.shrinkToFit);
         console.log("Style locked: " + style.locked);
     });
-'Excel.StyleCollection#add:member(1)':
+Excel.StyleCollection#add:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/style.yaml
@@ -6782,7 +7697,7 @@
 
         console.log("Successfully added a new style with diagonal orientation to the Home tab ribbon.");
     });
-'Excel.StyleCollection#getItem:member(1)':
+Excel.StyleCollection#getItem:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/style.yaml
@@ -6808,7 +7723,7 @@
 
         console.log("Successfully added a new style with diagonal orientation to the Home tab ribbon.");
     });
-'Excel.Table#onChanged:member':
+Excel.Table#onChanged:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-table-changed.yaml
@@ -6821,7 +7736,7 @@
         await context.sync();
         console.log("A handler has been registered for the onChanged event");
     });
-'Excel.Table#onSelectionChanged:member':
+Excel.Table#onSelectionChanged:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-table-changed.yaml
@@ -6834,7 +7749,7 @@
         await context.sync();
         console.log("A handler has been registered for table onSelectionChanged event");
     });
-'Excel.Table#resize:member(1)':
+Excel.Table#resize:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/46-table/resize-table.yaml
@@ -6850,7 +7765,7 @@
       
       await context.sync();
     });
-'Excel.TableChangedEventArgs#details:member':
+Excel.TableChangedEventArgs#details:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/data-change-event-details.yaml
@@ -6865,7 +7780,7 @@
               + ` now is ${details.valueAfter}(${details.valueTypeAfter})`);
         });
     }
-'Excel.TableChangedEventArgs#tableId:member':
+Excel.TableChangedEventArgs#tableId:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-tablecollection-changed.yaml
@@ -6884,7 +7799,7 @@
             console.log("Worksheet Id : " + worksheet.name);
         });
     }
-'Excel.TableChangedEventArgs#worksheetId:member':
+Excel.TableChangedEventArgs#worksheetId:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-tablecollection-changed.yaml
@@ -6903,7 +7818,47 @@
             console.log("Worksheet Id : " + worksheet.name);
         });
     }
-'Excel.TableCollection#onChanged:member':
+Excel.TableCollection:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-cell-control.yaml
+
+
+    // Add checkboxes to the table.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getActiveWorksheet();
+
+      // Get the second column in the table, without the header.
+      const range = sheet.tables.getItem("FruitTable").columns.getItem("Analysis").getDataBodyRange();
+
+      // Change the boolean values to checkboxes.
+      range.control = {
+        type: Excel.CellControlType.checkbox
+      };
+      await context.sync();
+    });
+Excel.TableCollection#getItem:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-cell-control.yaml
+
+
+    // Remove checkboxes from the table.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getActiveWorksheet();
+
+      // Get the second column in the table, without the header.
+      const range = sheet.tables.getItem("FruitTable").columns.getItem("Analysis").getDataBodyRange();
+
+      // Change the checkboxes back to boolean values.
+      range.control = {
+        type: Excel.CellControlType.empty
+      };
+      await context.sync();
+    });
+Excel.TableCollection#onChanged:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-tablecollection-changed.yaml
@@ -6916,7 +7871,65 @@
         await context.sync();
         console.log("A handler has been registered for the table collection onChanged event");
     });
-'Excel.TableSelectionChangedEventArgs#address:member':
+Excel.TableColumn#getDataBodyRange:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-cell-control.yaml
+
+
+    // Add checkboxes to the table.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getActiveWorksheet();
+
+      // Get the second column in the table, without the header.
+      const range = sheet.tables.getItem("FruitTable").columns.getItem("Analysis").getDataBodyRange();
+
+      // Change the boolean values to checkboxes.
+      range.control = {
+        type: Excel.CellControlType.checkbox
+      };
+      await context.sync();
+    });
+Excel.TableColumnCollection:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-cell-control.yaml
+
+
+    // Add checkboxes to the table.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getActiveWorksheet();
+
+      // Get the second column in the table, without the header.
+      const range = sheet.tables.getItem("FruitTable").columns.getItem("Analysis").getDataBodyRange();
+
+      // Change the boolean values to checkboxes.
+      range.control = {
+        type: Excel.CellControlType.checkbox
+      };
+      await context.sync();
+    });
+Excel.TableColumnCollection#getItem:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-cell-control.yaml
+
+
+    // Remove all content from the Analysis column.
+
+    await Excel.run(async (context) => {
+      const sheet = context.workbook.worksheets.getActiveWorksheet();
+
+      // Get the second column in the table, without the header.
+      const range = sheet.tables.getItem("FruitTable").columns.getItem("Analysis").getDataBodyRange();
+
+      // Clear all the data from the second column.
+      range.clearOrResetContents();
+      await context.sync();
+    });
+Excel.TableSelectionChangedEventArgs#address:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-table-changed.yaml
@@ -6927,7 +7940,7 @@
             console.log("Handler for table onSelectionChanged event has been triggered. The new selection is: " + args.address);
         });
     }
-'Excel.TextConditionalFormat#format:member':
+Excel.TextConditionalFormat#format:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -6943,7 +7956,7 @@
 
         await context.sync();
     });
-'Excel.TextConditionalFormat#rule:member':
+Excel.TextConditionalFormat#rule:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml
@@ -6959,7 +7972,7 @@
 
         await context.sync();
     });
-'Excel.TextFrame#deleteText:member(1)':
+Excel.TextFrame#deleteText:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-textboxes.yaml
@@ -6971,7 +7984,7 @@
         textbox.textFrame.deleteText();
         await context.sync();
     });
-'Excel.ValueFilterCondition:enum':
+Excel.ValueFilterCondition:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-pivotfilters.yaml
@@ -6998,7 +8011,7 @@
 
       await context.sync();
     });
-'Excel.VerticalAlignment:enum':
+Excel.VerticalAlignment:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/style.yaml
@@ -7013,7 +8026,7 @@
 
         await context.sync();
     });
-'Excel.WebImageCellValue#address:member':
+Excel.WebImageCellValue#address:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-web-image.yaml
@@ -7041,7 +8054,7 @@
       // Open the image URL in a new browser tab.
       const tab = window.open(webImageData.address, "_blank");
     });
-'Excel.WebImageCellValue#type:member':
+Excel.WebImageCellValue#type:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-web-image.yaml
@@ -7051,8 +8064,8 @@
 
     await Excel.run(async (context) => {
       // Retrieve image data from the task pane and then clear the input fields.
-      const imageUrl = $("#url").val() as string;
-      const imageAltText = $("#alt-text").val() as string;
+      const imageUrl = (document.getElementById("url") as HTMLInputElement).value;
+      const imageAltText = (document.getElementById("alt-text") as HTMLInputElement).value;
       clearForm();
 
       // Load the active cell.
@@ -7077,115 +8090,63 @@
 
       await context.sync();
     });
-'Excel.Workbook#close:member(1)':
+Excel.Workbook#properties:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-save-and-close.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/26-document/properties.yaml
 
 
     await Excel.run(async (context) => {
-        context.workbook.close(Excel.CloseBehavior.save);
-    });
-'Excel.Workbook#getActiveCell:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-get-active-cell.yaml
-
+        let titleValue = "Excel document properties API";
+        let subjectValue = "Set and get document properties";
+        let keywordsValue = "Set and get operations";
+        let commentsValue = "This is an Excel document properties API code sample";
+        let categoryValue = "Office Add-ins";
+        let managerValue = "John";
+        let companyValue = "Microsoft";
 
-    await Excel.run(async (context) => {
+        let docProperties = context.workbook.properties;
 
-        let myWorkbook = context.workbook;
-        let activeCell = myWorkbook.getActiveCell();
-        activeCell.load("address");
+        // Set the writeable document properties.
+        docProperties.title = titleValue;
+        docProperties.subject = subjectValue;
+        docProperties.keywords = keywordsValue;
+        docProperties.comments = commentsValue;
+        docProperties.category = categoryValue;
+        docProperties.manager = managerValue;
+        docProperties.company = companyValue;
 
         await context.sync();
-        
-        console.log("The active cell is " + activeCell.address);
+
+        console.log("Set the following document properties: title, subject, keywords, comments, category, manager, company.");
     });
-'Excel.Workbook#getSelectedRanges:member(1)':
+Excel.Workbook#onActivated:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-areas.yaml
-
-
-    await Excel.run(async (context) => {
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-activated.yaml
 
-        const selectedRanges = context.workbook.getSelectedRanges();
-        selectedRanges.format.fill.color = "lightblue";
 
-        await context.sync();
-    })
-'Excel.Workbook#insertWorksheetsFromBase64:member(1)':
+    async function workbookActivated(event: Excel.WorkbookActivatedEventArgs) {
+      await Excel.run(async (context) => {
+        // Callback function for when the workbook is activated.
+        console.log("The workbook was activated.");
+      });
+    }
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-insert-external-worksheets.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-activated.yaml
 
-    // Retrieve the file and set up an HTML FileReader element. 
 
-    const myFile = <HTMLInputElement>document.getElementById("file");
+    await Excel.run(async (context) => {
+      const workbook = context.workbook;
 
-    const reader = new FileReader();
-
-
-    reader.onload = (event) => {
-        // Remove the metadata before the Base64-encoded string.
-        const startIndex = reader.result.toString().indexOf("base64,");
-        externalWorkbook = reader.result.toString().substr(startIndex + 7);
-    };
-
-
-    // Read the file as a data URL so that we can parse the Base64-encoded
-    string.
-
-    reader.readAsDataURL(myFile.files[0]);
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-insert-external-worksheets.yaml
-
-
-    await Excel.run(async (context) => {
-        // Retrieve the source workbook.
-        const workbook = context.workbook;
-        
-        // Set up the insert options.
-        const options = {
-            sheetNamesToInsert: [], // Insert all the worksheets from the source workbook.
-            positionType: Excel.WorksheetPositionType.after, // Insert after the `relativeTo` sheet.
-            relativeTo: "Sheet1" // The sheet relative to which the other worksheets will be inserted. Used with `positionType`.
-        };
-        
-        // Insert the new worksheets.
-        workbook.insertWorksheetsFromBase64(externalWorkbook, options);
-        await context.sync();
-    });
-'Excel.Workbook#onActivated:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-activated.yaml
-
-
-    async function workbookActivated(event: Excel.WorkbookActivatedEventArgs) {
-      await Excel.run(async (context) => {
-        // Callback function for when the workbook is activated.
-        console.log("The workbook was activated.");
-      });
-    }
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-activated.yaml
-
-
-    await Excel.run(async (context) => {
-      const workbook = context.workbook;
-
-      // Register the workbook activated event handler.
-      workbook.onActivated.add(workbookActivated);
+      // Register the workbook activated event handler.
+      workbook.onActivated.add(workbookActivated);
 
       await context.sync();
       console.log("Added event handler for workbook activated.");
     });
-'Excel.Workbook#pivotTables:member':
+Excel.Workbook#pivotTables:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-get-pivottables.yaml
@@ -7203,46 +8164,20 @@
         console.log(`\t${pivotTable.name}`);
       });
     });
-'Excel.Workbook#properties:member':
+Excel.Workbook#getSelectedRanges:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/26-document/properties.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-areas.yaml
 
 
     await Excel.run(async (context) => {
-        let titleValue = "Excel document properties API";
-        let subjectValue = "Set and get document properties";
-        let keywordsValue = "Set and get operations";
-        let commentsValue = "This is an Excel document properties API code sample";
-        let categoryValue = "Office Add-ins";
-        let managerValue = "John";
-        let companyValue = "Microsoft";
-
-        let docProperties = context.workbook.properties;
 
-        // Set the writeable document properties.
-        docProperties.title = titleValue;
-        docProperties.subject = subjectValue;
-        docProperties.keywords = keywordsValue;
-        docProperties.comments = commentsValue;
-        docProperties.category = categoryValue;
-        docProperties.manager = managerValue;
-        docProperties.company = companyValue;
+        const selectedRanges = context.workbook.getSelectedRanges();
+        selectedRanges.format.fill.color = "lightblue";
 
         await context.sync();
-
-        console.log("Set the following document properties: title, subject, keywords, comments, category, manager, company.");
-    });
-'Excel.Workbook#save:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-save-and-close.yaml
-
-
-    await Excel.run(async (context) => {
-        context.workbook.save(Excel.SaveBehavior.save);
-    });
-'Excel.Workbook#styles:member':
+    })
+Excel.Workbook#styles:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/style.yaml
@@ -7268,7 +8203,113 @@
 
         console.log("Successfully added a new style with diagonal orientation to the Home tab ribbon.");
     });
-'Excel.WorkbookProtection#protect:member(1)':
+Excel.Workbook#getActiveShapeOrNullObject:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-get-active.yaml
+
+
+    // This method gets the active shape and displays it as an image in the task
+    pane.
+
+    await Excel.run(async (context) => {
+      // Get the currently active shape, if any.
+      const activeShape = context.workbook.getActiveShapeOrNullObject();
+      
+      if (activeShape) {
+        // Convert the active shape to an image.
+        const shapeImage = activeShape.getAsImage(Excel.PictureFormat.png);
+        await context.sync();
+        
+        // Display the image in the task pane.
+        const imageContainer = document.getElementById("image");
+        imageContainer.innerHTML = ''; // Clear the container before adding a new image.
+        const imageElement = document.createElement("img");
+        imageElement.src = "data:image/png;base64," + shapeImage.value;
+        imageContainer.appendChild(imageElement);              
+      } else {
+        console.log("No active shape");
+      }
+    });
+Excel.Workbook#getActiveCell:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-get-active-cell.yaml
+
+
+    await Excel.run(async (context) => {
+
+        let myWorkbook = context.workbook;
+        let activeCell = myWorkbook.getActiveCell();
+        activeCell.load("address");
+
+        await context.sync();
+        
+        console.log("The active cell is " + activeCell.address);
+    });
+Excel.Workbook#insertWorksheetsFromBase64:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-insert-external-worksheets.yaml
+
+
+    // Retrieve the file and set up an HTML FileReader element. 
+
+    const myFile = document.getElementById("file") as HTMLInputElement;
+
+    const reader = new FileReader();
+
+
+    reader.onload = (event) => {
+        // Remove the metadata before the Base64-encoded string.
+        const startIndex = reader.result.toString().indexOf("base64,");
+        externalWorkbook = reader.result.toString().substr(startIndex + 7);
+    };
+
+
+    // Read the file as a data URL so that we can parse the Base64-encoded
+    string.
+
+    reader.readAsDataURL(myFile.files[0]);
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-insert-external-worksheets.yaml
+
+
+    await Excel.run(async (context) => {
+        // Retrieve the source workbook.
+        const workbook = context.workbook;
+        
+        // Set up the insert options.
+        const options = {
+            sheetNamesToInsert: [], // Insert all the worksheets from the source workbook.
+            positionType: Excel.WorksheetPositionType.after, // Insert after the `relativeTo` sheet.
+            relativeTo: "Sheet1" // The sheet relative to which the other worksheets will be inserted. Used with `positionType`.
+        };
+        
+        // Insert the new worksheets.
+        workbook.insertWorksheetsFromBase64(externalWorkbook, options);
+        await context.sync();
+    });
+Excel.Workbook#close:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-save-and-close.yaml
+
+
+    await Excel.run(async (context) => {
+        context.workbook.close(Excel.CloseBehavior.save);
+    });
+Excel.Workbook#save:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-save-and-close.yaml
+
+
+    await Excel.run(async (context) => {
+        context.workbook.save(Excel.SaveBehavior.save);
+    });
+Excel.WorkbookProtection#protect:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/data-protection.yaml
@@ -7288,7 +8329,7 @@
             workbook.protection.protect(password);
         }
     });
-'Excel.WorkbookProtection#unprotect:member(1)':
+Excel.WorkbookProtection#unprotect:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/data-protection.yaml
@@ -7302,7 +8343,7 @@
         let workbook = context.workbook;
         workbook.protection.unprotect(password);
     });
-'Excel.WorkbookRangeAreas#areas:member':
+Excel.WorkbookRangeAreas#areas:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/precedents.yaml
@@ -7327,49 +8368,7 @@
       }
       await context.sync();
     });
-'Excel.Worksheet#autoFilter:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-auto-filter.yaml
-
-
-    // This function adds a percentage AutoFilter to the active worksheet 
-
-    // and applies the filter to a column of the used range.
-
-    await Excel.run(async (context) => {
-        // Retrieve the active worksheet and the used range on that worksheet.
-        const sheet = context.workbook.worksheets.getActiveWorksheet();
-        const farmData = sheet.getUsedRange();
-
-        // Add a filter that will only show the rows with the top 50% of values in column 3.
-        sheet.autoFilter.apply(farmData, 3, {
-            criterion1: "50",
-            filterOn: Excel.FilterOn.topPercent
-        });
-
-        await context.sync();
-    });
-'Excel.Worksheet#copy:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-copy.yaml
-
-
-    await Excel.run(async (context) => {
-
-        let myWorkbook = context.workbook;
-        let sampleSheet = myWorkbook.worksheets.getActiveWorksheet();
-        let copiedSheet = sampleSheet.copy("End")
-
-        sampleSheet.load("name");
-        copiedSheet.load("name");
-
-        await context.sync();
-
-        console.log("'" + sampleSheet.name + "' was copied to '" + copiedSheet.name + "'")
-    });
-'Excel.Worksheet#customProperties:member':
+Excel.Worksheet#customProperties:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/26-document/custom-properties.yaml
@@ -7387,137 +8386,78 @@
         console.log(`${property.key}:${property.value}`);
       });
     });
-'Excel.Worksheet#findAllOrNullObject:member(1)':
+Excel.Worksheet#onColumnSorted:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-find-all.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/event-column-and-row-sort.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Sample");
-        const foundRanges = sheet.findAllOrNullObject("Complete", {
-            completeMatch: true,
-            matchCase: false
-        });
+        console.log("Adding column handler");
+        const sheet = context.workbook.worksheets.getActiveWorksheet();
 
-        await context.sync();
+        // This will fire whenever a column has been moved as the result of a sort action.
+        sheet.onColumnSorted.add((event) => {
+            return Excel.run((context) => {
+                console.log("Column sorted: " + event.address);
+                const sheet = context.workbook.worksheets.getActiveWorksheet();
 
-        if (foundRanges.isNullObject) {
-            console.log("No complete projects");
-        } else {
-            foundRanges.format.fill.color = "green"
-        }
+                // Clear formatting for section, then highlight the sorted area.
+                sheet.getRange("A1:E5").format.fill.clear();
+                if (event.address !== "") {
+                    sheet.getRanges(event.address).format.fill.color = "yellow";
+                }
+
+                return context.sync();
+            });
+        });
     });
-'Excel.Worksheet#getNext:member(1)':
+Excel.Worksheet#onRowSorted:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/reference-worksheets-by-relative-position.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/event-column-and-row-sort.yaml
 
 
     await Excel.run(async (context) => {
-        const sheets = context.workbook.worksheets;
-
-        // We don't want to include the default worksheet that was created
-        // when the workbook was created, so our "firstSheet" will be the one
-        // after the literal first. Note chaining of navigation methods.
-        const firstSheet = sheets.getFirst().getNext();
-        const lastSheet = sheets.getLast();
-        const firstTaxRateRange = firstSheet.getRange("B2");
-        const lastTaxRateRange = lastSheet.getRange("B2");
-
-        firstSheet.load("name");
-        lastSheet.load("name");
-        firstTaxRateRange.load("text");
-        lastTaxRateRange.load("text");
-
-        await context.sync();
-
-        let firstYear = firstSheet.name.substr(5, 4);
-        let lastYear = lastSheet.name.substr(5, 4);
-        console.log(`Tax Rate change from ${firstYear} to ${lastYear}`, `Tax rate for ${firstYear}: ${firstTaxRateRange.text[0][0]}\nTax rate for ${lastYear}: ${lastTaxRateRange.text[0][0]}`)
-
-        await context.sync();
-    });
-'Excel.Worksheet#getPrevious:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/reference-worksheets-by-relative-position.yaml
-
-
-    await Excel.run(async (context) => {
-        const sheets = context.workbook.worksheets;
-        const currentSheet = sheets.getActiveWorksheet();
-        const previousYearSheet = currentSheet.getPrevious();
-        const currentTaxDueRange = currentSheet.getRange("C2");
-        const previousTaxDueRange = previousYearSheet.getRange("C2");
-
-        currentSheet.load("name");
-        previousYearSheet.load("name");
-        currentTaxDueRange.load("text");
-        previousTaxDueRange.load("text");
-
-        await context.sync();
-
-        let currentYear = currentSheet.name.substr(5, 4);
-        let previousYear = previousYearSheet.name.substr(5, 4);
-        console.log("Two Year Tax Due Comparison", `Tax due for ${currentYear} was ${currentTaxDueRange.text[0][0]}\nTax due for ${previousYear} was ${previousTaxDueRange.text[0][0]}`)
-
-        await context.sync();
-    });
-'Excel.Worksheet#getRanges:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-areas.yaml
-
-
-    await Excel.run(async (context) => {
-
-        const sheet = context.workbook.worksheets.getActiveWorksheet();
-        const specifiedRanges = sheet.getRanges("D3:D5, G3:G5");
-        specifiedRanges.format.fill.color = "pink";
-
-        await context.sync();
-    })
-'Excel.Worksheet#onChanged:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-worksheet.yaml
+        console.log("Adding row handler");
+        const sheet = context.workbook.worksheets.getActiveWorksheet();
 
+        // This will fire whenever a row has been moved as the result of a sort action.
+        sheet.onRowSorted.add((event) => {
+            return Excel.run((context) => {
+                console.log("Row sorted: " + event.address);
+                const sheet = context.workbook.worksheets.getActiveWorksheet();
 
-    await Excel.run(async (context) => {
-        let sheet = context.workbook.worksheets.getItem("Sample");
-        sheet.onChanged.add(onChange);
-        await context.sync();
+                // Clear formatting for section, then highlight the sorted area.
+                sheet.getRange("A1:E5").format.fill.clear();
+                if (event.address !== "") {
+                    sheet.getRanges(event.address).format.fill.color = "yellow";
+                }
 
-        console.log("Added a worksheet-level data-changed event handler.");
+                return context.sync();
+            });
+        });
     });
-'Excel.Worksheet#onColumnSorted:member':
+Excel.Worksheet#onSingleClicked:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/event-column-and-row-sort.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/event-worksheet-single-click.yaml
 
 
     await Excel.run(async (context) => {
-        console.log("Adding column handler");
         const sheet = context.workbook.worksheets.getActiveWorksheet();
-
-        // This will fire whenever a column has been moved as the result of a sort action.
-        sheet.onColumnSorted.add((event) => {
+        sheet.onSingleClicked.add((event) => {
             return Excel.run((context) => {
-                console.log("Column sorted: " + event.address);
-                const sheet = context.workbook.worksheets.getActiveWorksheet();
-
-                // Clear formatting for section, then highlight the sorted area.
-                sheet.getRange("A1:E5").format.fill.clear();
-                if (event.address !== "") {
-                    sheet.getRanges(event.address).format.fill.color = "yellow";
-                }
-
+                console.log(`Click detected at ${event.address} (pixel offset from upper-left cell corner: ${event.offsetX}, ${event.offsetY})`);
                 return context.sync();
             });
         });
+
+        console.log("The worksheet click handler is registered.");
+
+        await context.sync();
     });
-'Excel.Worksheet#onFormulaChanged:member':
+Excel.Worksheet#onFormulaChanged:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-formula-changed.yaml
@@ -7554,7 +8494,20 @@
         );
       });
     }
-'Excel.Worksheet#onProtectionChanged:member':
+Excel.Worksheet#onChanged:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-worksheet.yaml
+
+
+    await Excel.run(async (context) => {
+        let sheet = context.workbook.worksheets.getItem("Sample");
+        sheet.onChanged.add(onChange);
+        await context.sync();
+
+        console.log("Added a worksheet-level data-changed event handler.");
+    });
+Excel.Worksheet#onProtectionChanged:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-worksheet-protection.yaml
@@ -7592,52 +8545,35 @@
             console.log("    Source of change event: " + source + ".");
         });
     }
-'Excel.Worksheet#onRowSorted:member':
+Excel.Worksheet#showOutlineLevels:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/event-column-and-row-sort.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/outline.yaml
 
 
-    await Excel.run(async (context) => {
-        console.log("Adding row handler");
+    Excel.run(async (context) => {
         const sheet = context.workbook.worksheets.getActiveWorksheet();
 
-        // This will fire whenever a row has been moved as the result of a sort action.
-        sheet.onRowSorted.add((event) => {
-            return Excel.run((context) => {
-                console.log("Row sorted: " + event.address);
-                const sheet = context.workbook.worksheets.getActiveWorksheet();
-
-                // Clear formatting for section, then highlight the sorted area.
-                sheet.getRange("A1:E5").format.fill.clear();
-                if (event.address !== "") {
-                    sheet.getRanges(event.address).format.fill.color = "yellow";
-                }
-
-                return context.sync();
-            });
-        });
+        // This shows the top 3 outline levels; collapsing any additional sublevels.
+        sheet.showOutlineLevels(3, 3);
+        await context.sync();
     });
-'Excel.Worksheet#onSingleClicked:member':
+Excel.Worksheet#slicers:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/event-worksheet-single-click.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-slicer.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getActiveWorksheet();
-        sheet.onSingleClicked.add((event) => {
-            return Excel.run((context) => {
-                console.log(`Click detected at ${event.address} (pixel offset from upper-left cell corner: ${event.offsetX}, ${event.offsetY})`);
-                return context.sync();
-            });
-        });
-
-        console.log("The worksheet click handler is registered.");
-
+        const sheet = context.workbook.worksheets.getItem("Pivot");
+        const slicer = sheet.slicers.add(
+            "Farm Sales", /* The slicer data source. For PivotTables, this can be the PivotTable object reference or name. */
+            "Type" /* The field in the data source to filter by. For PivotTables, this can be a PivotField object reference or ID. */
+        );
+        slicer.name = "Fruit Slicer";
         await context.sync();
     });
-'Excel.Worksheet#pivotTables:member':
+Excel.Worksheet#pivotTables:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-get-pivottables.yaml
@@ -7655,101 +8591,206 @@
         console.log(`\t${pivotTable.name}`);
       });
     });
-'Excel.Worksheet#showGridlines:member':
+Excel.Worksheet#getRanges:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/gridlines.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-areas.yaml
 
 
     await Excel.run(async (context) => {
+
         const sheet = context.workbook.worksheets.getActiveWorksheet();
-        sheet.showGridlines = true;
+        const specifiedRanges = sheet.getRanges("D3:D5, G3:G5");
+        specifiedRanges.format.fill.color = "pink";
 
         await context.sync();
-    });
-'Excel.Worksheet#showOutlineLevels:member(1)':
+    })
+Excel.Worksheet#autoFilter:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/outline.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-auto-filter.yaml
 
 
-    Excel.run(async (context) => {
+    // This function adds a percentage AutoFilter to the active worksheet 
+
+    // and applies the filter to a column of the used range.
+
+    await Excel.run(async (context) => {
+        // Retrieve the active worksheet and the used range on that worksheet.
         const sheet = context.workbook.worksheets.getActiveWorksheet();
+        const farmData = sheet.getUsedRange();
+
+        // Add a filter that will only show the rows with the top 50% of values in column 3.
+        sheet.autoFilter.apply(farmData, 3, {
+            criterion1: "50",
+            filterOn: Excel.FilterOn.topPercent
+        });
 
-        // This shows the top 3 outline levels; collapsing any additional sublevels.
-        sheet.showOutlineLevels(3, 3);
         await context.sync();
     });
-'Excel.Worksheet#slicers:member':
+Excel.Worksheet#copy:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/38-pivottable/pivottable-slicer.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-copy.yaml
 
 
     await Excel.run(async (context) => {
-        const sheet = context.workbook.worksheets.getItem("Pivot");
-        const slicer = sheet.slicers.add(
-            "Farm Sales", /* The slicer data source. For PivotTables, this can be the PivotTable object reference or name. */
-            "Type" /* The field in the data source to filter by. For PivotTables, this can be a PivotField object reference or ID. */
-        );
-        slicer.name = "Fruit Slicer";
+
+        let myWorkbook = context.workbook;
+        let sampleSheet = myWorkbook.worksheets.getActiveWorksheet();
+        let copiedSheet = sampleSheet.copy("End")
+
+        sampleSheet.load("name");
+        copiedSheet.load("name");
+
         await context.sync();
+
+        console.log("'" + sampleSheet.name + "' was copied to '" + copiedSheet.name + "'")
     });
-'Excel.Worksheet#tabColor:member':
+Excel.Worksheet#findAllOrNullObject:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/tab-color.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-find-all.yaml
 
 
     await Excel.run(async (context) => {
-        const activeSheet = context.workbook.worksheets.getActiveWorksheet();
-        activeSheet.tabColor = "#FF0000";
+        const sheet = context.workbook.worksheets.getItem("Sample");
+        const foundRanges = sheet.findAllOrNullObject("Complete", {
+            completeMatch: true,
+            matchCase: false
+        });
 
         await context.sync();
+
+        if (foundRanges.isNullObject) {
+            console.log("No complete projects");
+        } else {
+            foundRanges.format.fill.color = "green"
+        }
     });
-'Excel.WorksheetAddedEventArgs#worksheetId:member':
+Excel.Worksheet#showGridlines:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/gridlines.yaml
 
 
-    async function onWorksheetAdd(event) {
-        await Excel.run(async (context) => {
-            console.log(
-                "Handler for worksheet onAdded event has been triggered. Newly added worksheet Id : " +
-                event.worksheetId
-            );
-        });
-    }
-'Excel.WorksheetChangedEventArgs#changeDirectionState:member':
+    await Excel.run(async (context) => {
+        const sheet = context.workbook.worksheets.getActiveWorksheet();
+        sheet.showGridlines = true;
+
+        await context.sync();
+    });
+Excel.Worksheet#getNext:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-worksheet.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/reference-worksheets-by-relative-position.yaml
 
 
-    async function onChange(event: Excel.WorksheetChangedEventArgs) {
-        // This function is an event handler that returns the address, trigger source, 
-        // and insert or delete shift directions of the change.
-        await Excel.run(async (context) => {
-            // Return the address where change occurred.
-            console.log(`Handler for worksheet onChanged event has been triggered.`);
-            console.log(`    Data changed address: ` + event.address);
+    await Excel.run(async (context) => {
+        const sheets = context.workbook.worksheets;
 
-            // Return the source of the event that triggered the change.
-            console.log(`    Data change trigger source: ` + event.triggerSource);
+        // We don't want to include the default worksheet that was created
+        // when the workbook was created, so our "firstSheet" will be the one
+        // after the literal first. Note chaining of navigation methods.
+        const firstSheet = sheets.getFirst().getNext();
+        const lastSheet = sheets.getLast();
+        const firstTaxRateRange = firstSheet.getRange("B2");
+        const lastTaxRateRange = lastSheet.getRange("B2");
 
-            // Note：insertShiftDirection and deleteShiftDirection are exclusive and both enums can't have a value at the same time. 
-            // If one has a value, then the other will return undefined.
+        firstSheet.load("name");
+        lastSheet.load("name");
+        firstTaxRateRange.load("text");
+        lastTaxRateRange.load("text");
 
-            // If the insert shift direction is defined, return it.
-            if (event.changeDirectionState.insertShiftDirection) {
-                console.log(`    Cells inserted shift direction: ` + event.changeDirectionState.insertShiftDirection);
-            }
+        await context.sync();
 
-            // If the delete shift direction is defined, return it.
-            if (event.changeDirectionState.deleteShiftDirection) {
-                console.log(`    Cells deleted shift direction: ` + event.changeDirectionState.deleteShiftDirection);
-            }
+        let firstYear = firstSheet.name.substr(5, 4);
+        let lastYear = lastSheet.name.substr(5, 4);
+        console.log(`Tax Rate change from ${firstYear} to ${lastYear}`, `Tax rate for ${firstYear}: ${firstTaxRateRange.text[0][0]}\nTax rate for ${lastYear}: ${lastTaxRateRange.text[0][0]}`)
+
+        await context.sync();
+    });
+Excel.Worksheet#getPrevious:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/reference-worksheets-by-relative-position.yaml
+
+
+    await Excel.run(async (context) => {
+        const sheets = context.workbook.worksheets;
+        const currentSheet = sheets.getActiveWorksheet();
+        const previousYearSheet = currentSheet.getPrevious();
+        const currentTaxDueRange = currentSheet.getRange("C2");
+        const previousTaxDueRange = previousYearSheet.getRange("C2");
+
+        currentSheet.load("name");
+        previousYearSheet.load("name");
+        currentTaxDueRange.load("text");
+        previousTaxDueRange.load("text");
+
+        await context.sync();
+
+        let currentYear = currentSheet.name.substr(5, 4);
+        let previousYear = previousYearSheet.name.substr(5, 4);
+        console.log("Two Year Tax Due Comparison", `Tax due for ${currentYear} was ${currentTaxDueRange.text[0][0]}\nTax due for ${previousYear} was ${previousTaxDueRange.text[0][0]}`)
+
+        await context.sync();
+    });
+Excel.Worksheet#tabColor:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/tab-color.yaml
+
+
+    await Excel.run(async (context) => {
+        const activeSheet = context.workbook.worksheets.getActiveWorksheet();
+        activeSheet.tabColor = "#FF0000";
+
+        await context.sync();
+    });
+Excel.WorksheetAddedEventArgs#worksheetId:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml
+
+
+    async function onWorksheetAdd(event) {
+        await Excel.run(async (context) => {
+            console.log(
+                "Handler for worksheet onAdded event has been triggered. Newly added worksheet Id : " +
+                event.worksheetId
+            );
+        });
+    }
+Excel.WorksheetChangedEventArgs#changeDirectionState:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-worksheet.yaml
+
+
+    async function onChange(event: Excel.WorksheetChangedEventArgs) {
+        // This function is an event handler that returns the address, trigger source, 
+        // and insert or delete shift directions of the change.
+        await Excel.run(async (context) => {
+            // Return the address where change occurred.
+            console.log(`Handler for worksheet onChanged event has been triggered.`);
+            console.log(`    Data changed address: ` + event.address);
+
+            // Return the source of the event that triggered the change.
+            console.log(`    Data change trigger source: ` + event.triggerSource);
+
+            // Note：insertShiftDirection and deleteShiftDirection are exclusive and both enums can't have a value at the same time. 
+            // If one has a value, then the other will return undefined.
+
+            // If the insert shift direction is defined, return it.
+            if (event.changeDirectionState.insertShiftDirection) {
+                console.log(`    Cells inserted shift direction: ` + event.changeDirectionState.insertShiftDirection);
+            }
+
+            // If the delete shift direction is defined, return it.
+            if (event.changeDirectionState.deleteShiftDirection) {
+                console.log(`    Cells deleted shift direction: ` + event.changeDirectionState.deleteShiftDirection);
+            }
         });
     }  
   - >-
@@ -7765,7 +8806,7 @@
         const range = sheet.getRange("A5:F5");
         range.delete(Excel.DeleteShiftDirection.up);
     });
-'Excel.WorksheetChangedEventArgs#triggerSource:member':
+Excel.WorksheetChangedEventArgs#triggerSource:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-worksheet.yaml
@@ -7796,7 +8837,46 @@
             }
         });
     }  
-'Excel.WorksheetCollection#getFirst:member(1)':
+Excel.WorksheetCollection#onActivated:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml
+
+
+    await Excel.run(async (context) => {
+        let sheets = context.workbook.worksheets;
+        sheets.onActivated.add(onActivate);
+
+        await context.sync();
+        console.log("A handler has been registered for the OnActivate event.");
+    });
+Excel.WorksheetCollection#onAdded:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml
+
+
+    await Excel.run(async (context) => {
+        let sheet = context.workbook.worksheets;
+        sheet.onAdded.add(onWorksheetAdd);
+
+        await context.sync();
+        console.log("A handler has been registered for the OnAdded event.");
+    });
+Excel.WorksheetCollection#onDeactivated:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml
+
+
+    await Excel.run(async (context) => {
+        let sheets = context.workbook.worksheets;
+        sheets.onDeactivated.add(onDeactivate);
+
+        await context.sync();
+        console.log("A handler has been registered for the OnDeactivate event.");
+    });
+Excel.WorksheetCollection#getFirst:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/reference-worksheets-by-relative-position.yaml
@@ -7826,7 +8906,7 @@
 
         await context.sync();
     });
-'Excel.WorksheetCollection#getLast:member(1)':
+Excel.WorksheetCollection#getLast:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/reference-worksheets-by-relative-position.yaml
@@ -7856,46 +8936,7 @@
 
         await context.sync();
     });
-'Excel.WorksheetCollection#onActivated:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml
-
-
-    await Excel.run(async (context) => {
-        let sheets = context.workbook.worksheets;
-        sheets.onActivated.add(onActivate);
-
-        await context.sync();
-        console.log("A handler has been registered for the OnActivate event.");
-    });
-'Excel.WorksheetCollection#onAdded:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml
-
-
-    await Excel.run(async (context) => {
-        let sheet = context.workbook.worksheets;
-        sheet.onAdded.add(onWorksheetAdd);
-
-        await context.sync();
-        console.log("A handler has been registered for the OnAdded event.");
-    });
-'Excel.WorksheetCollection#onDeactivated:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-workbook-and-worksheet-collection.yaml
-
-
-    await Excel.run(async (context) => {
-        let sheets = context.workbook.worksheets;
-        sheets.onDeactivated.add(onDeactivate);
-
-        await context.sync();
-        console.log("A handler has been registered for the OnDeactivate event.");
-    });
-'Excel.WorksheetCustomPropertyCollection#add:member(1)':
+Excel.WorksheetCustomPropertyCollection#add:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/26-document/custom-properties.yaml
@@ -7903,8 +8944,8 @@
 
     await Excel.run(async (context) => {
       // Get the key/value pair from the task pane.
-      const userKey = $("#key").text();
-      const userValue = $("#value").text();
+      const userKey = document.getElementById("key").textContent;
+      const userValue = document.getElementById("value").textContent;
 
       // Add the custom property.
       const customWorksheetProperties = context.workbook.worksheets.getActiveWorksheet().customProperties;
@@ -7914,7 +8955,7 @@
 
       console.log(`Successfully set custom worksheet property ${userKey}:${userValue}.`);
     });
-'Excel.WorksheetFreezePanes#freezeAt:member(1)':
+Excel.WorksheetFreezePanes#freezeAt:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-freeze-panes.yaml
@@ -7928,7 +8969,7 @@
 
         await context.sync();
     });
-'Excel.WorksheetFreezePanes#freezeColumns:member(1)':
+Excel.WorksheetFreezePanes#freezeColumns:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-freeze-panes.yaml
@@ -7942,7 +8983,7 @@
 
         await context.sync();
     });
-'Excel.WorksheetFreezePanes#freezeRows:member(1)':
+Excel.WorksheetFreezePanes#freezeRows:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-freeze-panes.yaml
@@ -7956,7 +8997,7 @@
 
         await context.sync();
     });
-'Excel.WorksheetFreezePanes#getLocationOrNullObject:member(1)':
+Excel.WorksheetFreezePanes#getLocationOrNullObject:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-freeze-panes.yaml
@@ -7975,7 +9016,7 @@
             console.log(`The address of the frozen range (cells that are frozen in the top-and-left-most pane) is "${frozenRange.address}"`);
         }
     });
-'Excel.WorksheetFreezePanes#unfreeze:member(1)':
+Excel.WorksheetFreezePanes#unfreeze:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/54-worksheet/worksheet-freeze-panes.yaml
@@ -7987,7 +9028,7 @@
 
         await context.sync();
     });
-'Excel.WorksheetPositionType:enum':
+Excel.WorksheetPositionType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/workbook-insert-external-worksheets.yaml
@@ -8008,7 +9049,7 @@
         workbook.insertWorksheetsFromBase64(externalWorkbook, options);
         await context.sync();
     });
-'Excel.WorksheetProtection#protect:member(1)':
+Excel.WorksheetProtection#protect:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/data-protection.yaml
@@ -8028,7 +9069,7 @@
             activeSheet.protection.protect(null, password);
         }
     });
-'Excel.WorksheetProtection#unprotect:member(1)':
+Excel.WorksheetProtection#unprotect:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/50-workbook/data-protection.yaml
@@ -8042,7 +9083,7 @@
         let activeSheet = context.workbook.worksheets.getActiveWorksheet();
         activeSheet.protection.unprotect(password);
     });
-'Excel.WorksheetProtectionChangedEventArgs#isProtected:member':
+Excel.WorksheetProtectionChangedEventArgs#isProtected:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-worksheet-protection.yaml
@@ -8061,7 +9102,7 @@
             console.log("    Source of change event: " + source + ".");
         });
     }
-'Excel.WorksheetProtectionChangedEventArgs#source:member':
+Excel.WorksheetProtectionChangedEventArgs#source:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-worksheet-protection.yaml
@@ -8080,7 +9121,7 @@
             console.log("    Source of change event: " + source + ".");
         });
     }
-'Excel.WorksheetProtectionChangedEventArgs#worksheetId:member':
+Excel.WorksheetProtectionChangedEventArgs#worksheetId:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/events-worksheet-protection.yaml
@@ -8099,7 +9140,7 @@
             console.log("    Source of change event: " + source + ".");
         });
     }
-'Excel.WorksheetSingleClickedEventArgs#address:member':
+Excel.WorksheetSingleClickedEventArgs#address:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/30-events/event-worksheet-single-click.yaml
@@ -8118,15 +9159,15 @@
 
         await context.sync();
     });
-'Office.AppointmentCompose#addFileAttachmentAsync:member(1)':
+Office.AppointmentCompose#addFileAttachmentAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml
 
 
-    const attachmentUrl = $("#attachmentUrl")
-      .val()
-      .toString();
+    const attachmentUrl = (document.getElementById("attachmentUrl") as
+    HTMLInputElement).value;
+
     Office.context.mailbox.item.addFileAttachmentAsync(
       attachmentUrl,
       getFileName(attachmentUrl),
@@ -8135,7 +9176,7 @@
         console.log(result);
       }
     );
-'Office.AppointmentCompose#addFileAttachmentFromBase64Async:member(1)':
+Office.AppointmentCompose#addFileAttachmentFromBase64Async:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml
@@ -8167,7 +9208,7 @@
       { isInline: true },
       function(result) {
         if (result.status == Office.AsyncResultStatus.Succeeded) {
-          const signature = $("#signature").val() + "<img src='/service/cid:myImage.png'>";
+          const signature = (document.getElementById("signature") as HTMLInputElement).value + "<img src='/service/cid:myImage.png'>";
           console.log(`Setting signature to "${signature}".`);
           Office.context.mailbox.item.body.setSignatureAsync(
             signature,
@@ -8181,7 +9222,7 @@
         }
       }
     );
-'Office.AppointmentCompose#categories:member':
+Office.AppointmentCompose#categories:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-categories.yaml
@@ -8255,14 +9296,14 @@
         console.error(asyncResult.error);
       }
     });
-'Office.AppointmentCompose#close:member(1)':
+Office.AppointmentCompose#close:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/25-item-save-and-close/close.yaml
 
 
     Office.context.mailbox.item.close();
-'Office.AppointmentCompose#disableClientSignatureAsync:member(1)':
+Office.AppointmentCompose#disableClientSignatureAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml
@@ -8278,7 +9319,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.AppointmentCompose#end:member':
+Office.AppointmentCompose#end:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-end-appointment-organizer.yaml
@@ -8289,7 +9330,10 @@
         console.error(`Action failed with message ${result.error.message}`);
         return;
       }
-      console.log(`Appointment ends: ${result.value}`);
+
+      const time = result.value;
+      const localTime = Office.context.mailbox.convertToLocalClientTime(time);
+      console.log(`Appointment ends (local): ${localTime.month + 1}/${localTime.date}/${localTime.year}, ${localTime.hours}:${localTime.minutes}:${localTime.seconds}`);
     });
   - >-
     // Link to full sample:
@@ -8312,7 +9356,7 @@
         console.log(`Successfully set end date and time to ${end}`);
       });
     });
-'Office.AppointmentCompose#enhancedLocation:member':
+Office.AppointmentCompose#enhancedLocation:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml
@@ -8383,23 +9427,16 @@
         console.error(`Failed to remove locations. Error message: ${result.error.message}`);
       }
     });
-'Office.AppointmentCompose#getAttachmentContentAsync:member(1)':
+Office.AppointmentCompose#getAttachmentContentAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/get-attachment-content.yaml
 
 
     // Gets the attachments of the current message or appointment in compose
-    mode.
-
-    const options = { asyncContext: { currentItem: item } };
-
-    // The getAttachmentsAsync call can only be used in compose mode.
-
-    item.getAttachmentsAsync(options, callback);
+    mode. The getAttachmentsAsync call can only be used in compose mode.
 
-
-    function callback(result) {
+    Office.context.mailbox.item.getAttachmentsAsync((result) => {
       if (result.status === Office.AsyncResultStatus.Failed) {
         console.log(result.error.message);
         return;
@@ -8412,10 +9449,10 @@
 
       for (let i = 0; i < result.value.length; i++) {
         // Log the attachment type and its contents to the console.
-        result.asyncContext.currentItem.getAttachmentContentAsync(result.value[i].id, handleAttachmentsCallback);
+        Office.context.mailbox.item.getAttachmentContentAsync(result.value[i].id, handleAttachmentsCallback);
       }
-    }
-'Office.AppointmentCompose#getAttachmentsAsync:member(1)':
+    });
+Office.AppointmentCompose#getAttachmentsAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml
@@ -8463,7 +9500,7 @@
         console.log("No attachments on this message.");
       }
     });
-'Office.AppointmentCompose#getItemIdAsync:member(2)':
+Office.AppointmentCompose#getItemIdAsync:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/item-id-compose.yaml
@@ -8477,7 +9514,7 @@
 
         console.log(result.value);
     });
-'Office.AppointmentCompose#getSelectedDataAsync:member(2)':
+Office.AppointmentCompose#getSelectedDataAsync:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/20-item-body/get-selected-data.yaml
@@ -8493,7 +9530,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.AppointmentCompose#getSharedPropertiesAsync:member(2)':
+Office.AppointmentCompose#getSharedPropertiesAsync:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/65-delegates-and-shared-folders/get-shared-properties.yaml
@@ -8509,7 +9546,7 @@
       console.log(`Permissions: ${sharedProperties.delegatePermissions}`);
       console.log(`Target mailbox: ${sharedProperties.targetMailbox}`);
     });
-'Office.AppointmentCompose#isAllDayEvent:member':
+Office.AppointmentCompose#isAllDayEvent:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/99-preview-apis/get-set-isalldayevent.yaml
@@ -8535,7 +9572,7 @@
         console.log("Appointment set to all-day event.");
       }
     });
-'Office.AppointmentCompose#isClientSignatureEnabledAsync:member(1)':
+Office.AppointmentCompose#isClientSignatureEnabledAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml
@@ -8551,7 +9588,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.AppointmentCompose#itemType:member':
+Office.AppointmentCompose#itemType:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-item-type.yaml
@@ -8567,7 +9604,7 @@
             console.log(`Current item is a ${itemType}. A message could be an email, meeting request, meeting response, or meeting cancellation.`);
             break;
     }
-'Office.AppointmentCompose#loadCustomPropertiesAsync:member(1)':
+Office.AppointmentCompose#loadCustomPropertiesAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/15-item-custom-properties/load-set-get-save.yaml
@@ -8582,7 +9619,7 @@
       customProps = result.value;
       console.log("Loaded the CustomProperties object.");
     });
-'Office.AppointmentCompose#location:member':
+Office.AppointmentCompose#location:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-location-appointment-organizer.yaml
@@ -8609,7 +9646,7 @@
       }
       console.log(`Successfully set location to ${location}`);
     });
-'Office.AppointmentCompose#notificationMessages:member':
+Office.AppointmentCompose#notificationMessages:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
@@ -8617,7 +9654,8 @@
 
     // Adds a progress indicator to the mail item.
 
-    const id = $("#notificationId").val().toString();
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
 
     const details =
       {
@@ -8633,13 +9671,14 @@
 
     // Adds an informational notification to the mail item.
 
-    const id = $("#notificationId").val().toString();
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
 
     const details =
       {
         type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
         message: "Non-persistent informational notification message with id = " + id,
-        icon: "icon1",
+        icon: "PG.Icon.16",
         persistent: false
       };
     Office.context.mailbox.item.notificationMessages.addAsync(id, details,
@@ -8651,13 +9690,14 @@
 
     // Adds a persistent information notification to the mail item.
 
-    const id = $("#notificationId").val().toString();
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
 
     const details =
       {
         type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
         message: "Persistent informational notification message with id = " + id,
-        icon: "icon1",
+        icon: "PG.Icon.16",
         persistent: true
       };
     Office.context.mailbox.item.notificationMessages.addAsync(id, details,
@@ -8686,7 +9726,8 @@
 
     // Replaces a notification message of a given key with another message.
 
-    const id = $("#notificationId").val().toString();
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
 
     Office.context.mailbox.item.notificationMessages.replaceAsync(
       id,
@@ -8704,11 +9745,12 @@
 
     // Removes a notification message from the current mail item.
 
-    const id = $("#notificationId").val().toString();
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
 
     Office.context.mailbox.item.notificationMessages.removeAsync(id,
     handleResult);
-'Office.AppointmentCompose#optionalAttendees:member':
+Office.AppointmentCompose#optionalAttendees:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml
@@ -8737,9 +9779,9 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml
 
 
-    const email = $("#emailOptional")
-      .val()
-      .toString();
+    const email = (document.getElementById("emailOptional") as
+    HTMLInputElement).value;
+
     const emailArray = [email];
 
     Office.context.mailbox.item.optionalAttendees.setAsync(emailArray,
@@ -8750,7 +9792,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.AppointmentCompose#organizer:member':
+Office.AppointmentCompose#organizer:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-organizer-appointment-organizer.yaml
@@ -8764,7 +9806,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.AppointmentCompose#recurrence:member':
+Office.AppointmentCompose#recurrence:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-set-recurrence-appointment-organizer.yaml
@@ -8833,16 +9875,14 @@
       }
       console.log(`Succeeded in setting recurrence pattern ${JSON.stringify(pattern)}`);
     });
-'Office.AppointmentCompose#removeAttachmentAsync:member(1)':
+Office.AppointmentCompose#removeAttachmentAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml
 
 
     Office.context.mailbox.item.removeAttachmentAsync(
-      $("#attachmentId")
-        .val()
-        .toString(),
+      (document.getElementById("attachmentId") as HTMLInputElement).value,
       (result) => {
         if (result.status === Office.AsyncResultStatus.Failed) {
           console.error(result.error.message);
@@ -8852,7 +9892,7 @@
         console.log(`Attachment removed successfully.`);
       }
     );
-'Office.AppointmentCompose#requiredAttendees:member':
+Office.AppointmentCompose#requiredAttendees:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml
@@ -8881,9 +9921,9 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml
 
 
-    const email = $("#emailRequired")
-      .val()
-      .toString();
+    const email = (document.getElementById("emailRequired") as
+    HTMLInputElement).value;
+
     const emailArray = [email];
 
     Office.context.mailbox.item.requiredAttendees.setAsync(emailArray,
@@ -8894,7 +9934,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.AppointmentCompose#saveAsync:member(1)':
+Office.AppointmentCompose#saveAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/25-item-save-and-close/save.yaml
@@ -8908,7 +9948,21 @@
         console.error(`saveAsync failed with message ${result.error.message}`);
       }
     });
-'Office.AppointmentCompose#sensitivity:member':
+Office.AppointmentCompose#sendAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/send-async.yaml
+
+
+    // This snippet sends the current message or appointment being composed.
+
+    Office.context.mailbox.item.sendAsync((asyncResult) => {
+      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+        console.log("Action failed with error: " + asyncResult.error.message);
+        return;
+      }
+    });
+Office.AppointmentCompose#sensitivity:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-sensitivity-level.yaml
@@ -8936,7 +9990,7 @@
         }
       }
     );
-'Office.AppointmentCompose#sensitivityLabel:member':
+Office.AppointmentCompose#sensitivityLabel:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/60-sensitivity-label/sensitivity-label.yaml
@@ -8957,7 +10011,7 @@
         console.log("Action failed with error: " + asyncResult.error.message);
       }
     });
-'Office.AppointmentCompose#seriesId:member':
+Office.AppointmentCompose#seriesId:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-series-id.yaml
@@ -8973,7 +10027,7 @@
     } else {
       console.log("This is an instance belonging to series with ID " + seriesId);
     }
-'Office.AppointmentCompose#sessionData:member':
+Office.AppointmentCompose#sessionData:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/session-data-apis.yaml
@@ -8986,7 +10040,7 @@
         console.log("Failed to get all sessionData. Error: " + JSON.stringify(asyncResult.error));
       }
     });
-'Office.AppointmentCompose#setSelectedDataAsync:member(1)':
+Office.AppointmentCompose#setSelectedDataAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/set-selected-data.yaml
@@ -9000,7 +10054,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.AppointmentCompose#start:member':
+Office.AppointmentCompose#start:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-start-appointment-organizer.yaml
@@ -9011,7 +10065,10 @@
         console.error(`Action failed with message ${result.error.message}`);
         return;
       }
-      console.log(`Appointment starts: ${result.value}`);
+
+      const time = result.value;
+      const localTime = Office.context.mailbox.convertToLocalClientTime(time);
+      console.log(`Appointment starts (local): ${localTime.month + 1}/${localTime.date}/${localTime.year}, ${localTime.hours}:${localTime.minutes}:${localTime.seconds}`);
     });
   - >-
     // Link to full sample:
@@ -9029,7 +10086,7 @@
       }
       console.log(`Successfully set start date and time to ${start}`);
     });
-'Office.AppointmentCompose#subject:member':
+Office.AppointmentCompose#subject:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-subject-compose.yaml
@@ -9056,16 +10113,60 @@
       }
       console.log(`Successfully set subject to ${subject}`);
     });
-'Office.AppointmentRead#attachments:member':
+Office.AppointmentForm:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-new-appointment.yaml
+
+
+    const start = new Date();
+
+    const end = new Date();
+
+    end.setHours(start.getHours() + 1);
+
+
+    // The async version is only available starting with requirement set 1.9,
+
+    // and provides a callback when the new appointment form has been created.
+
+    Office.context.mailbox.displayNewAppointmentFormAsync(
+      {
+        requiredAttendees: ["bob@contoso.com"],
+        optionalAttendees: ["sam@contoso.com"],
+        start: start,
+        end: end,
+        location: "Home",
+        subject: "meeting",
+        resources: ["projector@contoso.com"],
+        body: "Hello World!"
+      },
+      function(asyncResult) {
+        console.log(JSON.stringify(asyncResult));
+      }
+    );
+Office.AppointmentRead#attachments:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/get-attachments-read.yaml
 
 
-    const attachments = Office.context.mailbox.item.attachments;
+    const item = Office.context.mailbox.item;
 
-    console.log(attachments);
-'Office.AppointmentRead#categories:member':
+
+    if (item.attachments.length > 0) {
+        for (let i = 0; i < item.attachments.length; i++) {
+            const attachment = item.attachments[i];
+            console.log(`${i+1}. Name: ${attachment.name}`);
+            console.log(`ID: ${attachment.id}`);
+            console.log(`Type: ${attachment.attachmentType}`);
+            console.log(`Inline content: ${attachment.isInline}`);
+            console.log(`Size: ${attachment.size}`);
+        }
+    } else {
+        console.log("This mail item doesn't contain any attachments.");
+    }
+Office.AppointmentRead#categories:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-categories.yaml
@@ -9139,7 +10240,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.AppointmentRead#dateTimeCreated:member':
+Office.AppointmentRead#dateTimeCreated:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-date-time-created-read.yaml
@@ -9147,7 +10248,7 @@
 
     console.log(`Creation date and time:
     ${Office.context.mailbox.item.dateTimeCreated}`);
-'Office.AppointmentRead#dateTimeModified:member':
+Office.AppointmentRead#dateTimeModified:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-date-time-modified-read.yaml
@@ -9155,7 +10256,7 @@
 
     console.log(`Date and time item last modified:
     ${Office.context.mailbox.item.dateTimeModified}`);
-'Office.AppointmentRead#displayReplyAllForm:member(1)':
+Office.AppointmentRead#displayReplyAllForm:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-forms.yaml
@@ -9163,54 +10264,58 @@
 
     Office.context.mailbox.item.displayReplyAllForm("This is a reply ALL with
     <b>some bold text</b>.");
-'Office.AppointmentRead#displayReplyAllFormAsync:member(1)':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-forms.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
 
 
-    Office.context.mailbox.item.displayReplyAllFormAsync("This is a reply ALL
-    with <b>some bold text</b>.", function(
-      asyncResult
-    ) {
-      console.log(JSON.stringify(asyncResult));
-    });
-'Office.AppointmentRead#displayReplyForm:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-forms.yaml
+    // Define attachments.
+
+    const base64Attachment = {
+      base64file:
+        "iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAIAAABt+uBvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxEAAAsRAX9kX5EAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTM0A1t6AAAF3klEQVR4Xt2aMcolRRSFdQUuwSW4AAMzU8ENzAIMDA1NzHUBgqmZkbG4ADGVQRgGZBBElAERRPg9eC+PQ73qc6u66lZ3v48bzH+7uqr6VN/T1f3mjafT8Pr7b37+8G3En99+5akTcAqB/n7+48uP3vvp3TdvgT//+uE7P3woBwv07+s/Xn32jKXhwKF/Xr3wpgdxpEC/ffnp8/ffKkQpAg3QDDr6Ocs5RiCzm0ILEQca02qB7u2mPQ4xpnUCabtBWDWFdbfYmBYJ1HLZN6PBP3794uOiAcdKY0oXKLQbFE71jkBS33FrjClRoNBuXjx7J/QUNNCdZBtTikAtdtO1+JBA34Z5xjRfIG03I/YBTYVMScY0U6DQbsbXGdevF2C6Mc0RKLQbHEUbbz0MZNKPuYnGNCpQaDdY0iQTDR9zU4xpSCB9t+PQ719/7k3T0P49bkw7BQrtZnBajTS+uIwYU7dA4ZzynrhMWF/3sc+YOgQK7WaiNQpCh9bRu36tAmm7wT2MovOmaUAaPY3G6DKmWCBtNzaYN80EJjIuDUejMSmBUC/abnCrL3Di8IEwErhAvUGrCxRa4C+ffLDAicMVmhW42K2VLgUK67zlFXwcqL9GmltseUXlDirOvMXIbqKdHc/vieGTIJoE6rL93djNWwy9OHwqRCyQqM+J6LpeFj4bIhZoTWVdWCCLBbvkY93HwqdCdJg0AheQ/XRf9mivhk+C6BMIscawUdR5m0MRPjzRLZAFZMo2pnBHlhE+NhELJGa5YNO42Jh8VCIWCBnMEu8WRf4WC147sAxYjGLcjPDxiCaBDMxS+MKCF1cUdXbF+UhEh0CGqDjksz9CZ++2fRiiWyCgKw532QJjEhMYCR+A2COQoStuwcYyw5i8a2K/QIZ+Ei/YWM41Ju+UGBUI6Bses4eIqf6Nzkc+43N4j8QEgQxdcZApe2OJdRp/R/G+iGkCGbriFmws9TqF4b0QkwUC4SNmwcYSu419xuTnE/MFMrCSRT9FZG8s9xmTn0xkCQSKfu4Di5y9sew1Jj+NOFIgC1hG9q+y7b+s+QnE8QJZYJ0n/g+rKvoBYuFNibMIZJG9sYQx6Y8n3o44l0AILDKWOtW/xf/g8RbE6QSygGVkbyyrxuTHiJMKZLHgjbcY0bPEqQWySN1YFmN5lriAQBZJxlSM4lniMgIhMjaWxRCeJa4kkAWcdaIxFZ17lrieQBazNpZFt54lriqQBXZ9g8ZUdOhZ4toCIWxj6UP2U/TmWSJRoDU/9V1YIIDdcONr9L64dond2P19T8QjmDSDdUYhTJHpcR7z90Am/bVBx6NtFLcIv+pXAzfgo71qaFAmWx9linjYl9UWIJN4zD3454527ncD+DP7g5nBgyI8S5xCIIMHzbCbKjwowrPESQXyVD48aHXcWCDc7dm/Wxk8qKcymfZN2gJ+mfqDDODhPJUDLmTrAeotiFaBLJI2IwYP5KnZ2IaeByrC2xEVgdCFeCfIqzgexVNT0T9Ab30VqAgEwneCjIrj/j01CVFTFuKrQF0gQ/wCaQHJJ1Yc9+ypYcKawgXqrwJKIEPfmRMrjrv11BhTZh4LZGAdhDFNqTju0FN70TW1ZTdVWgUCoTFh1JGK46481U9YU70fITsEMrQxjVQc9+OpTnRNhXZTpVsgI5zKjorjHjzVjK6pkWXbKZCBm1kYU2/F8bmeakDXVJfdVBkSCGB+wpi6lo5P9FSEvpF77abKqECGNqbGiuNTPLWNrikc2mE3VeYIZOj1DCuOG3uqhq6pEbupMlMgA7PfMiY9e27pqTvEGozbTZX5AgFtTFsVx208ReiammI3VVIEMrQxYbWLS+KjnvofXVMT7aZKokCGKIqi4viQp3pOTyJdIAO3wJYx3SqOk/hT1FSS3VRZJBDQxlQUkaipPLupsk4gQxuTjmy7qbJaIEM4SzXW2E2VYwQyhDHdYqXdVDlSIKCNabHdVDlYIOPemA6xmyqnEMgwYzrQbio8Pf0HxndUxitiwgUAAAAASUVORK5CYII=",
+      inLine: true,
+      name: "script_lab.png",
+      type: Office.MailboxEnums.AttachmentType.Base64
+    };
 
+    const fileAttachment = {
+      inLine: true,
+      name: "dog.jpg",
+      type: Office.MailboxEnums.AttachmentType.File,
+      url: "https://i.imgur.com/9S36xvA.jpg"
+    };
 
-    Office.context.mailbox.item.displayReplyForm("This is a reply with <i>some
-    text in italics</i>.");
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
+    const itemAttachment = {
+      itemId: Office.context.mailbox.item.itemId,
+      name: "test_email.msg",
+      type: Office.MailboxEnums.AttachmentType.Item
+    };
 
 
-    Office.context.mailbox.item.displayReplyForm({
-      htmlBody: "This is a reply with an inline image and an item attachment.<br><img src='/service/cid:dog.jpg'>",
-      attachments: [
-        { type: "file", url: "https://i.imgur.com/9S36xvA.jpg", name: "dog.jpg", inLine: true },
-        { type: "item", itemId: Office.context.mailbox.item.itemId, name: "test_email.msg" }
-      ],
+    // Create the reply with attachments.
+
+    Office.context.mailbox.item.displayReplyAllForm({
+      htmlBody:
+        "This is a reply with an inline Base64-encoded attachment, an inline image, and an item attachment.<br><img src='/service/cid:script_lab.png'><br><img src='/service/cid:dog.jpg'>",
+      attachments: [base64Attachment, fileAttachment, itemAttachment],
       callback: (result) => {
         if (result.status === Office.AsyncResultStatus.Failed) {
           console.error(`Action failed with message ${result.error.message}`);
           return;
         }
 
-        console.log("Created reply with attachments.");
+        console.log("Created a reply-all form with attachments.");
       }
     });
-'Office.AppointmentRead#displayReplyFormAsync:member(1)':
+Office.AppointmentRead#displayReplyAllFormAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-forms.yaml
 
 
-    Office.context.mailbox.item.displayReplyFormAsync("This is a reply with
-    <i>some text in italics</i>.", function(
+    Office.context.mailbox.item.displayReplyAllFormAsync("This is a reply ALL
+    with <b>some bold text</b>.", function(
       asyncResult
     ) {
       console.log(JSON.stringify(asyncResult));
@@ -9220,30 +10325,175 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
 
 
-    // The async version is only available starting with requirement set 1.9.
+    // Define attachments.
+
+    const base64Attachment = {
+      base64file:
+        "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",
+      inLine: true,
+      name: "script_lab.png",
+      type: Office.MailboxEnums.AttachmentType.Base64
+    };
+
+    const fileAttachment = {
+      inLine: true,
+      name: "dog.jpg",
+      type: Office.MailboxEnums.AttachmentType.File,
+      url: "https://i.imgur.com/9S36xvA.jpg"
+    };
+
+    const itemAttachment = {
+      itemId: Office.context.mailbox.item.itemId,
+      name: "test_email.msg",
+      type: Office.MailboxEnums.AttachmentType.Item
+    };
+
+
+    // The async version was introduced in requirement set 1.9.
 
     // It provides a callback when the new appointment form has been created.
 
-    Office.context.mailbox.item.displayReplyFormAsync(
+    Office.context.mailbox.item.displayReplyAllFormAsync(
       {
-        htmlBody: "This is a reply with an inline image and an item attachment.<br><img src='/service/cid:dog.jpg'>",
-        attachments: [
-          { type: "file", url: "http://i.imgur.com/9S36xvA.jpg", name: "dog.jpg", inLine: true },
-          { type: "item", itemId: Office.context.mailbox.item.itemId, name: "test_email.msg" }
-        ]
+        htmlBody:
+          "This is a reply with an inline Base64-encoded attachment, an inline image, and an item attachment.<br><img src='/service/cid:script_lab.png'><br><img src='/service/cid:dog.jpg'>",
+        attachments: [base64Attachment, fileAttachment, itemAttachment]
       },
       (asyncResult) => {
-        console.log(JSON.stringify(asyncResult));
-      }
-    );
-'Office.AppointmentRead#end:member':
-  - >-
+        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+          console.error(`Action failed with message ${asyncResult.error.message}`);
+          return;
+        }
+
+        console.log("Created a reply-all form with attachments.");
+      }
+    );
+Office.AppointmentRead#displayReplyForm:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-forms.yaml
+
+
+    Office.context.mailbox.item.displayReplyForm("This is a reply with <i>some
+    text in italics</i>.");
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
+
+
+    // Define attachments.
+
+    const base64Attachment = {
+      base64file:
+        "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",
+      inLine: true,
+      name: "script_lab.png",
+      type: Office.MailboxEnums.AttachmentType.Base64
+    };
+
+    const fileAttachment = {
+      inLine: true,
+      name: "dog.jpg",
+      type: Office.MailboxEnums.AttachmentType.File,
+      url: "https://i.imgur.com/9S36xvA.jpg"
+    };
+
+    const itemAttachment = {
+      itemId: Office.context.mailbox.item.itemId,
+      name: "test_email.msg",
+      type: Office.MailboxEnums.AttachmentType.Item
+    };
+
+
+    // Create the reply with attachments.
+
+    Office.context.mailbox.item.displayReplyForm({
+      htmlBody:
+        "This is a reply with an inline Base64-encoded attachment, an inline image, and an item attachment.<br><img src='/service/cid:script_lab.png'><br><img src='/service/cid:dog.jpg'>",
+      attachments: [base64Attachment, fileAttachment, itemAttachment],
+      callback: (result) => {
+        if (result.status === Office.AsyncResultStatus.Failed) {
+          console.error(`Action failed with message ${result.error.message}`);
+          return;
+        }
+
+        console.log("Created a reply with attachments.");
+      }
+    });
+Office.AppointmentRead#displayReplyFormAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-forms.yaml
+
+
+    Office.context.mailbox.item.displayReplyFormAsync("This is a reply with
+    <i>some text in italics</i>.", function(
+      asyncResult
+    ) {
+      console.log(JSON.stringify(asyncResult));
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
+
+
+    // Define attachments.
+
+    const base64Attachment = {
+      base64file:
+        "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",
+      inLine: true,
+      name: "script_lab.png",
+      type: Office.MailboxEnums.AttachmentType.Base64
+    };
+
+    const fileAttachment = {
+      inLine: true,
+      name: "dog.jpg",
+      type: Office.MailboxEnums.AttachmentType.File,
+      url: "https://i.imgur.com/9S36xvA.jpg"
+    };
+
+    const itemAttachment = {
+      itemId: Office.context.mailbox.item.itemId,
+      name: "test_email.msg",
+      type: Office.MailboxEnums.AttachmentType.Item
+    };
+
+
+    // The async version was introduced in requirement set 1.9.
+
+    // It provides a callback when the new appointment form has been created.
+
+    Office.context.mailbox.item.displayReplyFormAsync(
+      {
+        htmlBody:
+          "This is a reply with an inline Base64-encoded attachment, an inline image, and an item attachment.<br><img src='/service/cid:script_lab.png'><br><img src='/service/cid:dog.jpg'>",
+        attachments: [base64Attachment, fileAttachment, itemAttachment]
+      },
+      (asyncResult) => {
+        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+          console.error(`Action failed with message ${asyncResult.error.message}`);
+          return;
+        }
+
+        console.log("Created reply with attachments.");
+      }
+    );
+Office.AppointmentRead#end:member:
+  - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-end-read.yaml
 
 
-    console.log(`Appointment ends: ${Office.context.mailbox.item.end}`);
-'Office.AppointmentRead#enhancedLocation:member':
+    const time = Office.context.mailbox.item.end;
+
+    const localTime = Office.context.mailbox.convertToLocalClientTime(time);
+
+    console.log(`Appointment ends (local): ${localTime.month +
+    1}/${localTime.date}/${localTime.year},
+    ${localTime.hours}:${localTime.minutes}:${localTime.seconds}`);
+Office.AppointmentRead#enhancedLocation:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml
@@ -9266,15 +10516,16 @@
         console.log("There are no locations.");
       }
     });
-'Office.AppointmentRead#getAttachmentContentAsync:member(1)':
+Office.AppointmentRead#getAttachmentContentAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/get-attachment-content.yaml
 
 
     // Gets the attachments of the current message or appointment in read mode.
+    The item.attachments call can only be used in read mode.
 
-    // The item.attachments call can only be used in read mode.
+    const item = Office.context.mailbox.item;
 
     const attachments = item.attachments;
 
@@ -9288,7 +10539,7 @@
       // Log the attachment type and its contents to the console.
       item.getAttachmentContentAsync(attachments[i].id, handleAttachmentsCallback);
     }
-'Office.AppointmentRead#getRegExMatches:member(1)':
+Office.AppointmentRead#getRegExMatches:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/75-regex-matches/contextual.yaml
@@ -9297,7 +10548,7 @@
     // This API only works when you click on the highlighted word "ScriptLab".
 
     console.log(Office.context.mailbox.item.getRegExMatches());
-'Office.AppointmentRead#getRegExMatchesByName:member(1)':
+Office.AppointmentRead#getRegExMatchesByName:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/75-regex-matches/contextual.yaml
@@ -9306,7 +10557,7 @@
     // This API only works when you click on the highlighted word "ScriptLab".
 
     console.log(Office.context.mailbox.item.getRegExMatchesByName("sampleRegexName"));
-'Office.AppointmentRead#getSelectedRegExMatches:member(1)':
+Office.AppointmentRead#getSelectedRegExMatches:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/75-regex-matches/contextual.yaml
@@ -9319,7 +10570,7 @@
     } else {
         console.error("Open add-in by clicking on a highlighted regex match, for this API to return something useful.");
     }
-'Office.AppointmentRead#getSharedPropertiesAsync:member(2)':
+Office.AppointmentRead#getSharedPropertiesAsync:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/65-delegates-and-shared-folders/get-shared-properties.yaml
@@ -9335,14 +10586,14 @@
       console.log(`Permissions: ${sharedProperties.delegatePermissions}`);
       console.log(`Target mailbox: ${sharedProperties.targetMailbox}`);
     });
-'Office.AppointmentRead#itemClass:member':
+Office.AppointmentRead#itemClass:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-item-class-read.yaml
 
 
     console.log(`Item class: ${Office.context.mailbox.item.itemClass}`);
-'Office.AppointmentRead#itemType:member':
+Office.AppointmentRead#itemType:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-item-type.yaml
@@ -9358,7 +10609,7 @@
             console.log(`Current item is a ${itemType}. A message could be an email, meeting request, meeting response, or meeting cancellation.`);
             break;
     }
-'Office.AppointmentRead#loadCustomPropertiesAsync:member(1)':
+Office.AppointmentRead#loadCustomPropertiesAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/15-item-custom-properties/load-set-get-save.yaml
@@ -9373,7 +10624,7 @@
       customProps = result.value;
       console.log("Loaded the CustomProperties object.");
     });
-'Office.AppointmentRead#location:member':
+Office.AppointmentRead#location:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-location-read.yaml
@@ -9381,7 +10632,7 @@
 
     console.log(`Appointment location:
     ${Office.context.mailbox.item.location}`);
-'Office.AppointmentRead#normalizedSubject:member':
+Office.AppointmentRead#normalizedSubject:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-normalized-subject-read.yaml
@@ -9389,7 +10640,7 @@
 
     console.log(`Normalized subject:
     ${Office.context.mailbox.item.normalizedSubject}`);
-'Office.AppointmentRead#notificationMessages:member':
+Office.AppointmentRead#notificationMessages:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
@@ -9397,7 +10648,8 @@
 
     // Adds a progress indicator to the mail item.
 
-    const id = $("#notificationId").val().toString();
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
 
     const details =
       {
@@ -9413,13 +10665,14 @@
 
     // Adds an informational notification to the mail item.
 
-    const id = $("#notificationId").val().toString();
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
 
     const details =
       {
         type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
         message: "Non-persistent informational notification message with id = " + id,
-        icon: "icon1",
+        icon: "PG.Icon.16",
         persistent: false
       };
     Office.context.mailbox.item.notificationMessages.addAsync(id, details,
@@ -9431,13 +10684,14 @@
 
     // Adds a persistent information notification to the mail item.
 
-    const id = $("#notificationId").val().toString();
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
 
     const details =
       {
         type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
         message: "Persistent informational notification message with id = " + id,
-        icon: "icon1",
+        icon: "PG.Icon.16",
         persistent: true
       };
     Office.context.mailbox.item.notificationMessages.addAsync(id, details,
@@ -9466,7 +10720,8 @@
 
     // Replaces a notification message of a given key with another message.
 
-    const id = $("#notificationId").val().toString();
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
 
     Office.context.mailbox.item.notificationMessages.replaceAsync(
       id,
@@ -9484,11 +10739,12 @@
 
     // Removes a notification message from the current mail item.
 
-    const id = $("#notificationId").val().toString();
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
 
     Office.context.mailbox.item.notificationMessages.removeAsync(id,
     handleResult);
-'Office.AppointmentRead#optionalAttendees:member':
+Office.AppointmentRead#optionalAttendees:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-optional-attendees-appointment-attendee.yaml
@@ -9507,7 +10763,7 @@
           apptOptionalAttendees[i].appointmentResponse
       );
     }
-'Office.AppointmentRead#organizer:member':
+Office.AppointmentRead#organizer:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-organizer-appointment-attendee.yaml
@@ -9517,7 +10773,7 @@
 
     console.log("Organizer: " + apptOrganizer.displayName + " (" +
     apptOrganizer.emailAddress + ")");
-'Office.AppointmentRead#recurrence:member':
+Office.AppointmentRead#recurrence:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-recurrence-read.yaml
@@ -9533,7 +10789,7 @@
     } else {
       console.log(JSON.stringify(recurrence));
     }
-'Office.AppointmentRead#requiredAttendees:member':
+Office.AppointmentRead#requiredAttendees:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-required-attendees-appointment-attendee.yaml
@@ -9552,7 +10808,7 @@
           apptRequiredAttendees[i].appointmentResponse
       );
     }
-'Office.AppointmentRead#seriesId:member':
+Office.AppointmentRead#seriesId:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-series-id.yaml
@@ -9568,58 +10824,132 @@
     } else {
       console.log("This is an instance belonging to series with ID " + seriesId);
     }
-'Office.AppointmentRead#start:member':
+Office.AppointmentRead#start:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-start-read.yaml
 
 
-    console.log(`Appointment starts: ${Office.context.mailbox.item.start}`);
-'Office.AppointmentRead#subject:member':
+    const time = Office.context.mailbox.item.start;
+
+    const localTime = Office.context.mailbox.convertToLocalClientTime(time);
+
+    console.log(`Appointment starts (local): ${localTime.month +
+    1}/${localTime.date}/${localTime.year},
+    ${localTime.hours}:${localTime.minutes}:${localTime.seconds}`);
+Office.AppointmentRead#subject:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-subject-read.yaml
 
 
     console.log(`Subject: ${Office.context.mailbox.item.subject}`);
-'Office.Body:interface':
+Office.AttachmentDetails:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/20-item-body/add-inline-base64-image.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/get-attachments-read.yaml
 
 
-    const mailItem = Office.context.mailbox.item;
+    const item = Office.context.mailbox.item;
 
-    const base64String =
-      "iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAnUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAN0S+bUAAAAMdFJOUwAQIDBAUI+fr7/P7yEupu8AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF8SURBVGhD7dfLdoMwDEVR6Cspzf9/b20QYOthS5Zn0Z2kVdY6O2WULrFYLBaLxd5ur4mDZD14b8ogWS/dtxV+dmx9ysA2QUj9TQRWv5D7HyKwuIW9n0vc8tkpHP0W4BOg3wQ8wtlvA+PC1e8Ao8Ld7wFjQtHvAiNC2e8DdqHqKwCrUPc1gE1AfRVgEXBfB+gF0lcCWoH2tYBOYPpqQCNwfT3QF9i+AegJfN8CtAWhbwJagtS3AbIg9o2AJMh9M5C+SVGBvx6zAfmT0r+Bv8JMwP4kyFPir+cswF5KL3WLv14zAFBCLf56Tw9cparFX4upgaJUtPhrOS1QlY5W+vWTXrGgBFB/b72ev3/0igUdQPppP/nfowfKUUEFcP207y/yxKmgAYQ+PywoAFOfCH3A2MdCFzD3kdADBvq10AGG+pXQBgb7pdAEhvuF0AIc/VtoAK7+JciAs38KIuDugyAC/v4hiMCE/i7IwLRBsh68N2WQjMVisVgs9i5bln8LGScNcCrONQAAAABJRU5ErkJggg==";
 
-    // Get the current body of the message or appointment.
+    if (item.attachments.length > 0) {
+        for (let i = 0; i < item.attachments.length; i++) {
+            const attachment = item.attachments[i];
+            console.log(`${i+1}. Name: ${attachment.name}`);
+            console.log(`ID: ${attachment.id}`);
+            console.log(`Type: ${attachment.attachmentType}`);
+            console.log(`Inline content: ${attachment.isInline}`);
+            console.log(`Size: ${attachment.size}`);
+        }
+    } else {
+        console.log("This mail item doesn't contain any attachments.");
+    }
+Office.AttachmentDetailsCompose:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml
 
-    mailItem.body.getAsync(Office.CoercionType.Html, (bodyResult) => {
-      if (bodyResult.status === Office.AsyncResultStatus.Succeeded) {
-        // Insert the Base64-encoded image to the beginning of the body.
-        const options = { isInline: true, asyncContext: bodyResult.value };
-        mailItem.addFileAttachmentFromBase64Async(base64String, "sample.png", options, (attachResult) => {
-          if (attachResult.status === Office.AsyncResultStatus.Succeeded) {
-            let body = attachResult.asyncContext;
-            body = body.replace("<p class=MsoNormal>", `<p class=MsoNormal><img src="/service/cid:sample.png">`);
-
-            mailItem.body.setAsync(body, { coercionType: Office.CoercionType.Html }, (setResult) => {
-              if (setResult.status === Office.AsyncResultStatus.Succeeded) {
-                console.log("Inline Base64-encoded image added to the body.");
-              } else {
-                console.log(setResult.error.message);
-              }
-            });
-          } else {
-            console.log(attachResult.error.message);
+
+    Office.context.mailbox.item.getAttachmentsAsync((result) => {
+      if (result.status === Office.AsyncResultStatus.Failed) {
+        console.error(result.error.message);
+        return;
+      }
+
+      if (result.value.length > 0) {
+        for (let i = 0; i < result.value.length; i++) {
+          const attachment = result.value[i];
+          let attachmentType;
+          switch (attachment.attachmentType) {
+            case Office.MailboxEnums.AttachmentType.Cloud:
+              attachmentType = "Attachment is stored in a cloud location";
+              break;
+            case Office.MailboxEnums.AttachmentType.File:
+              attachmentType = "Attachment is a file";
+              break;
+            case Office.MailboxEnums.AttachmentType.Item:
+              attachmentType = "Attachment is an Exchange item";
+              break;
           }
-        });
+          console.log(
+            "ID: " +
+              attachment.id +
+              "\n" +
+              "Type: " +
+              attachmentType +
+              "\n" +
+              "Name: " +
+              attachment.name +
+              "\n" +
+              "Size: " +
+              attachment.size +
+              "\n" +
+              "isInline: " +
+              attachment.isInline
+          );
+        }
       } else {
-        console.log(bodyResult.error.message);
+        console.log("No attachments on this message.");
+      }
+    });
+Office.Body:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/20-item-body/add-inline-base64-image.yaml
+
+
+    // Get the current body of the message or appointment.
+
+    Office.context.mailbox.item.body.getAsync(Office.CoercionType.Html,
+    (bodyResult) => {
+      if (bodyResult.status === Office.AsyncResultStatus.Failed) {
+        console.log(`Failed to get body: ${bodyResult.error.message}`);
+        return;
       }
+
+      // Add the Base64-encoded image to the end of the body.
+      const options = { isInline: true, asyncContext: bodyResult.value };
+      Office.context.mailbox.item.addFileAttachmentFromBase64Async(base64String, "sample.png", options, (attachResult) => {
+        if (attachResult.status === Office.AsyncResultStatus.Failed) {
+          console.log(`Failed to attach file: ${attachResult.error.message}`);
+          return;
+        }
+
+        let body = attachResult.asyncContext;
+        body += '<img src="/service/cid:sample.png" />';
+
+        Office.context.mailbox.item.body.setAsync(body, { coercionType: Office.CoercionType.Html }, (setResult) => {
+          if (setResult.status === Office.AsyncResultStatus.Failed) {
+            console.log(`Failed to set body: ${setResult.error.message}`);
+            return;
+          }
+          
+          console.log("Inline Base64-encoded image added to the end of the body.");
+        });
+      });
     });
-'Office.Body#appendOnSendAsync:member(1)':
+Office.Body#appendOnSendAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/20-item-body/append-text-on-send.yaml
@@ -9628,7 +10958,8 @@
     // This snippet appends text to the end of the message or appointment's body
     once it's sent.
 
-    const text = $("#text-field").val();
+    const text = (document.getElementById("text-field") as
+    HTMLInputElement).value;
 
 
     // It's recommended to call getTypeAsync and pass its returned value to the
@@ -9650,44 +10981,43 @@
         console.log(`"${text}" will be appended to the body once the message or appointment is sent. Send the mail item to test this feature.`);
       });
     });
-'Office.Body#getAsync:member(2)':
+Office.Body#getAsync:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/20-item-body/add-inline-base64-image.yaml
 
 
-    const mailItem = Office.context.mailbox.item;
+    // Get the current body of the message or appointment.
 
-    const base64String =
-      "iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAnUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAN0S+bUAAAAMdFJOUwAQIDBAUI+fr7/P7yEupu8AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF8SURBVGhD7dfLdoMwDEVR6Cspzf9/b20QYOthS5Zn0Z2kVdY6O2WULrFYLBaLxd5ur4mDZD14b8ogWS/dtxV+dmx9ysA2QUj9TQRWv5D7HyKwuIW9n0vc8tkpHP0W4BOg3wQ8wtlvA+PC1e8Ao8Ld7wFjQtHvAiNC2e8DdqHqKwCrUPc1gE1AfRVgEXBfB+gF0lcCWoH2tYBOYPpqQCNwfT3QF9i+AegJfN8CtAWhbwJagtS3AbIg9o2AJMh9M5C+SVGBvx6zAfmT0r+Bv8JMwP4kyFPir+cswF5KL3WLv14zAFBCLf56Tw9cparFX4upgaJUtPhrOS1QlY5W+vWTXrGgBFB/b72ev3/0igUdQPppP/nfowfKUUEFcP207y/yxKmgAYQ+PywoAFOfCH3A2MdCFzD3kdADBvq10AGG+pXQBgb7pdAEhvuF0AIc/VtoAK7+JciAs38KIuDugyAC/v4hiMCE/i7IwLRBsh68N2WQjMVisVgs9i5bln8LGScNcCrONQAAAABJRU5ErkJggg==";
+    Office.context.mailbox.item.body.getAsync(Office.CoercionType.Html,
+    (bodyResult) => {
+      if (bodyResult.status === Office.AsyncResultStatus.Failed) {
+        console.log(`Failed to get body: ${bodyResult.error.message}`);
+        return;
+      }
 
-    // Get the current body of the message or appointment.
+      // Add the Base64-encoded image to the end of the body.
+      const options = { isInline: true, asyncContext: bodyResult.value };
+      Office.context.mailbox.item.addFileAttachmentFromBase64Async(base64String, "sample.png", options, (attachResult) => {
+        if (attachResult.status === Office.AsyncResultStatus.Failed) {
+          console.log(`Failed to attach file: ${attachResult.error.message}`);
+          return;
+        }
 
-    mailItem.body.getAsync(Office.CoercionType.Html, (bodyResult) => {
-      if (bodyResult.status === Office.AsyncResultStatus.Succeeded) {
-        // Insert the Base64-encoded image to the beginning of the body.
-        const options = { isInline: true, asyncContext: bodyResult.value };
-        mailItem.addFileAttachmentFromBase64Async(base64String, "sample.png", options, (attachResult) => {
-          if (attachResult.status === Office.AsyncResultStatus.Succeeded) {
-            let body = attachResult.asyncContext;
-            body = body.replace("<p class=MsoNormal>", `<p class=MsoNormal><img src="/service/cid:sample.png">`);
-
-            mailItem.body.setAsync(body, { coercionType: Office.CoercionType.Html }, (setResult) => {
-              if (setResult.status === Office.AsyncResultStatus.Succeeded) {
-                console.log("Inline Base64-encoded image added to the body.");
-              } else {
-                console.log(setResult.error.message);
-              }
-            });
-          } else {
-            console.log(attachResult.error.message);
+        let body = attachResult.asyncContext;
+        body += '<img src="/service/cid:sample.png" />';
+
+        Office.context.mailbox.item.body.setAsync(body, { coercionType: Office.CoercionType.Html }, (setResult) => {
+          if (setResult.status === Office.AsyncResultStatus.Failed) {
+            console.log(`Failed to set body: ${setResult.error.message}`);
+            return;
           }
+          
+          console.log("Inline Base64-encoded image added to the end of the body.");
         });
-      } else {
-        console.log(bodyResult.error.message);
-      }
+      });
     });
-'Office.Body#getTypeAsync:member(1)':
+Office.Body#getTypeAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/20-item-body/get-body-format.yaml
@@ -9704,7 +11034,7 @@
 
       console.log("Body format: " + asyncResult.value);
     });
-'Office.Body#prependAsync:member(1)':
+Office.Body#prependAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/20-item-body/prepend-text-to-item-body.yaml
@@ -9716,7 +11046,8 @@
       When prepending a link in HTML markup to the body, you can disable the online link preview by setting the anchor tag's id attribute to "LPNoLP". For example, '<a id="LPNoLP" href="https://www.contoso.com/">Click here!</a>'.
     */
 
-    const text = $("#text-field").val().toString();
+    const text = (document.getElementById("text-field") as
+    HTMLInputElement).value;
 
 
     // It's recommended to call getTypeAsync and pass its returned value to the
@@ -9738,7 +11069,7 @@
         console.log(`"${text}" prepended to the body.`);
       });
     });
-'Office.Body#prependOnSendAsync:member(1)':
+Office.Body#prependOnSendAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/20-item-body/prepend-text-on-send.yaml
@@ -9747,7 +11078,8 @@
     // This snippet prepends text to the beginning of the message or
     appointment's body once it's sent.
 
-    const text = $("#text-field").val().toString();
+    const text = (document.getElementById("text-field") as
+    HTMLInputElement).value;
 
 
     // It's recommended to call getTypeAsync and pass its returned value to the
@@ -9769,44 +11101,43 @@
         console.log(`"${text}" will be prepended to the body once the message or appointment is sent. Send the mail item to test this feature.`);
       });
     });
-'Office.Body#setAsync:member(1)':
+Office.Body#setAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/20-item-body/add-inline-base64-image.yaml
 
 
-    const mailItem = Office.context.mailbox.item;
+    // Get the current body of the message or appointment.
 
-    const base64String =
-      "iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAnUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAN0S+bUAAAAMdFJOUwAQIDBAUI+fr7/P7yEupu8AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAF8SURBVGhD7dfLdoMwDEVR6Cspzf9/b20QYOthS5Zn0Z2kVdY6O2WULrFYLBaLxd5ur4mDZD14b8ogWS/dtxV+dmx9ysA2QUj9TQRWv5D7HyKwuIW9n0vc8tkpHP0W4BOg3wQ8wtlvA+PC1e8Ao8Ld7wFjQtHvAiNC2e8DdqHqKwCrUPc1gE1AfRVgEXBfB+gF0lcCWoH2tYBOYPpqQCNwfT3QF9i+AegJfN8CtAWhbwJagtS3AbIg9o2AJMh9M5C+SVGBvx6zAfmT0r+Bv8JMwP4kyFPir+cswF5KL3WLv14zAFBCLf56Tw9cparFX4upgaJUtPhrOS1QlY5W+vWTXrGgBFB/b72ev3/0igUdQPppP/nfowfKUUEFcP207y/yxKmgAYQ+PywoAFOfCH3A2MdCFzD3kdADBvq10AGG+pXQBgb7pdAEhvuF0AIc/VtoAK7+JciAs38KIuDugyAC/v4hiMCE/i7IwLRBsh68N2WQjMVisVgs9i5bln8LGScNcCrONQAAAABJRU5ErkJggg==";
+    Office.context.mailbox.item.body.getAsync(Office.CoercionType.Html,
+    (bodyResult) => {
+      if (bodyResult.status === Office.AsyncResultStatus.Failed) {
+        console.log(`Failed to get body: ${bodyResult.error.message}`);
+        return;
+      }
 
-    // Get the current body of the message or appointment.
+      // Add the Base64-encoded image to the end of the body.
+      const options = { isInline: true, asyncContext: bodyResult.value };
+      Office.context.mailbox.item.addFileAttachmentFromBase64Async(base64String, "sample.png", options, (attachResult) => {
+        if (attachResult.status === Office.AsyncResultStatus.Failed) {
+          console.log(`Failed to attach file: ${attachResult.error.message}`);
+          return;
+        }
 
-    mailItem.body.getAsync(Office.CoercionType.Html, (bodyResult) => {
-      if (bodyResult.status === Office.AsyncResultStatus.Succeeded) {
-        // Insert the Base64-encoded image to the beginning of the body.
-        const options = { isInline: true, asyncContext: bodyResult.value };
-        mailItem.addFileAttachmentFromBase64Async(base64String, "sample.png", options, (attachResult) => {
-          if (attachResult.status === Office.AsyncResultStatus.Succeeded) {
-            let body = attachResult.asyncContext;
-            body = body.replace("<p class=MsoNormal>", `<p class=MsoNormal><img src="/service/cid:sample.png">`);
-
-            mailItem.body.setAsync(body, { coercionType: Office.CoercionType.Html }, (setResult) => {
-              if (setResult.status === Office.AsyncResultStatus.Succeeded) {
-                console.log("Inline Base64-encoded image added to the body.");
-              } else {
-                console.log(setResult.error.message);
-              }
-            });
-          } else {
-            console.log(attachResult.error.message);
+        let body = attachResult.asyncContext;
+        body += '<img src="/service/cid:sample.png" />';
+
+        Office.context.mailbox.item.body.setAsync(body, { coercionType: Office.CoercionType.Html }, (setResult) => {
+          if (setResult.status === Office.AsyncResultStatus.Failed) {
+            console.log(`Failed to set body: ${setResult.error.message}`);
+            return;
           }
+          
+          console.log("Inline Base64-encoded image added to the end of the body.");
         });
-      } else {
-        console.log(bodyResult.error.message);
-      }
+      });
     });
-'Office.Body#setSelectedDataAsync:member(1)':
+Office.Body#setSelectedDataAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/20-item-body/replace-selected-text.yaml
@@ -9818,7 +11149,8 @@
       If you want to use a link in HTML markup as a value of the setSelectedDataAsync call's data parameter, you can disable online link preview by setting the anchor tag's id attribute to "LPNoLP". For example, '<a id="LPNoLP" href="https://www.contoso.com/">Click here!</a>'.
     */
 
-    const text = $("#text-field").val().toString();
+    const text = (document.getElementById("text-field") as
+    HTMLInputElement).value;
 
 
     // It's recommended to call getTypeAsync and pass its returned value to the
@@ -9840,7 +11172,7 @@
         console.log(`Replaced selected text with "${text}".`);
       });
     });
-'Office.Body#setSignatureAsync:member(1)':
+Office.Body#setSignatureAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml
@@ -9857,7 +11189,7 @@
       { isInline: true },
       function(result) {
         if (result.status == Office.AsyncResultStatus.Succeeded) {
-          const signature = $("#signature").val() + "<img src='/service/cid:myImage.png'>";
+          const signature = (document.getElementById("signature") as HTMLInputElement).value + "<img src='/service/cid:myImage.png'>";
           console.log(`Setting signature to "${signature}".`);
           Office.context.mailbox.item.body.setSignatureAsync(
             signature,
@@ -9878,7 +11210,8 @@
 
     // Set the signature for the current item.
 
-    const signature = $("#signature").val();
+    const signature = (document.getElementById("signature") as
+    HTMLInputElement).value;
 
     console.log(`Setting signature to "${signature}".`);
 
@@ -9890,7 +11223,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.Categories#addAsync:member(1)':
+Office.Categories#addAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-categories.yaml
@@ -9921,7 +11254,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.Categories#getAsync:member(2)':
+Office.Categories#getAsync:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-categories.yaml
@@ -9940,7 +11273,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.Categories#removeAsync:member(1)':
+Office.Categories#removeAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-categories.yaml
@@ -9966,19 +11299,52 @@
         console.error(asyncResult.error);
       }
     });
-'Office.CustomProperties#get:member(1)':
+Office.CoercionTypeOptions:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/20-item-body/append-text-on-send.yaml
+
+
+    // This snippet appends text to the end of the message or appointment's body
+    once it's sent.
+
+    const text = (document.getElementById("text-field") as
+    HTMLInputElement).value;
+
+
+    // It's recommended to call getTypeAsync and pass its returned value to the
+    options.coercionType parameter of the appendOnSendAsync call.
+
+    Office.context.mailbox.item.body.getTypeAsync((asyncResult) => {
+      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+        console.log("Action failed with error: " + asyncResult.error.message);
+        return;
+      }
+
+      const bodyFormat = asyncResult.value;
+      Office.context.mailbox.item.body.appendOnSendAsync(text, { coercionType: bodyFormat }, (asyncResult) => {
+        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+          console.log("Action failed with error: " + asyncResult.error.message);
+          return;
+        }
+
+        console.log(`"${text}" will be appended to the body once the message or appointment is sent. Send the mail item to test this feature.`);
+      });
+    });
+Office.CustomProperties#get:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/15-item-custom-properties/load-set-get-save.yaml
 
 
-    const propertyName = $("#get-property-name").val();
+    const propertyName = (document.getElementById("get-property-name") as
+    HTMLInputElement).value;
 
     const propertyValue = customProps.get(propertyName);
 
     console.log(`The value of custom property "${propertyName}" is
     "${propertyValue}".`);
-'Office.CustomProperties#getAll:member(1)':
+Office.CustomProperties#getAll:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/15-item-custom-properties/load-set-get-save.yaml
@@ -9994,18 +11360,19 @@
 
 
     console.log(allCustomProps);
-'Office.CustomProperties#remove:member(1)':
+Office.CustomProperties#remove:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/15-item-custom-properties/load-set-get-save.yaml
 
 
-    const propertyName = $("#remove-property-name").val();
+    const propertyName = (document.getElementById("remove-property-name") as
+    HTMLInputElement).value;
 
     customProps.remove(propertyName);
 
     console.log(`Custom property "${propertyName}" removed.`);
-'Office.CustomProperties#saveAsync:member(1)':
+Office.CustomProperties#saveAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/15-item-custom-properties/load-set-get-save.yaml
@@ -10019,21 +11386,23 @@
 
       console.log(`Custom properties saved with status: ${result.status}`);
     });
-'Office.CustomProperties#set:member(1)':
+Office.CustomProperties#set:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/15-item-custom-properties/load-set-get-save.yaml
 
 
-    const propertyName = $("#set-property-name").val();
+    const propertyName = (document.getElementById("set-property-name") as
+    HTMLInputElement).value;
 
-    const propertyValue = $("#property-value").val();
+    const propertyValue = (document.getElementById("property-value") as
+    HTMLInputElement).value;
 
     customProps.set(propertyName, propertyValue);
 
     console.log(`Custom property "${propertyName}" set to value
     "${propertyValue}".`);
-'Office.DelayDeliveryTime#getAsync:member(2)':
+Office.DelayDeliveryTime#getAsync:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/delay-message-delivery.yaml
@@ -10055,7 +11424,7 @@
         console.log(`Message delivery date and time: ${date.toString()}`);
       }
     });
-'Office.DelayDeliveryTime#setAsync:member(2)':
+Office.DelayDeliveryTime#setAsync:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/delay-message-delivery.yaml
@@ -10079,7 +11448,7 @@
         }
       });
     }
-'Office.Diagnostics:interface':
+Office.Diagnostics:interface:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-diagnostic-information.yaml
@@ -10112,7 +11481,7 @@
         console.log("Current view (Outlook on the web only): Viewed from a desktop computer");
         break;
     }
-'Office.Display#body:member':
+Office.Display#body:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml
@@ -10125,9 +11494,9 @@
     different message in the Reading Pane or closes the window of the current
     message.
 
-    const bodyText = $("#body-text-field")
-      .val()
-      .toString();
+    const bodyText = (document.getElementById("body-text-field") as
+    HTMLInputElement).value;
+
     Office.context.mailbox.item.display.body.setAsync(bodyText, (asyncResult) =>
     {
       if (asyncResult.status === Office.AsyncResultStatus.Failed) {
@@ -10137,7 +11506,7 @@
 
       console.log("Temporarily set the content displayed in the body.");
     });
-'Office.Display#subject:member':
+Office.Display#subject:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml
@@ -10150,9 +11519,9 @@
     different message in the Reading Pane or closes the window of the current
     message.
 
-    const subjectText = $("#subject-text-field")
-      .val()
-      .toString();
+    const subjectText = (document.getElementById("subject-text-field") as
+    HTMLInputElement).value;
+
     Office.context.mailbox.item.display.subject.setAsync(subjectText,
     (asyncResult) => {
       if (asyncResult.status === Office.AsyncResultStatus.Failed) {
@@ -10162,7 +11531,7 @@
 
       console.log("Temporarily set the content displayed in the subject field.");
     });
-'Office.DisplayedBody#setAsync:member(2)':
+Office.DisplayedBody#setAsync:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml
@@ -10175,9 +11544,9 @@
     different message in the Reading Pane or closes the window of the current
     message.
 
-    const bodyText = $("#body-text-field")
-      .val()
-      .toString();
+    const bodyText = (document.getElementById("body-text-field") as
+    HTMLInputElement).value;
+
     Office.context.mailbox.item.display.body.setAsync(bodyText, (asyncResult) =>
     {
       if (asyncResult.status === Office.AsyncResultStatus.Failed) {
@@ -10187,7 +11556,7 @@
 
       console.log("Temporarily set the content displayed in the body.");
     });
-'Office.DisplayedSubject#setAsync:member(2)':
+Office.DisplayedSubject#setAsync:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml
@@ -10200,9 +11569,9 @@
     different message in the Reading Pane or closes the window of the current
     message.
 
-    const subjectText = $("#subject-text-field")
-      .val()
-      .toString();
+    const subjectText = (document.getElementById("subject-text-field") as
+    HTMLInputElement).value;
+
     Office.context.mailbox.item.display.subject.setAsync(subjectText,
     (asyncResult) => {
       if (asyncResult.status === Office.AsyncResultStatus.Failed) {
@@ -10212,55 +11581,190 @@
 
       console.log("Temporarily set the content displayed in the subject field.");
     });
-'Office.EnhancedLocation#addAsync:member(1)':
+Office.DragAndDropEventArgs:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/80-events/drag-drop-item.yaml
 
 
-    const locations = [
-      {
-        id: "Contoso",
-        type: Office.MailboxEnums.LocationType.Custom
-      },
-      {
-        id: "room500@test.com",
-        type: Office.MailboxEnums.LocationType.Room
-      }
-    ];
+    function dragAndDropEventHandler(event) {
+        Office.context.mailbox.addHandlerAsync(Office.EventType.DragAndDropEvent, (event) => {
+        console.log(`Event type: ${event.type}`);
 
-    Office.context.mailbox.item.enhancedLocation.addAsync(locations, (result) =>
-    {
-      if (result.status === Office.AsyncResultStatus.Succeeded) {
-        console.log(`Successfully added locations ${JSON.stringify(locations)}`);
-      } else {
-        console.error(`Failed to add locations. Error message: ${result.error.message}`);
-      }
-    });
-'Office.EnhancedLocation#getAsync:member(1)':
+        const eventData = event.dragAndDropEventData;
+        console.log(`x-coordinate: ${eventData.pageX}, y-coordinate: ${eventData.pageY}`);
+
+        if (eventData.type == "drop") {
+          console.log("Items dropped into task pane.");
+          const files = eventData.dataTransfer.files;
+          files.forEach((file) => {
+            const content = file.fileContent;
+            const name = file.name;
+            const fileType = file.type;
+            console.log(`File name: ${name}`);
+            console.log(`File type: ${fileType}`);
+            console.log(`Contents: ${content.text().then((text) => { console.log(text); })}`);
+          });
+        }
+      });
+    }
+Office.DragoverEventData:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/80-events/drag-drop-item.yaml
 
 
-    Office.context.mailbox.item.enhancedLocation.getAsync((result) => {
-      if (result.status !== Office.AsyncResultStatus.Succeeded) {
-        console.error(`Failed to get locations. Error message: ${result.error.message}`);
-        return;
-      }
-      const places = result.value;
-      if (places && places.length > 0) {
-        result.value.forEach(function(place) {
-          console.log(`Location: ${place.displayName} (type: ${place.locationIdentifier.type})`);
-          if (place.locationIdentifier.type === Office.MailboxEnums.LocationType.Room) {
-            console.log("Email address: " + place.emailAddress);
-          }
-        });
-      } else {
-        console.log("There are no locations.");
-      }
-    });
-'Office.EnhancedLocation#removeAsync:member(1)':
+    function dragAndDropEventHandler(event) {
+        Office.context.mailbox.addHandlerAsync(Office.EventType.DragAndDropEvent, (event) => {
+        console.log(`Event type: ${event.type}`);
+
+        const eventData = event.dragAndDropEventData;
+        console.log(`x-coordinate: ${eventData.pageX}, y-coordinate: ${eventData.pageY}`);
+
+        if (eventData.type == "drop") {
+          console.log("Items dropped into task pane.");
+          const files = eventData.dataTransfer.files;
+          files.forEach((file) => {
+            const content = file.fileContent;
+            const name = file.name;
+            const fileType = file.type;
+            console.log(`File name: ${name}`);
+            console.log(`File type: ${fileType}`);
+            console.log(`Contents: ${content.text().then((text) => { console.log(text); })}`);
+          });
+        }
+      });
+    }
+Office.DropEventData:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/80-events/drag-drop-item.yaml
+
+
+    function dragAndDropEventHandler(event) {
+        Office.context.mailbox.addHandlerAsync(Office.EventType.DragAndDropEvent, (event) => {
+        console.log(`Event type: ${event.type}`);
+
+        const eventData = event.dragAndDropEventData;
+        console.log(`x-coordinate: ${eventData.pageX}, y-coordinate: ${eventData.pageY}`);
+
+        if (eventData.type == "drop") {
+          console.log("Items dropped into task pane.");
+          const files = eventData.dataTransfer.files;
+          files.forEach((file) => {
+            const content = file.fileContent;
+            const name = file.name;
+            const fileType = file.type;
+            console.log(`File name: ${name}`);
+            console.log(`File type: ${fileType}`);
+            console.log(`Contents: ${content.text().then((text) => { console.log(text); })}`);
+          });
+        }
+      });
+    }
+Office.DroppedItems:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/80-events/drag-drop-item.yaml
+
+
+    function dragAndDropEventHandler(event) {
+        Office.context.mailbox.addHandlerAsync(Office.EventType.DragAndDropEvent, (event) => {
+        console.log(`Event type: ${event.type}`);
+
+        const eventData = event.dragAndDropEventData;
+        console.log(`x-coordinate: ${eventData.pageX}, y-coordinate: ${eventData.pageY}`);
+
+        if (eventData.type == "drop") {
+          console.log("Items dropped into task pane.");
+          const files = eventData.dataTransfer.files;
+          files.forEach((file) => {
+            const content = file.fileContent;
+            const name = file.name;
+            const fileType = file.type;
+            console.log(`File name: ${name}`);
+            console.log(`File type: ${fileType}`);
+            console.log(`Contents: ${content.text().then((text) => { console.log(text); })}`);
+          });
+        }
+      });
+    }
+Office.DroppedItemDetails:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/80-events/drag-drop-item.yaml
+
+
+    function dragAndDropEventHandler(event) {
+        Office.context.mailbox.addHandlerAsync(Office.EventType.DragAndDropEvent, (event) => {
+        console.log(`Event type: ${event.type}`);
+
+        const eventData = event.dragAndDropEventData;
+        console.log(`x-coordinate: ${eventData.pageX}, y-coordinate: ${eventData.pageY}`);
+
+        if (eventData.type == "drop") {
+          console.log("Items dropped into task pane.");
+          const files = eventData.dataTransfer.files;
+          files.forEach((file) => {
+            const content = file.fileContent;
+            const name = file.name;
+            const fileType = file.type;
+            console.log(`File name: ${name}`);
+            console.log(`File type: ${fileType}`);
+            console.log(`Contents: ${content.text().then((text) => { console.log(text); })}`);
+          });
+        }
+      });
+    }
+Office.EnhancedLocation#addAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml
+
+
+    const locations = [
+      {
+        id: "Contoso",
+        type: Office.MailboxEnums.LocationType.Custom
+      },
+      {
+        id: "room500@test.com",
+        type: Office.MailboxEnums.LocationType.Room
+      }
+    ];
+
+    Office.context.mailbox.item.enhancedLocation.addAsync(locations, (result) =>
+    {
+      if (result.status === Office.AsyncResultStatus.Succeeded) {
+        console.log(`Successfully added locations ${JSON.stringify(locations)}`);
+      } else {
+        console.error(`Failed to add locations. Error message: ${result.error.message}`);
+      }
+    });
+Office.EnhancedLocation#getAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml
+
+
+    Office.context.mailbox.item.enhancedLocation.getAsync((result) => {
+      if (result.status !== Office.AsyncResultStatus.Succeeded) {
+        console.error(`Failed to get locations. Error message: ${result.error.message}`);
+        return;
+      }
+      const places = result.value;
+      if (places && places.length > 0) {
+        result.value.forEach(function(place) {
+          console.log(`Location: ${place.displayName} (type: ${place.locationIdentifier.type})`);
+          if (place.locationIdentifier.type === Office.MailboxEnums.LocationType.Room) {
+            console.log("Email address: " + place.emailAddress);
+          }
+        });
+      } else {
+        console.log("There are no locations.");
+      }
+    });
+Office.EnhancedLocation#removeAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml
@@ -10285,7 +11789,7 @@
         console.error(`Failed to remove locations. Error message: ${result.error.message}`);
       }
     });
-'Office.From#getAsync:member(1)':
+Office.From#getAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-from-message-compose.yaml
@@ -10299,7 +11803,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.InternetHeaders#getAsync:member(1)':
+Office.InternetHeaders#getAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml
@@ -10315,7 +11819,7 @@
         }
       }
     );
-'Office.InternetHeaders#removeAsync:member(1)':
+Office.InternetHeaders#removeAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml
@@ -10331,7 +11835,7 @@
         }
       }
     );
-'Office.InternetHeaders#setAsync:member(1)':
+Office.InternetHeaders#setAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml
@@ -10348,7 +11852,7 @@
       }
 
     );
-'Office.IsAllDayEvent#getAsync:member(2)':
+Office.IsAllDayEvent#getAsync:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/99-preview-apis/get-set-isalldayevent.yaml
@@ -10361,7 +11865,7 @@
         console.log("Failed to get if this is an all-day event. Error: " + JSON.stringify(asyncResult.error));
       }
     });
-'Office.IsAllDayEvent#setAsync:member(1)':
+Office.IsAllDayEvent#setAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/99-preview-apis/get-set-isalldayevent.yaml
@@ -10375,7 +11879,7 @@
         console.log("Appointment set to all-day event.");
       }
     });
-'Office.Item:interface':
+Office.Item:interface:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-item-type.yaml
@@ -10391,7 +11895,20 @@
             console.log(`Current item is a ${itemType}. A message could be an email, meeting request, meeting response, or meeting cancellation.`);
             break;
     }
-'Office.Location#getAsync:member(2)':
+Office.LocalClientTime:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-start-read.yaml
+
+
+    const time = Office.context.mailbox.item.start;
+
+    const localTime = Office.context.mailbox.convertToLocalClientTime(time);
+
+    console.log(`Appointment starts (local): ${localTime.month +
+    1}/${localTime.date}/${localTime.year},
+    ${localTime.hours}:${localTime.minutes}:${localTime.seconds}`);
+Office.Location#getAsync:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-location-appointment-organizer.yaml
@@ -10404,7 +11921,7 @@
       }
       console.log(`Appointment location: ${result.value}`);
     });
-'Office.Location#setAsync:member(1)':
+Office.Location#setAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-location-appointment-organizer.yaml
@@ -10419,10 +11936,10 @@
       }
       console.log(`Successfully set location to ${location}`);
     });
-'Office.Mailbox#convertToEwsId:member(1)':
+Office.Mailbox#convertToEwsId:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/ids-and-urls.yaml
 
 
     // Get the EWS URL and EWS item ID.
@@ -10448,10 +11965,23 @@
     Office.MailboxEnums.RestVersion.v2_0);
 
     console.log("EWS ID (from REST ID): " + ewsId2);
-'Office.Mailbox#convertToRestId:member(1)':
+Office.Mailbox#convertToLocalClientTime:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-start-read.yaml
+
+
+    const time = Office.context.mailbox.item.start;
+
+    const localTime = Office.context.mailbox.convertToLocalClientTime(time);
+
+    console.log(`Appointment starts (local): ${localTime.month +
+    1}/${localTime.date}/${localTime.year},
+    ${localTime.hours}:${localTime.minutes}:${localTime.seconds}`);
+Office.Mailbox#convertToRestId:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/ids-and-urls.yaml
 
 
     // Get the EWS URL and EWS item ID.
@@ -10477,7 +12007,7 @@
     Office.MailboxEnums.RestVersion.v2_0);
 
     console.log("EWS ID (from REST ID): " + ewsId2);
-'Office.Mailbox#diagnostics:member':
+Office.Mailbox#diagnostics:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-diagnostic-information.yaml
@@ -10510,22 +12040,24 @@
         console.log("Current view (Outlook on the web only): Viewed from a desktop computer");
         break;
     }
-'Office.Mailbox#displayAppointmentForm:member(1)':
+Office.Mailbox#displayAppointmentForm:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-existing-appointment.yaml
 
 
-    const itemId = $("#itemId").val();
+    const itemId = (document.getElementById("itemId") as
+    HTMLInputElement).value;
 
     Office.context.mailbox.displayAppointmentForm(itemId);
-'Office.Mailbox#displayAppointmentFormAsync:member(1)':
+Office.Mailbox#displayAppointmentFormAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-existing-appointment.yaml
 
 
-    const itemId = $("#itemId").val();
+    const itemId = (document.getElementById("itemId") as
+    HTMLInputElement).value;
 
 
     // The async version will return error 9049 if the item is not found.
@@ -10536,22 +12068,24 @@
     function(asyncResult) {
       console.log("Result: " + JSON.stringify(asyncResult));
     });
-'Office.Mailbox#displayMessageForm:member(1)':
+Office.Mailbox#displayMessageForm:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-existing-message.yaml
 
 
-    const itemId = $("#itemId").val();
+    const itemId = (document.getElementById("itemId") as
+    HTMLInputElement).value;
 
     Office.context.mailbox.displayMessageForm(itemId);
-'Office.Mailbox#displayMessageFormAsync:member(1)':
+Office.Mailbox#displayMessageFormAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-existing-message.yaml
 
 
-    const itemId = $("#itemId").val();
+    const itemId = (document.getElementById("itemId") as
+    HTMLInputElement).value;
 
 
     // The async version will return error 9049 if the item is not found.
@@ -10562,7 +12096,7 @@
     (asyncResult) {
      console.log("Result: " + JSON.stringify(asyncResult));
     });
-'Office.Mailbox#displayNewAppointmentForm:member(1)':
+Office.Mailbox#displayNewAppointmentForm:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-new-appointment.yaml
@@ -10585,7 +12119,7 @@
       resources: ["projector@contoso.com"],
       body: "Hello World!"
     });
-'Office.Mailbox#displayNewAppointmentFormAsync:member(1)':
+Office.Mailbox#displayNewAppointmentFormAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-new-appointment.yaml
@@ -10617,7 +12151,7 @@
         console.log(JSON.stringify(asyncResult));
       }
     );
-'Office.Mailbox#displayNewMessageForm:member(1)':
+Office.Mailbox#displayNewMessageForm:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-new-message.yaml
@@ -10637,7 +12171,7 @@
         }
       ]
     });
-'Office.Mailbox#displayNewMessageFormAsync:member(1)':
+Office.Mailbox#displayNewMessageFormAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-new-message.yaml
@@ -10666,10 +12200,10 @@
         console.log(JSON.stringify(asyncResult));
       }
     );
-'Office.Mailbox#ewsUrl:member':
+Office.Mailbox#ewsUrl:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/ids-and-urls.yaml
 
 
     // Get the EWS URL and EWS item ID.
@@ -10695,10 +12229,10 @@
     Office.MailboxEnums.RestVersion.v2_0);
 
     console.log("EWS ID (from REST ID): " + ewsId2);
-'Office.Mailbox#getCallbackTokenAsync:member(2)':
+Office.Mailbox#getCallbackTokenAsync:member(2):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/user-callback-token.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/user-callback-token.yaml
 
 
     Office.context.mailbox.getCallbackTokenAsync((result) => {
@@ -10709,7 +12243,7 @@
 
         console.log(result.value);
     });
-'Office.Mailbox#getSelectedItemsAsync:member(2)':
+Office.Mailbox#getSelectedItemsAsync:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-message-properties.yaml
@@ -10733,10 +12267,10 @@
         console.log(`Has attachment: ${message.hasAttachment}`);
       });
     });
-'Office.Mailbox#getUserIdentityTokenAsync:member(1)':
+Office.Mailbox#getUserIdentityTokenAsync:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/user-identity-token.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/user-identity-token.yaml
 
 
     Office.context.mailbox.getUserIdentityTokenAsync((result) => {
@@ -10747,10 +12281,41 @@
 
         console.log(result.value);
     });
-'Office.Mailbox#makeEwsRequestAsync:member(1)':
+Office.Mailbox#loadItemByIdAsync:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-attendee.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-loaded-message-properties.yaml
+
+
+    async function getSenderEmailAddress(item) {
+      const itemId = item.itemId;
+      await new Promise((resolve) => {
+        Office.context.mailbox.loadItemByIdAsync(itemId, (result) => {
+          if (result.status === Office.AsyncResultStatus.Failed) {
+            console.log(result.error.message);
+            return;
+          }
+
+          const loadedItem = result.value;
+          const sender = loadedItem.from.emailAddress;
+          appendToListItem(sender);
+
+          // Unload the current message before processing another selected message.
+          loadedItem.unloadAsync((asyncResult) => {
+            if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+              console.log(asyncResult.error.message);
+              return;
+            }
+
+            resolve();
+          });
+        });
+      });
+    }
+Office.Mailbox#makeEwsRequestAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/get-icaluid-as-attendee.yaml
 
 
     const ewsId = Office.context.mailbox.item.itemId;
@@ -10783,7 +12348,7 @@
     });
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/send-message-using-make-ews-request-async.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/send-message-using-make-ews-request-async.yaml
 
 
     const request = '<soap:Envelope
@@ -10811,7 +12376,7 @@
     Office.context.mailbox.makeEwsRequestAsync(request, (result) => {
         console.log(result);
     });
-'Office.Mailbox#masterCategories:member':
+Office.Mailbox#masterCategories:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-master-categories.yaml
@@ -10867,7 +12432,7 @@
         console.log("masterCategories.removeAsync call failed with error: " + asyncResult.error.message);
       }
     });
-'Office.MailboxEnums.ActionType:enum':
+Office.MailboxEnums.ActionType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
@@ -10875,7 +12440,8 @@
 
     // Adds an informational message with actions to the mail item.
 
-    const id = $("#notificationId").val().toString();
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
 
 
     const itemId = Office.context.mailbox.item.itemId;
@@ -10883,7 +12449,7 @@
     const details = {
       type: Office.MailboxEnums.ItemNotificationMessageType.InsightMessage,
       message: "This is an insight notification with id = " + id,
-      icon: "icon1",
+      icon: "PG.Icon.16",
       actions: [
         {
           actionText: "Open insight",
@@ -10898,7 +12464,7 @@
 
     Office.context.mailbox.item.notificationMessages.addAsync(id, details,
     handleResult);
-'Office.MailboxEnums.AppointmentSensitivityType:enum':
+Office.MailboxEnums.AppointmentSensitivityType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-sensitivity-level.yaml
@@ -10914,7 +12480,7 @@
         }
       }
     );
-'Office.MailboxEnums.AttachmentContentFormat:enum':
+Office.MailboxEnums.AttachmentContentFormat:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/get-attachment-content.yaml
@@ -10945,7 +12511,7 @@
 
       console.log(result.value.content);
     }
-'Office.MailboxEnums.AttachmentType:enum':
+Office.MailboxEnums.AttachmentType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml
@@ -10993,7 +12559,7 @@
         console.log("No attachments on this message.");
       }
     });
-'Office.MailboxEnums.CategoryColor:enum':
+Office.MailboxEnums.CategoryColor:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-master-categories.yaml
@@ -11015,7 +12581,7 @@
         console.log("masterCategories.addAsync call failed with error: " + asyncResult.error.message);
       }
     });
-'Office.MailboxEnums.ComposeType:enum':
+Office.MailboxEnums.ComposeType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml
@@ -11035,7 +12601,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.MailboxEnums.Days:enum':
+Office.MailboxEnums.Days:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-set-recurrence-appointment-organizer.yaml
@@ -11087,7 +12653,7 @@
       }
       console.log(`Succeeded in setting recurrence pattern ${JSON.stringify(pattern)}`);
     });
-'Office.MailboxEnums.ItemNotificationMessageType:enum':
+Office.MailboxEnums.ItemNotificationMessageType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
@@ -11095,7 +12661,8 @@
 
     // Adds an error notification to the mail item.
 
-    const id = $("#notificationId").val().toString();
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
 
     const details =
       {
@@ -11104,7 +12671,7 @@
       };
     Office.context.mailbox.item.notificationMessages.addAsync(id, details,
     handleResult);
-'Office.MailboxEnums.ItemType:enum':
+Office.MailboxEnums.ItemType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-item-type.yaml
@@ -11120,7 +12687,7 @@
             console.log(`Current item is a ${itemType}. A message could be an email, meeting request, meeting response, or meeting cancellation.`);
             break;
     }
-'Office.MailboxEnums.LocationType:enum':
+Office.MailboxEnums.LocationType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml
@@ -11145,7 +12712,7 @@
         console.error(`Failed to add locations. Error message: ${result.error.message}`);
       }
     });
-'Office.MailboxEnums.Month:enum':
+Office.MailboxEnums.Month:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-set-recurrence-appointment-organizer.yaml
@@ -11197,7 +12764,7 @@
       }
       console.log(`Succeeded in setting recurrence pattern ${JSON.stringify(pattern)}`);
     });
-'Office.MailboxEnums.OWAView:enum':
+Office.MailboxEnums.OWAView:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-diagnostic-information.yaml
@@ -11230,7 +12797,7 @@
         console.log("Current view (Outlook on the web only): Viewed from a desktop computer");
         break;
     }
-'Office.MailboxEnums.RecipientType:enum':
+Office.MailboxEnums.RecipientType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-to-message-read.yaml
@@ -11285,7 +12852,7 @@
         console.log("Other Recipients:");
         otherRecipients.forEach((recipient) => console.log(`${recipient.displayName}, ${recipient.emailAddress}`));
     }
-'Office.MailboxEnums.RecurrenceTimeZone:enum':
+Office.MailboxEnums.RecurrenceTimeZone:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-set-recurrence-appointment-organizer.yaml
@@ -11337,7 +12904,7 @@
       }
       console.log(`Succeeded in setting recurrence pattern ${JSON.stringify(pattern)}`);
     });
-'Office.MailboxEnums.RecurrenceType:enum':
+Office.MailboxEnums.RecurrenceType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-set-recurrence-appointment-organizer.yaml
@@ -11389,7 +12956,7 @@
       }
       console.log(`Succeeded in setting recurrence pattern ${JSON.stringify(pattern)}`);
     });
-'Office.MailboxEnums.ResponseType:enum':
+Office.MailboxEnums.ResponseType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-all-attendees.yaml
@@ -11430,10 +12997,10 @@
       console.log("No response: ");
       printAttendees(noResponse);
     }
-'Office.MailboxEnums.RestVersion:enum':
+Office.MailboxEnums.RestVersion:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/ids-and-urls.yaml
 
 
     // Get the EWS URL and EWS item ID.
@@ -11459,7 +13026,7 @@
     Office.MailboxEnums.RestVersion.v2_0);
 
     console.log("EWS ID (from REST ID): " + ewsId2);
-'Office.MailboxEnums.SourceProperty:enum':
+Office.MailboxEnums.SourceProperty:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/20-item-body/get-selected-data.yaml
@@ -11475,7 +13042,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.MailboxEnums.WeekNumber:enum':
+Office.MailboxEnums.WeekNumber:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-set-recurrence-appointment-organizer.yaml
@@ -11527,7 +13094,7 @@
       }
       console.log(`Succeeded in setting recurrence pattern ${JSON.stringify(pattern)}`);
     });
-'Office.MasterCategories#addAsync:member(1)':
+Office.MasterCategories#addAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-master-categories.yaml
@@ -11549,7 +13116,7 @@
         console.log("masterCategories.addAsync call failed with error: " + asyncResult.error.message);
       }
     });
-'Office.MasterCategories#getAsync:member(2)':
+Office.MasterCategories#getAsync:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-master-categories.yaml
@@ -11568,7 +13135,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.MasterCategories#removeAsync:member(1)':
+Office.MasterCategories#removeAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-master-categories.yaml
@@ -11585,15 +13152,32 @@
         console.log("masterCategories.removeAsync call failed with error: " + asyncResult.error.message);
       }
     });
-'Office.MessageCompose#addFileAttachmentAsync:member(1)':
+Office.MessageCompose:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml
+
+
+    const attachmentUrl = (document.getElementById("attachmentUrl") as
+    HTMLInputElement).value;
+
+    Office.context.mailbox.item.addFileAttachmentAsync(
+      attachmentUrl,
+      getFileName(attachmentUrl),
+      { isInline: false },
+      (result) => {
+        console.log(result);
+      }
+    );
+Office.MessageCompose#addFileAttachmentAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml
 
 
-    const attachmentUrl = $("#attachmentUrl")
-      .val()
-      .toString();
+    const attachmentUrl = (document.getElementById("attachmentUrl") as
+    HTMLInputElement).value;
+
     Office.context.mailbox.item.addFileAttachmentAsync(
       attachmentUrl,
       getFileName(attachmentUrl),
@@ -11602,7 +13186,7 @@
         console.log(result);
       }
     );
-'Office.MessageCompose#addFileAttachmentFromBase64Async:member(1)':
+Office.MessageCompose#addFileAttachmentFromBase64Async:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml
@@ -11634,7 +13218,7 @@
       { isInline: true },
       function(result) {
         if (result.status == Office.AsyncResultStatus.Succeeded) {
-          const signature = $("#signature").val() + "<img src='/service/cid:myImage.png'>";
+          const signature = (document.getElementById("signature") as HTMLInputElement).value + "<img src='/service/cid:myImage.png'>";
           console.log(`Setting signature to "${signature}".`);
           Office.context.mailbox.item.body.setSignatureAsync(
             signature,
@@ -11648,7 +13232,7 @@
         }
       }
     );
-'Office.MessageCompose#bcc:member':
+Office.MessageCompose#bcc:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml
@@ -11670,9 +13254,9 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml
 
 
-    const email = $("#emailBcc")
-      .val()
-      .toString();
+    const email = (document.getElementById("emailBcc") as
+    HTMLInputElement).value;
+
     const emailArray = [email];
 
     Office.context.mailbox.item.bcc.setAsync(emailArray, function(asyncResult) {
@@ -11682,7 +13266,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.MessageCompose#categories:member':
+Office.MessageCompose#categories:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-categories.yaml
@@ -11756,7 +13340,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.MessageCompose#cc:member':
+Office.MessageCompose#cc:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml
@@ -11778,9 +13362,9 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml
 
 
-    const email = $("#emailCc")
-      .val()
-      .toString();
+    const email = (document.getElementById("emailCc") as
+    HTMLInputElement).value;
+
     const emailArray = [email];
 
     Office.context.mailbox.item.cc.setAsync(emailArray, function(asyncResult) {
@@ -11790,14 +13374,14 @@
         console.error(asyncResult.error);
       }
     });
-'Office.MessageCompose#close:member(1)':
+Office.MessageCompose#close:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/25-item-save-and-close/close.yaml
 
 
     Office.context.mailbox.item.close();
-'Office.MessageCompose#closeAsync:member(2)':
+Office.MessageCompose#closeAsync:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/25-item-save-and-close/close-async.yaml
@@ -11821,7 +13405,7 @@
           return;
         }
       });
-'Office.MessageCompose#conversationId:member':
+Office.MessageCompose#conversationId:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-conversation-id-message.yaml
@@ -11829,7 +13413,7 @@
 
     console.log(`Conversation ID:
     ${Office.context.mailbox.item.conversationId}`);
-'Office.MessageCompose#delayDeliveryTime:member':
+Office.MessageCompose#delayDeliveryTime:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/delay-message-delivery.yaml
@@ -11853,7 +13437,7 @@
         }
       });
     }
-'Office.MessageCompose#disableClientSignatureAsync:member(1)':
+Office.MessageCompose#disableClientSignatureAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml
@@ -11869,7 +13453,7 @@
         console.error(asyncResult.error);
       }
     });
-'Office.MessageCompose#from:member':
+Office.MessageCompose#from:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-from-message-compose.yaml
@@ -11883,23 +13467,16 @@
         console.error(asyncResult.error);
       }
     });
-'Office.MessageCompose#getAttachmentContentAsync:member(1)':
+Office.MessageCompose#getAttachmentContentAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/get-attachment-content.yaml
 
 
     // Gets the attachments of the current message or appointment in compose
-    mode.
-
-    const options = { asyncContext: { currentItem: item } };
+    mode. The getAttachmentsAsync call can only be used in compose mode.
 
-    // The getAttachmentsAsync call can only be used in compose mode.
-
-    item.getAttachmentsAsync(options, callback);
-
-
-    function callback(result) {
+    Office.context.mailbox.item.getAttachmentsAsync((result) => {
       if (result.status === Office.AsyncResultStatus.Failed) {
         console.log(result.error.message);
         return;
@@ -11912,10 +13489,10 @@
 
       for (let i = 0; i < result.value.length; i++) {
         // Log the attachment type and its contents to the console.
-        result.asyncContext.currentItem.getAttachmentContentAsync(result.value[i].id, handleAttachmentsCallback);
+        Office.context.mailbox.item.getAttachmentContentAsync(result.value[i].id, handleAttachmentsCallback);
       }
-    }
-'Office.MessageCompose#getAttachmentsAsync:member(1)':
+    });
+Office.MessageCompose#getAttachmentsAsync:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml
@@ -11963,4529 +13540,8534 @@
         console.log("No attachments on this message.");
       }
     });
-'Office.MessageCompose#getComposeTypeAsync:member(2)':
+Office.MessageCompose#getComposeTypeAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml
+
+
+    // Get the compose type of the current message.
+
+    Office.context.mailbox.item.getComposeTypeAsync(function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log(
+          "getComposeTypeAsync succeeded with composeType: " +
+            asyncResult.value.composeType +
+            " and coercionType: " +
+            asyncResult.value.coercionType
+        );
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+Office.MessageCompose#getConversationIndexAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-conversation-index.yaml
+
+
+    // This snippet returns the Base64-encoded position of the current message
+    in a conversation thread (PR_CONVERSATION_INDEX).
+
+    // The API call is supported on a message being composed and isn't supported
+    on read items or appointments.
+
+    Office.context.mailbox.item.getConversationIndexAsync((result) => {
+       if (result.status === Office.AsyncResultStatus.Failed) {
+          console.log(result.error.message);
+          return;
+       }
+       
+       const conversationIndex = result.value;
+       if (conversationIndex) {
+          console.log("Position in the conversation thread: " + conversationIndex);
+       } else {
+          console.log("The current message doesn't belong to a conversation thread.");
+       }
+    });
+Office.MessageCompose#getItemClassAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-item-class-async.yaml
+
+
+    // This snippet returns the Exchange Web Services item class property
+    (PR_MESSAGE_CLASS) of the current message.
+
+    // The API call is only supported on a message being composed.
+
+    Office.context.mailbox.item.getItemClassAsync((asyncResult) => {
+      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+        console.log("Action failed with error: " + asyncResult.error.message);
+        return;
+      }
+
+      console.log("Item class of the current message: " + asyncResult.value);
+    });
+Office.MessageCompose#getItemIdAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/item-id-compose.yaml
+
+
+    Office.context.mailbox.item.getItemIdAsync((result) => {
+        if (result.status === Office.AsyncResultStatus.Failed) {
+            console.error(`getItemIdAsync failed with message: ${result.error.message}`);
+            return;
+        }
+
+        console.log(result.value);
+    });
+Office.MessageCompose#getSelectedDataAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/20-item-body/get-selected-data.yaml
+
+
+    Office.context.mailbox.item.getSelectedDataAsync(Office.CoercionType.Text,
+    function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        const text = asyncResult.value.data;
+        const prop = asyncResult.value.sourceProperty;
+        console.log("Selected text in " + prop + ": " + text);
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+Office.MessageCompose#getSharedPropertiesAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/65-delegates-and-shared-folders/get-shared-properties.yaml
+
+
+    Office.context.mailbox.item.getSharedPropertiesAsync((result) => {
+      if (result.status === Office.AsyncResultStatus.Failed) {
+        console.error("The current folder or mailbox isn't shared.");
+        return;
+      }
+      const sharedProperties = result.value;
+      console.log(`Owner: ${sharedProperties.owner}`);
+      console.log(`Permissions: ${sharedProperties.delegatePermissions}`);
+      console.log(`Target mailbox: ${sharedProperties.targetMailbox}`);
+    });
+Office.MessageCompose#inReplyTo:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-in-reply-to.yaml
+
+
+    // This snippet gets the ID of the message being replied to by the current
+    message (PR_IN_REPLY_TO_ID).
+
+    // The API call is supported on messages being composed and isn't supported
+    on read items.
+
+    const inReplyTo = Office.context.mailbox.item.inReplyTo;
+
+    if (inReplyTo) {
+      console.log("ID of the message being replied to: " + inReplyTo);
+    } else {
+      console.log("No InReplyTo property available for this message");
+    }
+Office.MessageCompose#internetHeaders:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml
+
+
+    Office.context.mailbox.item.internetHeaders.getAsync(
+      ["preferred-fruit", "preferred-vegetable", "best-vegetable", "nonexistent-header"],
+      function (asyncResult) {
+        if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+          console.log("Selected headers: " + JSON.stringify(asyncResult.value));
+        } else {
+          console.log("Error getting selected headers: " + JSON.stringify(asyncResult.error));
+        }
+      }
+    );
+Office.MessageCompose#isClientSignatureEnabledAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml
+
+
+    // Check if the client signature is currently enabled.
+
+    Office.context.mailbox.item.isClientSignatureEnabledAsync(function(asyncResult)
+    {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log("isClientSignatureEnabledAsync succeeded with result: " + asyncResult.value);
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+Office.MessageCompose#itemType:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-item-type.yaml
+
+
+    const itemType = Office.context.mailbox.item.itemType;
+
+    switch (itemType) {
+        case Office.MailboxEnums.ItemType.Appointment:
+            console.log(`Current item is an ${itemType}.`);
+            break;
+        case Office.MailboxEnums.ItemType.Message:
+            console.log(`Current item is a ${itemType}. A message could be an email, meeting request, meeting response, or meeting cancellation.`);
+            break;
+    }
+Office.MessageCompose#loadCustomPropertiesAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/15-item-custom-properties/load-set-get-save.yaml
+
+
+    Office.context.mailbox.item.loadCustomPropertiesAsync((result) => {
+      if (result.status === Office.AsyncResultStatus.Failed) {
+        console.error(`loadCustomPropertiesAsync failed with message ${result.error.message}`);
+        return;
+      }
+
+      customProps = result.value;
+      console.log("Loaded the CustomProperties object.");
+    });
+Office.MessageCompose#notificationMessages:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Adds a progress indicator to the mail item.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    const details =
+      {
+        type: Office.MailboxEnums.ItemNotificationMessageType.ProgressIndicator,
+        message: "Progress indicator with id = " + id
+      };
+    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
+    handleResult);
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Adds an informational notification to the mail item.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    const details =
+      {
+        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
+        message: "Non-persistent informational notification message with id = " + id,
+        icon: "PG.Icon.16",
+        persistent: false
+      };
+    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
+    handleResult);
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Adds a persistent information notification to the mail item.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    const details =
+      {
+        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
+        message: "Persistent informational notification message with id = " + id,
+        icon: "PG.Icon.16",
+        persistent: true
+      };
+    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
+    handleResult);
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Gets all the notification messages and their keys for the current mail
+    item.
+
+    Office.context.mailbox.item.notificationMessages.getAllAsync((asyncResult)
+    => {
+      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+        console.log(asyncResult.error.message);
+        return;
+      }
+
+      console.log(asyncResult.value);
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Replaces a notification message of a given key with another message.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    Office.context.mailbox.item.notificationMessages.replaceAsync(
+      id,
+      {
+        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
+        message: "Notification message with id = " + id + " has been replaced with an informational message.",
+        icon: "icon2",
+        persistent: false
+      },
+      handleResult);
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Removes a notification message from the current mail item.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    Office.context.mailbox.item.notificationMessages.removeAsync(id,
+    handleResult);
+Office.MessageCompose#removeAttachmentAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml
+
+
+    Office.context.mailbox.item.removeAttachmentAsync(
+      (document.getElementById("attachmentId") as HTMLInputElement).value,
+      (result) => {
+        if (result.status === Office.AsyncResultStatus.Failed) {
+          console.error(result.error.message);
+          return;
+        }
+
+        console.log(`Attachment removed successfully.`);
+      }
+    );
+Office.MessageCompose#sendAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/send-async.yaml
+
+
+    // This snippet sends the current message or appointment being composed.
+
+    Office.context.mailbox.item.sendAsync((asyncResult) => {
+      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+        console.log("Action failed with error: " + asyncResult.error.message);
+        return;
+      }
+    });
+Office.MessageCompose#sensitivityLabel:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/60-sensitivity-label/sensitivity-label.yaml
+
+
+    // This snippet gets the current mail item's sensitivity label.
+
+    Office.context.sensitivityLabelsCatalog.getIsEnabledAsync((asyncResult) => {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded && asyncResult.value == true) {
+        Office.context.mailbox.item.sensitivityLabel.getAsync((asyncResult) => {
+          if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+            console.log(asyncResult.value);
+          } else {
+            console.log("Action failed with error: " + asyncResult.error.message);
+          }
+        });
+      } else {
+        console.log("Action failed with error: " + asyncResult.error.message);
+      }
+    });
+Office.MessageCompose#seriesId:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-series-id.yaml
+
+
+    const seriesId = Office.context.mailbox.item.seriesId;
+
+
+    if (seriesId === undefined) {
+      console.log("This is a message that's not a meeting request.");
+    } else if (seriesId === null) {
+      console.log("This is a single appointment, a parent series, or a meeting request for a series or single meeting.");
+    } else {
+      console.log("This is an instance belonging to series with ID " + seriesId);
+    }
+Office.MessageCompose#sessionData:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/session-data-apis.yaml
+
+
+    Office.context.mailbox.item.sessionData.getAllAsync(function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log("The sessionData is " + JSON.stringify(asyncResult.value));
+      } else {
+        console.log("Failed to get all sessionData. Error: " + JSON.stringify(asyncResult.error));
+      }
+    });
+Office.MessageCompose#setSelectedDataAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/set-selected-data.yaml
+
+
+    Office.context.mailbox.item.setSelectedDataAsync("Replaced",
+    function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log("Selected text has been updated successfully.");
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+Office.MessageCompose#subject:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-subject-compose.yaml
+
+
+    Office.context.mailbox.item.subject.getAsync((result) => {
+      if (result.status !== Office.AsyncResultStatus.Succeeded) {
+        console.error(`Action failed with message ${result.error.message}`);
+        return;
+      }
+      console.log(`Subject: ${result.value}`);
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-subject-compose.yaml
+
+
+    let subject = "Hello World!";
+
+    Office.context.mailbox.item.subject.setAsync(subject, (result) => {
+      if (result.status !== Office.AsyncResultStatus.Succeeded) {
+        console.error(`Action failed with message ${result.error.message}`);
+        return;
+      }
+      console.log(`Successfully set subject to ${subject}`);
+    });
+Office.MessageCompose#to:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml
+
+
+    Office.context.mailbox.item.to.getAsync(function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        const msgTo = asyncResult.value;
+        console.log("Message being sent to:");
+        for (let i = 0; i < msgTo.length; i++) {
+          console.log(msgTo[i].displayName + " (" + msgTo[i].emailAddress + ")");
+        }
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml
+
+
+    const email = (document.getElementById("emailTo") as
+    HTMLInputElement).value;
+
+    const emailArray = [email];
+
+    Office.context.mailbox.item.to.setAsync(emailArray, function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log("Succeeded in setting To field.");
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+Office.MessageRead:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/get-attachments-read.yaml
+
+
+    const item = Office.context.mailbox.item;
+
+
+    if (item.attachments.length > 0) {
+        for (let i = 0; i < item.attachments.length; i++) {
+            const attachment = item.attachments[i];
+            console.log(`${i+1}. Name: ${attachment.name}`);
+            console.log(`ID: ${attachment.id}`);
+            console.log(`Type: ${attachment.attachmentType}`);
+            console.log(`Inline content: ${attachment.isInline}`);
+            console.log(`Size: ${attachment.size}`);
+        }
+    } else {
+        console.log("This mail item doesn't contain any attachments.");
+    }
+Office.MessageRead#attachments:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/get-attachments-read.yaml
+
+
+    const item = Office.context.mailbox.item;
+
+
+    if (item.attachments.length > 0) {
+        for (let i = 0; i < item.attachments.length; i++) {
+            const attachment = item.attachments[i];
+            console.log(`${i+1}. Name: ${attachment.name}`);
+            console.log(`ID: ${attachment.id}`);
+            console.log(`Type: ${attachment.attachmentType}`);
+            console.log(`Inline content: ${attachment.isInline}`);
+            console.log(`Size: ${attachment.size}`);
+        }
+    } else {
+        console.log("This mail item doesn't contain any attachments.");
+    }
+Office.MessageRead#categories:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-categories.yaml
+
+
+    Office.context.mailbox.item.categories.getAsync(function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        const categories = asyncResult.value;
+        if (categories && categories.length > 0) {
+          console.log("Categories assigned to this item:");
+          console.log(JSON.stringify(categories));
+        } else {
+          console.log("There are no categories assigned to this item.");
+        }
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-categories.yaml
+
+
+    // Note: In order for you to successfully add a category,
+
+    // it must be in the mailbox categories master list.
+
+
+    Office.context.mailbox.masterCategories.getAsync(function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        const masterCategories = asyncResult.value;
+        if (masterCategories && masterCategories.length > 0) {
+          // Grab the first category from the master list.
+          const categoryToAdd = [masterCategories[0].displayName];
+          Office.context.mailbox.item.categories.addAsync(categoryToAdd, function(asyncResult) {
+            if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+              console.log(`Successfully assigned category '${categoryToAdd}' to item.`);
+            } else {
+              console.log("categories.addAsync call failed with error: " + asyncResult.error.message);
+            }
+          });
+        } else {
+          console.log("There are no categories in the master list on this mailbox. You can add categories using Office.context.mailbox.masterCategories.addAsync.");
+        }
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-categories.yaml
+
+
+    Office.context.mailbox.item.categories.getAsync(function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        const categories = asyncResult.value;
+        if (categories && categories.length > 0) {
+          // Grab the first category assigned to this item.
+          const categoryToRemove = [categories[0].displayName];
+          Office.context.mailbox.item.categories.removeAsync(categoryToRemove, function(asyncResult) {
+            if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+              console.log(`Successfully unassigned category '${categoryToRemove}' from this item.`);
+            } else {
+              console.log("categories.removeAsync call failed with error: " + asyncResult.error.message);
+            }
+          });
+        } else {
+          console.log("There are no categories assigned to this item.");
+        }
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+Office.MessageRead#cc:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-cc-message-read.yaml
+
+
+    const msgCc = Office.context.mailbox.item.cc;
+
+    console.log("Message copied to:");
+
+    for (let i = 0; i < msgCc.length; i++) {
+      console.log(msgCc[i].displayName + " (" + msgCc[i].emailAddress + ")");
+    }
+Office.MessageRead#conversationId:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-conversation-id-message.yaml
+
+
+    console.log(`Conversation ID:
+    ${Office.context.mailbox.item.conversationId}`);
+Office.MessageRead#dateTimeCreated:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-date-time-created-read.yaml
+
+
+    console.log(`Creation date and time:
+    ${Office.context.mailbox.item.dateTimeCreated}`);
+Office.MessageRead#dateTimeModified:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-date-time-modified-read.yaml
+
+
+    console.log(`Date and time item last modified:
+    ${Office.context.mailbox.item.dateTimeModified}`);
+Office.MessageRead#display:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml
+
+
+    // This snippet temporarily sets the content displayed in the body of a
+    message in read mode.
+
+    // The set content will remain visible until the user switches to a
+    different message in the Reading Pane or closes the window of the current
+    message.
+
+    const bodyText = (document.getElementById("body-text-field") as
+    HTMLInputElement).value;
+
+    Office.context.mailbox.item.display.body.setAsync(bodyText, (asyncResult) =>
+    {
+      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+        console.log(`Action failed with error: ${asyncResult.error.message}`);
+        return;
+      }
+
+      console.log("Temporarily set the content displayed in the body.");
+    });
+Office.MessageRead#displayReplyAllForm:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-forms.yaml
+
+
+    Office.context.mailbox.item.displayReplyAllForm("This is a reply ALL with
+    <b>some bold text</b>.");
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
+
+
+    // Define attachments.
+
+    const base64Attachment = {
+      base64file:
+        "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",
+      inLine: true,
+      name: "script_lab.png",
+      type: Office.MailboxEnums.AttachmentType.Base64
+    };
+
+    const fileAttachment = {
+      inLine: true,
+      name: "dog.jpg",
+      type: Office.MailboxEnums.AttachmentType.File,
+      url: "https://i.imgur.com/9S36xvA.jpg"
+    };
+
+    const itemAttachment = {
+      itemId: Office.context.mailbox.item.itemId,
+      name: "test_email.msg",
+      type: Office.MailboxEnums.AttachmentType.Item
+    };
+
+
+    // Create the reply with attachments.
+
+    Office.context.mailbox.item.displayReplyAllForm({
+      htmlBody:
+        "This is a reply with an inline Base64-encoded attachment, an inline image, and an item attachment.<br><img src='/service/cid:script_lab.png'><br><img src='/service/cid:dog.jpg'>",
+      attachments: [base64Attachment, fileAttachment, itemAttachment],
+      callback: (result) => {
+        if (result.status === Office.AsyncResultStatus.Failed) {
+          console.error(`Action failed with message ${result.error.message}`);
+          return;
+        }
+
+        console.log("Created a reply-all form with attachments.");
+      }
+    });
+Office.MessageRead#displayReplyAllFormAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-forms.yaml
+
+
+    Office.context.mailbox.item.displayReplyAllFormAsync("This is a reply ALL
+    with <b>some bold text</b>.", function(
+      asyncResult
+    ) {
+      console.log(JSON.stringify(asyncResult));
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
+
+
+    // Define attachments.
+
+    const base64Attachment = {
+      base64file:
+        "iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAIAAABt+uBvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxEAAAsRAX9kX5EAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTM0A1t6AAAF3klEQVR4Xt2aMcolRRSFdQUuwSW4AAMzU8ENzAIMDA1NzHUBgqmZkbG4ADGVQRgGZBBElAERRPg9eC+PQ73qc6u66lZ3v48bzH+7uqr6VN/T1f3mjafT8Pr7b37+8G3En99+5akTcAqB/n7+48uP3vvp3TdvgT//+uE7P3woBwv07+s/Xn32jKXhwKF/Xr3wpgdxpEC/ffnp8/ffKkQpAg3QDDr6Ocs5RiCzm0ILEQca02qB7u2mPQ4xpnUCabtBWDWFdbfYmBYJ1HLZN6PBP3794uOiAcdKY0oXKLQbFE71jkBS33FrjClRoNBuXjx7J/QUNNCdZBtTikAtdtO1+JBA34Z5xjRfIG03I/YBTYVMScY0U6DQbsbXGdevF2C6Mc0RKLQbHEUbbz0MZNKPuYnGNCpQaDdY0iQTDR9zU4xpSCB9t+PQ719/7k3T0P49bkw7BQrtZnBajTS+uIwYU7dA4ZzynrhMWF/3sc+YOgQK7WaiNQpCh9bRu36tAmm7wT2MovOmaUAaPY3G6DKmWCBtNzaYN80EJjIuDUejMSmBUC/abnCrL3Di8IEwErhAvUGrCxRa4C+ffLDAicMVmhW42K2VLgUK67zlFXwcqL9GmltseUXlDirOvMXIbqKdHc/vieGTIJoE6rL93djNWwy9OHwqRCyQqM+J6LpeFj4bIhZoTWVdWCCLBbvkY93HwqdCdJg0AheQ/XRf9mivhk+C6BMIscawUdR5m0MRPjzRLZAFZMo2pnBHlhE+NhELJGa5YNO42Jh8VCIWCBnMEu8WRf4WC147sAxYjGLcjPDxiCaBDMxS+MKCF1cUdXbF+UhEh0CGqDjksz9CZ++2fRiiWyCgKw532QJjEhMYCR+A2COQoStuwcYyw5i8a2K/QIZ+Ei/YWM41Ju+UGBUI6Bses4eIqf6Nzkc+43N4j8QEgQxdcZApe2OJdRp/R/G+iGkCGbriFmws9TqF4b0QkwUC4SNmwcYSu419xuTnE/MFMrCSRT9FZG8s9xmTn0xkCQSKfu4Di5y9sew1Jj+NOFIgC1hG9q+y7b+s+QnE8QJZYJ0n/g+rKvoBYuFNibMIZJG9sYQx6Y8n3o44l0AILDKWOtW/xf/g8RbE6QSygGVkbyyrxuTHiJMKZLHgjbcY0bPEqQWySN1YFmN5lriAQBZJxlSM4lniMgIhMjaWxRCeJa4kkAWcdaIxFZ17lrieQBazNpZFt54lriqQBXZ9g8ZUdOhZ4toCIWxj6UP2U/TmWSJRoDU/9V1YIIDdcONr9L64dond2P19T8QjmDSDdUYhTJHpcR7z90Am/bVBx6NtFLcIv+pXAzfgo71qaFAmWx9linjYl9UWIJN4zD3454527ncD+DP7g5nBgyI8S5xCIIMHzbCbKjwowrPESQXyVD48aHXcWCDc7dm/Wxk8qKcymfZN2gJ+mfqDDODhPJUDLmTrAeotiFaBLJI2IwYP5KnZ2IaeByrC2xEVgdCFeCfIqzgexVNT0T9Ab30VqAgEwneCjIrj/j01CVFTFuKrQF0gQ/wCaQHJJ1Yc9+ypYcKawgXqrwJKIEPfmRMrjrv11BhTZh4LZGAdhDFNqTju0FN70TW1ZTdVWgUCoTFh1JGK46481U9YU70fITsEMrQxjVQc9+OpTnRNhXZTpVsgI5zKjorjHjzVjK6pkWXbKZCBm1kYU2/F8bmeakDXVJfdVBkSCGB+wpi6lo5P9FSEvpF77abKqECGNqbGiuNTPLWNrikc2mE3VeYIZOj1DCuOG3uqhq6pEbupMlMgA7PfMiY9e27pqTvEGozbTZX5AgFtTFsVx208ReiammI3VVIEMrQxYbWLS+KjnvofXVMT7aZKokCGKIqi4viQp3pOTyJdIAO3wJYx3SqOk/hT1FSS3VRZJBDQxlQUkaipPLupsk4gQxuTjmy7qbJaIEM4SzXW2E2VYwQyhDHdYqXdVDlSIKCNabHdVDlYIOPemA6xmyqnEMgwYzrQbio8Pf0HxndUxitiwgUAAAAASUVORK5CYII=",
+      inLine: true,
+      name: "script_lab.png",
+      type: Office.MailboxEnums.AttachmentType.Base64
+    };
+
+    const fileAttachment = {
+      inLine: true,
+      name: "dog.jpg",
+      type: Office.MailboxEnums.AttachmentType.File,
+      url: "https://i.imgur.com/9S36xvA.jpg"
+    };
+
+    const itemAttachment = {
+      itemId: Office.context.mailbox.item.itemId,
+      name: "test_email.msg",
+      type: Office.MailboxEnums.AttachmentType.Item
+    };
+
+
+    // The async version was introduced in requirement set 1.9.
+
+    // It provides a callback when the new appointment form has been created.
+
+    Office.context.mailbox.item.displayReplyAllFormAsync(
+      {
+        htmlBody:
+          "This is a reply with an inline Base64-encoded attachment, an inline image, and an item attachment.<br><img src='/service/cid:script_lab.png'><br><img src='/service/cid:dog.jpg'>",
+        attachments: [base64Attachment, fileAttachment, itemAttachment]
+      },
+      (asyncResult) => {
+        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+          console.error(`Action failed with message ${asyncResult.error.message}`);
+          return;
+        }
+
+        console.log("Created a reply-all form with attachments.");
+      }
+    );
+Office.MessageRead#displayReplyForm:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-forms.yaml
+
+
+    Office.context.mailbox.item.displayReplyForm("This is a reply with <i>some
+    text in italics</i>.");
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
+
+
+    // Define attachments.
+
+    const base64Attachment = {
+      base64file:
+        "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",
+      inLine: true,
+      name: "script_lab.png",
+      type: Office.MailboxEnums.AttachmentType.Base64
+    };
+
+    const fileAttachment = {
+      inLine: true,
+      name: "dog.jpg",
+      type: Office.MailboxEnums.AttachmentType.File,
+      url: "https://i.imgur.com/9S36xvA.jpg"
+    };
+
+    const itemAttachment = {
+      itemId: Office.context.mailbox.item.itemId,
+      name: "test_email.msg",
+      type: Office.MailboxEnums.AttachmentType.Item
+    };
+
+
+    // Create the reply with attachments.
+
+    Office.context.mailbox.item.displayReplyForm({
+      htmlBody:
+        "This is a reply with an inline Base64-encoded attachment, an inline image, and an item attachment.<br><img src='/service/cid:script_lab.png'><br><img src='/service/cid:dog.jpg'>",
+      attachments: [base64Attachment, fileAttachment, itemAttachment],
+      callback: (result) => {
+        if (result.status === Office.AsyncResultStatus.Failed) {
+          console.error(`Action failed with message ${result.error.message}`);
+          return;
+        }
+
+        console.log("Created a reply with attachments.");
+      }
+    });
+Office.MessageRead#displayReplyFormAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-forms.yaml
+
+
+    Office.context.mailbox.item.displayReplyFormAsync("This is a reply with
+    <i>some text in italics</i>.", function(
+      asyncResult
+    ) {
+      console.log(JSON.stringify(asyncResult));
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
+
+
+    // Define attachments.
+
+    const base64Attachment = {
+      base64file:
+        "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",
+      inLine: true,
+      name: "script_lab.png",
+      type: Office.MailboxEnums.AttachmentType.Base64
+    };
+
+    const fileAttachment = {
+      inLine: true,
+      name: "dog.jpg",
+      type: Office.MailboxEnums.AttachmentType.File,
+      url: "https://i.imgur.com/9S36xvA.jpg"
+    };
+
+    const itemAttachment = {
+      itemId: Office.context.mailbox.item.itemId,
+      name: "test_email.msg",
+      type: Office.MailboxEnums.AttachmentType.Item
+    };
+
+
+    // The async version was introduced in requirement set 1.9.
+
+    // It provides a callback when the new appointment form has been created.
+
+    Office.context.mailbox.item.displayReplyFormAsync(
+      {
+        htmlBody:
+          "This is a reply with an inline Base64-encoded attachment, an inline image, and an item attachment.<br><img src='/service/cid:script_lab.png'><br><img src='/service/cid:dog.jpg'>",
+        attachments: [base64Attachment, fileAttachment, itemAttachment]
+      },
+      (asyncResult) => {
+        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+          console.error(`Action failed with message ${asyncResult.error.message}`);
+          return;
+        }
+
+        console.log("Created reply with attachments.");
+      }
+    );
+Office.MessageRead#end:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-end-read.yaml
+
+
+    const time = Office.context.mailbox.item.end;
+
+    const localTime = Office.context.mailbox.convertToLocalClientTime(time);
+
+    console.log(`Appointment ends (local): ${localTime.month +
+    1}/${localTime.date}/${localTime.year},
+    ${localTime.hours}:${localTime.minutes}:${localTime.seconds}`);
+Office.MessageRead#from:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-from-message-read.yaml
+
+
+    const msgFrom = Office.context.mailbox.item.from;
+
+    console.log("Message received from: " + msgFrom.displayName + " (" +
+    msgFrom.emailAddress + ")");
+Office.MessageRead#getAllInternetHeadersAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/70-mime-headers/get-internet-headers-message-read.yaml
+
+
+    Office.context.mailbox.item.getAllInternetHeadersAsync(function
+    (asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log("Internet headers received successfully");
+        if (asyncResult.value.match(/preferred-fruit:.*/gim)) {
+          console.log("Sender's preferred fruit: " + asyncResult.value.match(/preferred-fruit:.*/gim)[0].slice(17));
+        } else {
+          console.log("Didn't receive header with sender's preferred fruit");
+        }
+        if (asyncResult.value.match(/preferred-vegetable:.*/gim)) {
+          console.log(
+            "Sender's preferred vegetable: " + asyncResult.value.match(/preferred-vegetable:.*/gim)[0].slice(21)
+          );
+        } else {
+          console.log("Didn't receive header with sender's preferred vegetable");
+        }
+      } else {
+        console.log("Error getting internet headers: " + JSON.stringify(asyncResult.error));
+      }
+    });
+Office.MessageRead#getAsFileAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-eml-format.yaml
+
+
+    Office.context.mailbox.item.getAsFileAsync((asyncResult) => {
+      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+        console.log(`Error encountered during processing: ${asyncResult.error.message}`);
+        return;
+      }
+
+      console.log(asyncResult.value);
+    });
+Office.MessageRead#getAttachmentContentAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/get-attachment-content.yaml
+
+
+    // Gets the attachments of the current message or appointment in read mode.
+    The item.attachments call can only be used in read mode.
+
+    const item = Office.context.mailbox.item;
+
+    const attachments = item.attachments;
+
+    if (attachments.length <= 0) {
+      console.log("Mail item has no attachments.");
+      return;
+    }
+
+
+    for (let i = 0; i < attachments.length; i++) {
+      // Log the attachment type and its contents to the console.
+      item.getAttachmentContentAsync(attachments[i].id, handleAttachmentsCallback);
+    }
+Office.MessageRead#getRegExMatches:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/75-regex-matches/contextual.yaml
+
+
+    // This API only works when you click on the highlighted word "ScriptLab".
+
+    console.log(Office.context.mailbox.item.getRegExMatches());
+Office.MessageRead#getRegExMatchesByName:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/75-regex-matches/contextual.yaml
+
+
+    // This API only works when you click on the highlighted word "ScriptLab".
+
+    console.log(Office.context.mailbox.item.getRegExMatchesByName("sampleRegexName"));
+Office.MessageRead#getSelectedRegExMatches:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/75-regex-matches/contextual.yaml
+
+
+    const matches = Office.context.mailbox.item.getSelectedRegExMatches();
+
+    if (matches) {
+        console.log(matches);
+    } else {
+        console.error("Open add-in by clicking on a highlighted regex match, for this API to return something useful.");
+    }
+Office.MessageRead#getSharedPropertiesAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/65-delegates-and-shared-folders/get-shared-properties.yaml
+
+
+    Office.context.mailbox.item.getSharedPropertiesAsync((result) => {
+      if (result.status === Office.AsyncResultStatus.Failed) {
+        console.error("The current folder or mailbox isn't shared.");
+        return;
+      }
+      const sharedProperties = result.value;
+      console.log(`Owner: ${sharedProperties.owner}`);
+      console.log(`Permissions: ${sharedProperties.delegatePermissions}`);
+      console.log(`Target mailbox: ${sharedProperties.targetMailbox}`);
+    });
+Office.MessageRead#internetMessageId:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-internet-message-id-read.yaml
+
+
+    console.log(`Internet message ID:
+    ${Office.context.mailbox.item.internetMessageId}`);
+Office.MessageRead#itemClass:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-item-class-read.yaml
+
+
+    console.log(`Item class: ${Office.context.mailbox.item.itemClass}`);
+Office.MessageRead#itemType:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-item-type.yaml
+
+
+    const itemType = Office.context.mailbox.item.itemType;
+
+    switch (itemType) {
+        case Office.MailboxEnums.ItemType.Appointment:
+            console.log(`Current item is an ${itemType}.`);
+            break;
+        case Office.MailboxEnums.ItemType.Message:
+            console.log(`Current item is a ${itemType}. A message could be an email, meeting request, meeting response, or meeting cancellation.`);
+            break;
+    }
+Office.MessageRead#loadCustomPropertiesAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/15-item-custom-properties/load-set-get-save.yaml
+
+
+    Office.context.mailbox.item.loadCustomPropertiesAsync((result) => {
+      if (result.status === Office.AsyncResultStatus.Failed) {
+        console.error(`loadCustomPropertiesAsync failed with message ${result.error.message}`);
+        return;
+      }
+
+      customProps = result.value;
+      console.log("Loaded the CustomProperties object.");
+    });
+Office.MessageRead#location:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-location-read.yaml
+
+
+    console.log(`Appointment location:
+    ${Office.context.mailbox.item.location}`);
+Office.MessageRead#normalizedSubject:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-normalized-subject-read.yaml
+
+
+    console.log(`Normalized subject:
+    ${Office.context.mailbox.item.normalizedSubject}`);
+Office.MessageRead#notificationMessages:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Adds a progress indicator to the mail item.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    const details =
+      {
+        type: Office.MailboxEnums.ItemNotificationMessageType.ProgressIndicator,
+        message: "Progress indicator with id = " + id
+      };
+    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
+    handleResult);
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Adds an informational notification to the mail item.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    const details =
+      {
+        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
+        message: "Non-persistent informational notification message with id = " + id,
+        icon: "PG.Icon.16",
+        persistent: false
+      };
+    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
+    handleResult);
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Adds a persistent information notification to the mail item.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    const details =
+      {
+        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
+        message: "Persistent informational notification message with id = " + id,
+        icon: "PG.Icon.16",
+        persistent: true
+      };
+    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
+    handleResult);
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Gets all the notification messages and their keys for the current mail
+    item.
+
+    Office.context.mailbox.item.notificationMessages.getAllAsync((asyncResult)
+    => {
+      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+        console.log(asyncResult.error.message);
+        return;
+      }
+
+      console.log(asyncResult.value);
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Replaces a notification message of a given key with another message.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    Office.context.mailbox.item.notificationMessages.replaceAsync(
+      id,
+      {
+        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
+        message: "Notification message with id = " + id + " has been replaced with an informational message.",
+        icon: "icon2",
+        persistent: false
+      },
+      handleResult);
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Removes a notification message from the current mail item.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    Office.context.mailbox.item.notificationMessages.removeAsync(id,
+    handleResult);
+Office.MessageRead#recurrence:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-recurrence-read.yaml
+
+
+    const recurrence = Office.context.mailbox.item.recurrence;
+
+
+    if (recurrence === undefined) {
+      console.log("This item is a message but not a meeting request.");
+    } else if (recurrence === null) {
+      console.log("This is a single appointment.");
+    } else {
+      console.log(JSON.stringify(recurrence));
+    }
+Office.MessageRead#sender:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-sender-message-read.yaml
+
+
+    const msgSender = Office.context.mailbox.item.sender;
+
+    console.log("Sender: " + msgSender.displayName + " (" +
+    msgSender.emailAddress + ")");
+Office.MessageRead#seriesId:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-series-id.yaml
+
+
+    const seriesId = Office.context.mailbox.item.seriesId;
+
+
+    if (seriesId === undefined) {
+      console.log("This is a message that's not a meeting request.");
+    } else if (seriesId === null) {
+      console.log("This is a single appointment, a parent series, or a meeting request for a series or single meeting.");
+    } else {
+      console.log("This is an instance belonging to series with ID " + seriesId);
+    }
+Office.MessageRead#start:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-start-read.yaml
+
+
+    const time = Office.context.mailbox.item.start;
+
+    const localTime = Office.context.mailbox.convertToLocalClientTime(time);
+
+    console.log(`Appointment starts (local): ${localTime.month +
+    1}/${localTime.date}/${localTime.year},
+    ${localTime.hours}:${localTime.minutes}:${localTime.seconds}`);
+Office.MessageRead#subject:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-subject-read.yaml
+
+
+    console.log(`Subject: ${Office.context.mailbox.item.subject}`);
+Office.MessageRead#to:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-to-message-read.yaml
+
+
+    const msgTo = Office.context.mailbox.item.to;
+
+    const distributionLists = [];
+
+    const externalRecipients = [];
+
+    const internalRecipients = [];
+
+    const otherRecipients = [];
+
+    for (let i = 0; i < msgTo.length; i++) {
+        switch (msgTo[i].recipientType) {
+        case Office.MailboxEnums.RecipientType.DistributionList:
+            distributionLists.push(msgTo[i]);
+            break;
+        case Office.MailboxEnums.RecipientType.ExternalUser:
+            externalRecipients.push(msgTo[i]);
+            break;
+        case Office.MailboxEnums.RecipientType.User:
+            internalRecipients.push(msgTo[i]);
+            break;
+        case Office.MailboxEnums.RecipientType.Other:
+            otherRecipients.push(msgTo[i]);
+        }
+    }
+
+
+    if (distributionLists.length > 0) {
+        console.log("Distribution Lists:");
+        distributionLists.forEach((recipient) => console.log(`${recipient.displayName}, ${recipient.emailAddress}`));
+    }
+
+
+    if (externalRecipients.length > 0) {
+        console.log("External Recipients:");
+        externalRecipients.forEach((recipient) => console.log(`${recipient.displayName}, ${recipient.emailAddress}`));
+    }
+
+
+    if (internalRecipients.length > 0) {
+        console.log("Internal Recipients:");
+        internalRecipients.forEach((recipient) => console.log(`${recipient.displayName}, ${recipient.emailAddress}`));
+    }
+
+
+    if (otherRecipients.length > 0) {
+        console.log("Other Recipients:");
+        otherRecipients.forEach((recipient) => console.log(`${recipient.displayName}, ${recipient.emailAddress}`));
+    }
+Office.NotificationMessageAction:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Adds an informational message with actions to the mail item.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+
+    const itemId = Office.context.mailbox.item.itemId;
+
+    const details = {
+      type: Office.MailboxEnums.ItemNotificationMessageType.InsightMessage,
+      message: "This is an insight notification with id = " + id,
+      icon: "PG.Icon.16",
+      actions: [
+        {
+          actionText: "Open insight",
+          actionType: Office.MailboxEnums.ActionType.ShowTaskPane,
+          // Identify whether the current mail item is in read or compose mode to set the appropriate commandId value.
+          commandId: (itemId == undefined ? "PG.HelpCommand.Compose" : "PG.HelpCommand.Read"),
+          contextData: { a: "aValue", b: "bValue" }
+        }
+      ]
+    };
+
+
+    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
+    handleResult);
+Office.NotificationMessageDetails:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Gets all the notification messages and their keys for the current mail
+    item.
+
+    Office.context.mailbox.item.notificationMessages.getAllAsync((asyncResult)
+    => {
+      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+        console.log(asyncResult.error.message);
+        return;
+      }
+
+      console.log(asyncResult.value);
+    });
+Office.NotificationMessages#addAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Adds a progress indicator to the mail item.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    const details =
+      {
+        type: Office.MailboxEnums.ItemNotificationMessageType.ProgressIndicator,
+        message: "Progress indicator with id = " + id
+      };
+    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
+    handleResult);
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Adds an informational notification to the mail item.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    const details =
+      {
+        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
+        message: "Non-persistent informational notification message with id = " + id,
+        icon: "PG.Icon.16",
+        persistent: false
+      };
+    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
+    handleResult);
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Adds a persistent information notification to the mail item.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    const details =
+      {
+        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
+        message: "Persistent informational notification message with id = " + id,
+        icon: "PG.Icon.16",
+        persistent: true
+      };
+    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
+    handleResult);
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Adds an error notification to the mail item.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    const details =
+      {
+        type: Office.MailboxEnums.ItemNotificationMessageType.ErrorMessage,
+        message: "Error notification message with id = " + id
+      };
+    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
+    handleResult);
+Office.NotificationMessages#getAllAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Gets all the notification messages and their keys for the current mail
+    item.
+
+    Office.context.mailbox.item.notificationMessages.getAllAsync((asyncResult)
+    => {
+      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+        console.log(asyncResult.error.message);
+        return;
+      }
+
+      console.log(asyncResult.value);
+    });
+Office.NotificationMessages#removeAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Removes a notification message from the current mail item.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    Office.context.mailbox.item.notificationMessages.removeAsync(id,
+    handleResult);
+Office.NotificationMessages#replaceAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+
+
+    // Replaces a notification message of a given key with another message.
+
+    const id = (document.getElementById("notificationId") as
+    HTMLInputElement).value;
+
+    Office.context.mailbox.item.notificationMessages.replaceAsync(
+      id,
+      {
+        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
+        message: "Notification message with id = " + id + " has been replaced with an informational message.",
+        icon: "icon2",
+        persistent: false
+      },
+      handleResult);
+Office.Organizer#getAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-organizer-appointment-organizer.yaml
+
+
+    Office.context.mailbox.item.organizer.getAsync(function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        const apptOrganizer = asyncResult.value;
+        console.log("Organizer: " + apptOrganizer.displayName + " (" + apptOrganizer.emailAddress + ")");
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+Office.Recipients#getAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml
+
+
+    Office.context.mailbox.item.bcc.getAsync(function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        const msgBcc = asyncResult.value;
+        console.log("Message being blind-copied to:");
+        for (let i = 0; i < msgBcc.length; i++) {
+          console.log(msgBcc[i].displayName + " (" + msgBcc[i].emailAddress + ")");
+        }
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml
+
+
+    Office.context.mailbox.item.cc.getAsync(function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        const msgCc = asyncResult.value;
+        console.log("Message being copied to:");
+        for (let i = 0; i < msgCc.length; i++) {
+          console.log(msgCc[i].displayName + " (" + msgCc[i].emailAddress + ")");
+        }
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml
+
+
+    Office.context.mailbox.item.optionalAttendees.getAsync(function(asyncResult)
+    {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        const apptOptionalAttendees = asyncResult.value;
+        for (let i = 0; i < apptOptionalAttendees.length; i++) {
+          console.log(
+            "Optional attendees: " +
+              apptOptionalAttendees[i].displayName +
+              " (" +
+              apptOptionalAttendees[i].emailAddress +
+              ") - response: " +
+              apptOptionalAttendees[i].appointmentResponse
+          );
+        }
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml
+
+
+    Office.context.mailbox.item.requiredAttendees.getAsync(function(asyncResult)
+    {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        const apptRequiredAttendees = asyncResult.value;
+        for (let i = 0; i < apptRequiredAttendees.length; i++) {
+          console.log(
+            "Required attendees: " +
+              apptRequiredAttendees[i].displayName +
+              " (" +
+              apptRequiredAttendees[i].emailAddress +
+              ") - response: " +
+              apptRequiredAttendees[i].appointmentResponse
+          );
+        }
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml
+
+
+    Office.context.mailbox.item.to.getAsync(function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        const msgTo = asyncResult.value;
+        console.log("Message being sent to:");
+        for (let i = 0; i < msgTo.length; i++) {
+          console.log(msgTo[i].displayName + " (" + msgTo[i].emailAddress + ")");
+        }
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+Office.Recipients#setAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml
+
+
+    const email = (document.getElementById("emailBcc") as
+    HTMLInputElement).value;
+
+    const emailArray = [email];
+
+    Office.context.mailbox.item.bcc.setAsync(emailArray, function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log("Succeeded in setting Bcc field.");
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml
+
+
+    const email = (document.getElementById("emailCc") as
+    HTMLInputElement).value;
+
+    const emailArray = [email];
+
+    Office.context.mailbox.item.cc.setAsync(emailArray, function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log("Succeeded in setting Cc field.");
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml
+
+
+    const email = (document.getElementById("emailOptional") as
+    HTMLInputElement).value;
+
+    const emailArray = [email];
+
+    Office.context.mailbox.item.optionalAttendees.setAsync(emailArray,
+    function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log("Succeeded in setting optional attendees field.");
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml
+
+
+    const email = (document.getElementById("emailRequired") as
+    HTMLInputElement).value;
+
+    const emailArray = [email];
+
+    Office.context.mailbox.item.requiredAttendees.setAsync(emailArray,
+    function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log("Succeeded in setting required attendees field.");
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml
+
+
+    const email = (document.getElementById("emailTo") as
+    HTMLInputElement).value;
+
+    const emailArray = [email];
+
+    Office.context.mailbox.item.to.setAsync(emailArray, function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log("Succeeded in setting To field.");
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+Office.Recurrence#getAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-set-recurrence-appointment-organizer.yaml
+
+
+    Office.context.mailbox.item.recurrence.getAsync(function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        const recurrence = asyncResult.value;
+        if (recurrence === null) {
+          console.log("This is a single appointment.");
+        } else {
+          console.log(`Recurrence pattern: ${JSON.stringify(recurrence)}`);
+        }
+      } else {
+        console.error(asyncResult.error);
+      }
+    });
+Office.Recurrence#setAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-set-recurrence-appointment-organizer.yaml
+
+
+    // Important: Can only set the recurrence pattern of an appointment series.
+
+
+    const currentDate = new Date();
+
+    let seriesTimeObject: Office.SeriesTime;
+
+    // Set series start date to tomorrow.
+
+    seriesTimeObject.setStartDate(currentDate.getFullYear(),
+    currentDate.getMonth(), currentDate.getDay() + 1);
+
+    // Set series end date to one year from now.
+
+    seriesTimeObject.setEndDate(currentDate.getFullYear() + 1,
+    currentDate.getMonth() + 1, currentDate.getDay());
+
+    // Set start time to 1:30 PM.
+
+    seriesTimeObject.setStartTime(13, 30);
+
+    // Set duration to 30 minutes.
+
+    seriesTimeObject.setDuration(30);
+
+
+    const pattern: Office.Recurrence = {
+      seriesTime: seriesTimeObject,
+      recurrenceType: Office.MailboxEnums.RecurrenceType.Yearly,
+      recurrenceProperties: {
+        interval: 1,
+        dayOfWeek: Office.MailboxEnums.Days.Tue,
+        weekNumber: Office.MailboxEnums.WeekNumber.Second,
+        month: Office.MailboxEnums.Month.Sep
+      },
+      recurrenceTimeZone: { name: Office.MailboxEnums.RecurrenceTimeZone.PacificStandardTime }
+    };
+
+
+    Office.context.mailbox.item.recurrence.setAsync(pattern, (asyncResult) => {
+      if (asyncResult.status !== Office.AsyncResultStatus.Succeeded) {
+        console.error(`Failed to set recurrence. Error: ${asyncResult.error.message}`);
+        return;
+      }
+      console.log(`Succeeded in setting recurrence pattern ${JSON.stringify(pattern)}`);
+    });
+Office.ReplyFormAttachment:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
+
+
+    // Define attachments.
+
+    const base64Attachment = {
+      base64file:
+        "iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAIAAABt+uBvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxEAAAsRAX9kX5EAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTM0A1t6AAAF3klEQVR4Xt2aMcolRRSFdQUuwSW4AAMzU8ENzAIMDA1NzHUBgqmZkbG4ADGVQRgGZBBElAERRPg9eC+PQ73qc6u66lZ3v48bzH+7uqr6VN/T1f3mjafT8Pr7b37+8G3En99+5akTcAqB/n7+48uP3vvp3TdvgT//+uE7P3woBwv07+s/Xn32jKXhwKF/Xr3wpgdxpEC/ffnp8/ffKkQpAg3QDDr6Ocs5RiCzm0ILEQca02qB7u2mPQ4xpnUCabtBWDWFdbfYmBYJ1HLZN6PBP3794uOiAcdKY0oXKLQbFE71jkBS33FrjClRoNBuXjx7J/QUNNCdZBtTikAtdtO1+JBA34Z5xjRfIG03I/YBTYVMScY0U6DQbsbXGdevF2C6Mc0RKLQbHEUbbz0MZNKPuYnGNCpQaDdY0iQTDR9zU4xpSCB9t+PQ719/7k3T0P49bkw7BQrtZnBajTS+uIwYU7dA4ZzynrhMWF/3sc+YOgQK7WaiNQpCh9bRu36tAmm7wT2MovOmaUAaPY3G6DKmWCBtNzaYN80EJjIuDUejMSmBUC/abnCrL3Di8IEwErhAvUGrCxRa4C+ffLDAicMVmhW42K2VLgUK67zlFXwcqL9GmltseUXlDirOvMXIbqKdHc/vieGTIJoE6rL93djNWwy9OHwqRCyQqM+J6LpeFj4bIhZoTWVdWCCLBbvkY93HwqdCdJg0AheQ/XRf9mivhk+C6BMIscawUdR5m0MRPjzRLZAFZMo2pnBHlhE+NhELJGa5YNO42Jh8VCIWCBnMEu8WRf4WC147sAxYjGLcjPDxiCaBDMxS+MKCF1cUdXbF+UhEh0CGqDjksz9CZ++2fRiiWyCgKw532QJjEhMYCR+A2COQoStuwcYyw5i8a2K/QIZ+Ei/YWM41Ju+UGBUI6Bses4eIqf6Nzkc+43N4j8QEgQxdcZApe2OJdRp/R/G+iGkCGbriFmws9TqF4b0QkwUC4SNmwcYSu419xuTnE/MFMrCSRT9FZG8s9xmTn0xkCQSKfu4Di5y9sew1Jj+NOFIgC1hG9q+y7b+s+QnE8QJZYJ0n/g+rKvoBYuFNibMIZJG9sYQx6Y8n3o44l0AILDKWOtW/xf/g8RbE6QSygGVkbyyrxuTHiJMKZLHgjbcY0bPEqQWySN1YFmN5lriAQBZJxlSM4lniMgIhMjaWxRCeJa4kkAWcdaIxFZ17lrieQBazNpZFt54lriqQBXZ9g8ZUdOhZ4toCIWxj6UP2U/TmWSJRoDU/9V1YIIDdcONr9L64dond2P19T8QjmDSDdUYhTJHpcR7z90Am/bVBx6NtFLcIv+pXAzfgo71qaFAmWx9linjYl9UWIJN4zD3454527ncD+DP7g5nBgyI8S5xCIIMHzbCbKjwowrPESQXyVD48aHXcWCDc7dm/Wxk8qKcymfZN2gJ+mfqDDODhPJUDLmTrAeotiFaBLJI2IwYP5KnZ2IaeByrC2xEVgdCFeCfIqzgexVNT0T9Ab30VqAgEwneCjIrj/j01CVFTFuKrQF0gQ/wCaQHJJ1Yc9+ypYcKawgXqrwJKIEPfmRMrjrv11BhTZh4LZGAdhDFNqTju0FN70TW1ZTdVWgUCoTFh1JGK46481U9YU70fITsEMrQxjVQc9+OpTnRNhXZTpVsgI5zKjorjHjzVjK6pkWXbKZCBm1kYU2/F8bmeakDXVJfdVBkSCGB+wpi6lo5P9FSEvpF77abKqECGNqbGiuNTPLWNrikc2mE3VeYIZOj1DCuOG3uqhq6pEbupMlMgA7PfMiY9e27pqTvEGozbTZX5AgFtTFsVx208ReiammI3VVIEMrQxYbWLS+KjnvofXVMT7aZKokCGKIqi4viQp3pOTyJdIAO3wJYx3SqOk/hT1FSS3VRZJBDQxlQUkaipPLupsk4gQxuTjmy7qbJaIEM4SzXW2E2VYwQyhDHdYqXdVDlSIKCNabHdVDlYIOPemA6xmyqnEMgwYzrQbio8Pf0HxndUxitiwgUAAAAASUVORK5CYII=",
+      inLine: true,
+      name: "script_lab.png",
+      type: Office.MailboxEnums.AttachmentType.Base64
+    };
+
+    const fileAttachment = {
+      inLine: true,
+      name: "dog.jpg",
+      type: Office.MailboxEnums.AttachmentType.File,
+      url: "https://i.imgur.com/9S36xvA.jpg"
+    };
+
+    const itemAttachment = {
+      itemId: Office.context.mailbox.item.itemId,
+      name: "test_email.msg",
+      type: Office.MailboxEnums.AttachmentType.Item
+    };
+
+
+    // The async version was introduced in requirement set 1.9.
+
+    // It provides a callback when the new appointment form has been created.
+
+    Office.context.mailbox.item.displayReplyFormAsync(
+      {
+        htmlBody:
+          "This is a reply with an inline Base64-encoded attachment, an inline image, and an item attachment.<br><img src='/service/cid:script_lab.png'><br><img src='/service/cid:dog.jpg'>",
+        attachments: [base64Attachment, fileAttachment, itemAttachment]
+      },
+      (asyncResult) => {
+        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+          console.error(`Action failed with message ${asyncResult.error.message}`);
+          return;
+        }
+
+        console.log("Created reply with attachments.");
+      }
+    );
+Office.ReplyFormData:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
+
+
+    // Define attachments.
+
+    const base64Attachment = {
+      base64file:
+        "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",
+      inLine: true,
+      name: "script_lab.png",
+      type: Office.MailboxEnums.AttachmentType.Base64
+    };
+
+    const fileAttachment = {
+      inLine: true,
+      name: "dog.jpg",
+      type: Office.MailboxEnums.AttachmentType.File,
+      url: "https://i.imgur.com/9S36xvA.jpg"
+    };
+
+    const itemAttachment = {
+      itemId: Office.context.mailbox.item.itemId,
+      name: "test_email.msg",
+      type: Office.MailboxEnums.AttachmentType.Item
+    };
+
+
+    // The async version was introduced in requirement set 1.9.
+
+    // It provides a callback when the new appointment form has been created.
+
+    Office.context.mailbox.item.displayReplyFormAsync(
+      {
+        htmlBody:
+          "This is a reply with an inline Base64-encoded attachment, an inline image, and an item attachment.<br><img src='/service/cid:script_lab.png'><br><img src='/service/cid:dog.jpg'>",
+        attachments: [base64Attachment, fileAttachment, itemAttachment]
+      },
+      (asyncResult) => {
+        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+          console.error(`Action failed with message ${asyncResult.error.message}`);
+          return;
+        }
+
+        console.log("Created reply with attachments.");
+      }
+    );
+Office.RoamingSettings#get:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/10-roaming-settings/roaming-settings.yaml
+
+
+    const settingName = (document.getElementById("settingName") as
+    HTMLInputElement).value;
+
+    const settingValue = Office.context.roamingSettings.get(settingName);
+
+    (document.getElementById("settingValue") as HTMLInputElement).value =
+    settingValue;
+
+    console.log(`The value of setting "${settingName}" is "${settingValue}".`);
+Office.RoamingSettings#remove:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/10-roaming-settings/roaming-settings.yaml
+
+
+    // Remove the specified setting from the mailbox.
+
+    const settingName = (document.getElementById("settingName") as
+    HTMLInputElement).value;
+
+    Office.context.roamingSettings.remove(settingName);
+
+    console.log(`The "${settingName}" setting has been removed.`);
+Office.RoamingSettings#saveAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/10-roaming-settings/roaming-settings.yaml
+
+
+    // Save settings in the mailbox to make it available in future sessions.
+
+    Office.context.roamingSettings.saveAsync(function(result) {
+      if (result.status !== Office.AsyncResultStatus.Succeeded) {
+        console.error(`Action failed with message ${result.error.message}`);
+      } else {
+        console.log(`Settings saved with status: ${result.status}`);
+      }
+    });
+Office.RoamingSettings#set:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/10-roaming-settings/roaming-settings.yaml
+
+
+    const settingName = (document.getElementById("settingName") as
+    HTMLInputElement).value;
+
+    const settingValue = (document.getElementById("settingValue") as
+    HTMLInputElement).value;
+
+    Office.context.roamingSettings.set(settingName, settingValue);
+
+    console.log(`Setting "${settingName}" set to value "${settingValue}".`);
+Office.SelectedItemDetails:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-message-properties.yaml
+
+
+    // Retrieves the selected messages' properties and logs them to the console.
+
+    Office.context.mailbox.getSelectedItemsAsync((asyncResult) => {
+      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+        console.log(asyncResult.error.message);
+        return;
+      }
+
+      asyncResult.value.forEach((message) => {
+        console.log(`Item ID: ${message.itemId}`);
+        console.log(`Conversation ID: ${message.conversationId}`);
+        console.log(`Internet message ID: ${message.internetMessageId}`);
+        console.log(`Subject: ${message.subject}`);
+        console.log(`Item type: ${message.itemType}`);
+        console.log(`Item mode: ${message.itemMode}`);
+        console.log(`Has attachment: ${message.hasAttachment}`);
+      });
+    });
+Office.Sensitivity#getAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-sensitivity-level.yaml
+
+
+    Office.context.mailbox.item.sensitivity.getAsync(function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log("Sensitivity: " + asyncResult.value);
+      } else {
+        console.log("Failed to get sensitivity: " + JSON.stringify(asyncResult.error));
+      }
+    });
+Office.Sensitivity#setAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-sensitivity-level.yaml
+
+
+    Office.context.mailbox.item.sensitivity.setAsync(
+      Office.MailboxEnums.AppointmentSensitivityType.Private,
+      function callback(asyncResult) {
+        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
+          console.log("Failed to set appointment sensitivity: " + JSON.stringify(asyncResult.error));
+        } else {
+          console.log("Successfully set appointment sensitivity.");
+        }
+      }
+    );
+Office.SensitivityLabel#getAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/60-sensitivity-label/sensitivity-label.yaml
+
+
+    // This snippet gets the current mail item's sensitivity label.
+
+    Office.context.sensitivityLabelsCatalog.getIsEnabledAsync((asyncResult) => {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded && asyncResult.value == true) {
+        Office.context.mailbox.item.sensitivityLabel.getAsync((asyncResult) => {
+          if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+            console.log(asyncResult.value);
+          } else {
+            console.log("Action failed with error: " + asyncResult.error.message);
+          }
+        });
+      } else {
+        console.log("Action failed with error: " + asyncResult.error.message);
+      }
+    });
+Office.SensitivityLabel#setAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/60-sensitivity-label/sensitivity-label.yaml
+
+
+    // This snippet sets the sensitivity label on the current mail item.
+
+    Office.context.sensitivityLabelsCatalog.getIsEnabledAsync((asyncResult) => {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded && asyncResult.value == true) {
+        Office.context.sensitivityLabelsCatalog.getAsync((asyncResult) => {
+          if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+            const catalog = asyncResult.value;
+            if (catalog.length > 0) {
+              var id = catalog[0].id;
+              Office.context.mailbox.item.sensitivityLabel.setAsync(id, (asyncResult) => {
+                if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+                  console.log(asyncResult.status);
+                } else {
+                  console.log("Action failed with error: " + asyncResult.error.message);
+                }
+              });
+            }
+            else {
+              console.log("Catalog list is empty");
+            }
+          } else {
+            console.log("Action failed with error: " + asyncResult.error.message);
+          }
+        });
+      } else {
+        console.log("Action failed with error: " + asyncResult.error.message);
+      }
+    });
+Office.SensitivityLabelsCatalog#getAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/60-sensitivity-label/sensitivity-labels-catalog.yaml
+
+
+    // This snippet gets all available sensitivity labels from the catalog.
+
+    Office.context.sensitivityLabelsCatalog.getIsEnabledAsync((asyncResult) => {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded && asyncResult.value == true) {
+        Office.context.sensitivityLabelsCatalog.getAsync((asyncResult) => {
+          if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+            const catalog = asyncResult.value;
+            console.log("Sensitivity Labels Catalog:");
+            console.log(JSON.stringify(catalog));
+          } else {
+            console.log("Action failed with error: " + asyncResult.error.message);
+          }
+        });
+      } else {
+        console.log("Action failed with error: " + asyncResult.error.message);
+      }
+    });
+Office.SensitivityLabelsCatalog#getIsEnabledAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/60-sensitivity-label/sensitivity-labels-catalog.yaml
+
+
+    // This snippet determines if the sensitivity labels catalog is enabled on
+    the current mailbox.
+
+    Office.context.sensitivityLabelsCatalog.getIsEnabledAsync((asyncResult) => {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log(asyncResult.value);
+      } else {
+        console.log("Action failed with error: " + asyncResult.error.message);
+      }
+    });
+Office.SessionData#clearAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/session-data-apis.yaml
+
+
+    Office.context.mailbox.item.sessionData.clearAsync(function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log("sessionData.clearAsync succeeded");
+      } else {
+        console.log("Failed to clear sessionData. Error: " + JSON.stringify(asyncResult.error));
+      }
+    });
+Office.SessionData#getAllAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/session-data-apis.yaml
+
+
+    Office.context.mailbox.item.sessionData.getAllAsync(function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log("The sessionData is " + JSON.stringify(asyncResult.value));
+      } else {
+        console.log("Failed to get all sessionData. Error: " + JSON.stringify(asyncResult.error));
+      }
+    });
+Office.SessionData#getAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/session-data-apis.yaml
+
+
+    Office.context.mailbox.item.sessionData.getAsync(
+      "Date",
+      function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log("The sessionData value is " + JSON.stringify(asyncResult.value));
+      } else {
+        console.log("Failed to get sessionData. Error: " + JSON.stringify(asyncResult.error));
+      }
+    });
+Office.SessionData#removeAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/session-data-apis.yaml
+
+
+    Office.context.mailbox.item.sessionData.removeAsync(
+      "Date",
+      function callback(asyncResult) {
+        if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+          console.log("sessionData.removeAsync succeeded");
+        } else {
+          console.log("Failed to remove sessionData. Error: " + JSON.stringify(asyncResult.error));
+        }
+      }
+    );
+Office.SessionData#setAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/session-data-apis.yaml
+
+
+    Office.context.mailbox.item.sessionData.setAsync(
+      "Date",
+      "7/24/2020",
+      function(asyncResult) {
+      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
+        console.log("sessionData.setAsync succeeded");
+      } else {
+        console.log("Failed to set sessionData. Error: " + JSON.stringify(asyncResult.error));
+      }
+    });
+Office.SharedProperties:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/65-delegates-and-shared-folders/get-shared-properties.yaml
+
+
+    Office.context.mailbox.item.getSharedPropertiesAsync((result) => {
+      if (result.status === Office.AsyncResultStatus.Failed) {
+        console.error("The current folder or mailbox isn't shared.");
+        return;
+      }
+      const sharedProperties = result.value;
+      console.log(`Owner: ${sharedProperties.owner}`);
+      console.log(`Permissions: ${sharedProperties.delegatePermissions}`);
+      console.log(`Target mailbox: ${sharedProperties.targetMailbox}`);
+    });
+Office.Time#getAsync:member(2):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-start-appointment-organizer.yaml
+
+
+    Office.context.mailbox.item.start.getAsync((result) => {
+      if (result.status !== Office.AsyncResultStatus.Succeeded) {
+        console.error(`Action failed with message ${result.error.message}`);
+        return;
+      }
+
+      const time = result.value;
+      const localTime = Office.context.mailbox.convertToLocalClientTime(time);
+      console.log(`Appointment starts (local): ${localTime.month + 1}/${localTime.date}/${localTime.year}, ${localTime.hours}:${localTime.minutes}:${localTime.seconds}`);
+    });
+Office.Time#setAsync:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-start-appointment-organizer.yaml
+
+
+    const start = new Date(); // Represents current date and time.
+
+    start.setDate(start.getDate() + 2); // Add 2 days to current date.
+
+    Office.context.mailbox.item.start.setAsync(start, (result) => {
+      if (result.status !== Office.AsyncResultStatus.Succeeded) {
+        console.error(`Action failed with message ${result.error.message}`);
+        return;
+      }
+      console.log(`Successfully set start date and time to ${start}`);
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-end-appointment-organizer.yaml
+
+
+    Office.context.mailbox.item.start.getAsync((result) => {
+      if (result.status !== Office.AsyncResultStatus.Succeeded) {
+        console.error(`Get start date failed with message ${result.error.message}`);
+        return;
+      }
+
+      const end = result.value; // Set end to current start date and time.
+      end.setDate(end.getDate() + 1); // Set end as 1 day later than start date.
+      Office.context.mailbox.item.end.setAsync(end, (result) => {
+        if (result.status !== Office.AsyncResultStatus.Succeeded) {
+          console.error(`Set end date failed with message ${result.error.message}`);
+          return;
+        }
+        console.log(`Successfully set end date and time to ${end}`);
+      });
+    });
+PowerPoint.AddSlideOptions:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
+
+
+    const chosenMaster = (document.getElementById("master-id") as
+    HTMLInputElement).value;
+
+    const chosenLayout = (document.getElementById("layout-id") as
+    HTMLInputElement).value;
+
+
+    await PowerPoint.run(async function(context) {
+      // Create a new slide using an existing master slide and layout.
+      const newSlideOptions: PowerPoint.AddSlideOptions = {
+        slideMasterId: chosenMaster, /* An ID from `Presentation.slideMasters`. */
+        layoutId: chosenLayout /* An ID from `SlideMaster.layouts`. */
+      };
+      context.presentation.slides.add(newSlideOptions);
+      await context.sync();
+    });
+PowerPoint.Binding:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml
+
+
+    async function getShapeForBindingId(bindingId: string):
+    Promise<PowerPoint.Shape | undefined> {
+      // Gets shape associated with binding ID.
+      return PowerPoint.run(async (context) => {
+        const binding = context.presentation.bindings.getItem(bindingId);
+        const shape = binding.getShape();
+        return shape;
+      });
+    }
+PowerPoint.Binding#getShape:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml
+
+
+    async function getShapeForBindingId(bindingId: string):
+    Promise<PowerPoint.Shape | undefined> {
+      // Gets shape associated with binding ID.
+      return PowerPoint.run(async (context) => {
+        const binding = context.presentation.bindings.getItem(bindingId);
+        const shape = binding.getShape();
+        return shape;
+      });
+    }
+PowerPoint.BindingCollection:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml
+
+
+    // Loads bindings.
+
+    await PowerPoint.run(async (context) => {
+      const bindings = context.presentation.bindings;
+      bindings.load("items");
+      await context.sync();
+
+      const bindingCount = bindings.items.length;
+      if (bindingCount === 0) {
+        console.log(`There are no bindings.`);
+      } else if (bindingCount === 1) {
+        console.log("There's 1 binding.");
+      } else {
+        console.log(`There are ${bindingCount} bindings.`);
+      }
+
+      bindings.items.forEach((binding) => {
+        getShapeForBindingId(binding.id).then((shape) => {
+          if (shape) {
+            console.log(`Binding ID: ${binding.id} refers to shape ID ${shape.id}`);
+          } else {
+            console.log(`Binding ID: ${binding.id} doesn't refers to shape.`);
+          }
+        });
+      });
+
+      populateBindingsDropdown(bindings.items);
+    });
+PowerPoint.BindingCollection#add:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml
+
+
+    // Inserts an image with binding.
+
+    await PowerPoint.run(async (context) => {
+      const bindingId = (document.getElementById("temp-binding-id") as HTMLInputElement).value;
+      const slide = context.presentation.getSelectedSlides().getItemAt(0);
+      const myShape = slide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.rectangle, {
+        top: 100,
+        left: 30,
+        width: 200,
+        height: 200
+      });
+
+      myShape.fill.setImage(flowerImage);
+      context.presentation.bindings.add(myShape, PowerPoint.BindingType.shape, bindingId);
+      await context.sync();
+
+      const bindingsDropdown = document.getElementById("bindings-dropdown") as HTMLSelectElement;
+
+      const option = new Option(`Binding ${bindingId}`, bindingId);
+
+      // When a binding ID already exists, the binding is updated to refer to the new shape
+      // so select the existing item rather than add a new one.
+      const foundIndex = findDropdownItem(bindingsDropdown, option.text);
+      if (foundIndex < 0) {
+        bindingsDropdown.add(option);
+        bindingsDropdown.selectedIndex = bindingsDropdown.options.length - 1;
+      } else {
+        bindingsDropdown.selectedIndex = foundIndex;
+      }
+    });
+PowerPoint.BindingCollection#getItem:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml
+
+
+    async function getShapeForBindingId(bindingId: string):
+    Promise<PowerPoint.Shape | undefined> {
+      // Gets shape associated with binding ID.
+      return PowerPoint.run(async (context) => {
+        const binding = context.presentation.bindings.getItem(bindingId);
+        const shape = binding.getShape();
+        return shape;
+      });
+    }
+PowerPoint.BindingType:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml
+
+
+    // Inserts an image with binding.
+
+    await PowerPoint.run(async (context) => {
+      const bindingId = (document.getElementById("temp-binding-id") as HTMLInputElement).value;
+      const slide = context.presentation.getSelectedSlides().getItemAt(0);
+      const myShape = slide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.rectangle, {
+        top: 100,
+        left: 30,
+        width: 200,
+        height: 200
+      });
+
+      myShape.fill.setImage(flowerImage);
+      context.presentation.bindings.add(myShape, PowerPoint.BindingType.shape, bindingId);
+      await context.sync();
+
+      const bindingsDropdown = document.getElementById("bindings-dropdown") as HTMLSelectElement;
+
+      const option = new Option(`Binding ${bindingId}`, bindingId);
+
+      // When a binding ID already exists, the binding is updated to refer to the new shape
+      // so select the existing item rather than add a new one.
+      const foundIndex = findDropdownItem(bindingsDropdown, option.text);
+      if (foundIndex < 0) {
+        bindingsDropdown.add(option);
+        bindingsDropdown.selectedIndex = bindingsDropdown.options.length - 1;
+      } else {
+        bindingsDropdown.selectedIndex = foundIndex;
+      }
+    });
+PowerPoint.BorderProperties:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
+
+    // Specifies a table's borders.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying border styles.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        uniformCellProperties: {
+          borders: {
+            left: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            right: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            top: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 },
+            bottom: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 }
+          }
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.BorderProperties#color:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
+
+    // Specifies a table's borders.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying border styles.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        uniformCellProperties: {
+          borders: {
+            left: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            right: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            top: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 },
+            bottom: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 }
+          }
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.BorderProperties#dashStyle:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
+
+    // Specifies a table's borders.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying border styles.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        uniformCellProperties: {
+          borders: {
+            left: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            right: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            top: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 },
+            bottom: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 }
+          }
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.BorderProperties#weight:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
+
+    // Specifies a table's borders.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying border styles.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        uniformCellProperties: {
+          borders: {
+            left: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            right: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            top: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 },
+            bottom: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 }
+          }
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.BulletFormat:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
+
+
+    // Gets navigational (complex) properties of the selected text range.
+
+    await PowerPoint.run(async (context) => {
+      const textRange: PowerPoint.TextRange = context.presentation.getSelectedTextRange();
+      textRange.load("font,paragraphFormat/bulletFormat,paragraphFormat/horizontalAlignment");
+      await context.sync();
+
+      console.log("Font properties of selected text range:");
+      console.log(`\tallCaps: ${textRange.font.allCaps}`);
+      console.log(`\tbold: ${textRange.font.bold}`);
+      console.log(`\tcolor: ${textRange.font.color}`);
+      console.log(`\tdoubleStrikethrough: ${textRange.font.doubleStrikethrough}`);
+      console.log(`\titalic: ${textRange.font.italic}`);
+      console.log(`\tname: ${textRange.font.name}`);
+      console.log(`\tsize: ${textRange.font.size}`);
+      console.log(`\tsmallCaps: ${textRange.font.smallCaps}`);
+      console.log(`\tstrikethrough: ${textRange.font.strikethrough}`);
+      console.log(`\tsubscript: ${textRange.font.subscript}`);
+      console.log(`\tsuperscript: ${textRange.font.superscript}`);
+      console.log(`\tunderline: ${textRange.font.underline}`);
+
+      console.log("Paragraph format properties of selected text range:");
+      console.log(`\tbulletFormat.visible: ${textRange.paragraphFormat.bulletFormat.visible}`);
+      console.log(`\thorizontalAlignment: ${textRange.paragraphFormat.horizontalAlignment}`);
+    });
+PowerPoint.ConnectorType:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
+
+
+    // This function gets the collection of shapes on the first slide,
+
+    // and adds a line to the collection, while specifying its
+
+    // start and end points. Then it names the shape.
+
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+
+      // For a line, left and top are the coordinates of the start point,
+      // while height and width are the coordinates of the end point.
+      const line: PowerPoint.Shape = shapes.addLine(PowerPoint.ConnectorType.straight, {
+        left: 400,
+        top: 200,
+        height: 20,
+        width: 150,
+      });
+      line.name = "StraightLine";
+
+      await context.sync();
+    });
+PowerPoint.FillProperties:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
+
+    // Specifies the font formatting and fill colors of the cells in a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying font formatting and fill colors.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        specificCellProperties: [
+          [
+            { fill: { color: "red" }, font: { color: "yellow", name: "Calibri" } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", name: "Coolvetica" } },
+            { fill: { color: "red" }, font: { color: "yellow", italic: true } },
+            { fill: { color: "red" }, font: { color: "#9966cc", strikethrough: true } }
+          ],
+          [
+            { fill: { color: "#fbceb1" }, font: { color: "yellow", doubleStrikethrough: true } },
+            { fill: { color: "red" }, font: { color: "yellow", subscript: true } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", superscript: true } },
+            { fill: { color: "red" }, font: { color: "yellow" } }
+          ],
+          [
+            { fill: { color: "red" }, font: { color: "#b0bf1a" } },
+            { fill: { color: "#9966cc" }, font: { color: "yellow" } },
+            { fill: { color: "#b0bf1a" }, font: { color: "yellow" } },
+            { fill: { color: "red" }, font: { color: "#fbceb1" } }
+          ]
+        ]
+      });
+      await context.sync();
+    });
+PowerPoint.FillProperties#color:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
+
+    // Specifies the font formatting and fill colors of the cells in a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying font formatting and fill colors.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        specificCellProperties: [
+          [
+            { fill: { color: "red" }, font: { color: "yellow", name: "Calibri" } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", name: "Coolvetica" } },
+            { fill: { color: "red" }, font: { color: "yellow", italic: true } },
+            { fill: { color: "red" }, font: { color: "#9966cc", strikethrough: true } }
+          ],
+          [
+            { fill: { color: "#fbceb1" }, font: { color: "yellow", doubleStrikethrough: true } },
+            { fill: { color: "red" }, font: { color: "yellow", subscript: true } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", superscript: true } },
+            { fill: { color: "red" }, font: { color: "yellow" } }
+          ],
+          [
+            { fill: { color: "red" }, font: { color: "#b0bf1a" } },
+            { fill: { color: "#9966cc" }, font: { color: "yellow" } },
+            { fill: { color: "#b0bf1a" }, font: { color: "yellow" } },
+            { fill: { color: "red" }, font: { color: "#fbceb1" } }
+          ]
+        ]
+      });
+      await context.sync();
+    });
+PowerPoint.FontProperties:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
+
+    // Specifies the font formatting and fill colors of the cells in a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying font formatting and fill colors.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        specificCellProperties: [
+          [
+            { fill: { color: "red" }, font: { color: "yellow", name: "Calibri" } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", name: "Coolvetica" } },
+            { fill: { color: "red" }, font: { color: "yellow", italic: true } },
+            { fill: { color: "red" }, font: { color: "#9966cc", strikethrough: true } }
+          ],
+          [
+            { fill: { color: "#fbceb1" }, font: { color: "yellow", doubleStrikethrough: true } },
+            { fill: { color: "red" }, font: { color: "yellow", subscript: true } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", superscript: true } },
+            { fill: { color: "red" }, font: { color: "yellow" } }
+          ],
+          [
+            { fill: { color: "red" }, font: { color: "#b0bf1a" } },
+            { fill: { color: "#9966cc" }, font: { color: "yellow" } },
+            { fill: { color: "#b0bf1a" }, font: { color: "yellow" } },
+            { fill: { color: "red" }, font: { color: "#fbceb1" } }
+          ]
+        ]
+      });
+      await context.sync();
+    });
+PowerPoint.FontProperties#color:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
+
+    // Specifies the font formatting and fill colors of the cells in a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying font formatting and fill colors.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        specificCellProperties: [
+          [
+            { fill: { color: "red" }, font: { color: "yellow", name: "Calibri" } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", name: "Coolvetica" } },
+            { fill: { color: "red" }, font: { color: "yellow", italic: true } },
+            { fill: { color: "red" }, font: { color: "#9966cc", strikethrough: true } }
+          ],
+          [
+            { fill: { color: "#fbceb1" }, font: { color: "yellow", doubleStrikethrough: true } },
+            { fill: { color: "red" }, font: { color: "yellow", subscript: true } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", superscript: true } },
+            { fill: { color: "red" }, font: { color: "yellow" } }
+          ],
+          [
+            { fill: { color: "red" }, font: { color: "#b0bf1a" } },
+            { fill: { color: "#9966cc" }, font: { color: "yellow" } },
+            { fill: { color: "#b0bf1a" }, font: { color: "yellow" } },
+            { fill: { color: "red" }, font: { color: "#fbceb1" } }
+          ]
+        ]
+      });
+      await context.sync();
+    });
+PowerPoint.FontProperties#doubleStrikethrough:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
+
+    // Specifies the font formatting and fill colors of the cells in a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying font formatting and fill colors.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        specificCellProperties: [
+          [
+            { fill: { color: "red" }, font: { color: "yellow", name: "Calibri" } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", name: "Coolvetica" } },
+            { fill: { color: "red" }, font: { color: "yellow", italic: true } },
+            { fill: { color: "red" }, font: { color: "#9966cc", strikethrough: true } }
+          ],
+          [
+            { fill: { color: "#fbceb1" }, font: { color: "yellow", doubleStrikethrough: true } },
+            { fill: { color: "red" }, font: { color: "yellow", subscript: true } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", superscript: true } },
+            { fill: { color: "red" }, font: { color: "yellow" } }
+          ],
+          [
+            { fill: { color: "red" }, font: { color: "#b0bf1a" } },
+            { fill: { color: "#9966cc" }, font: { color: "yellow" } },
+            { fill: { color: "#b0bf1a" }, font: { color: "yellow" } },
+            { fill: { color: "red" }, font: { color: "#fbceb1" } }
+          ]
+        ]
+      });
+      await context.sync();
+    });
+PowerPoint.FontProperties#name:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
+
+    // Specifies the font formatting and fill colors of the cells in a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying font formatting and fill colors.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        specificCellProperties: [
+          [
+            { fill: { color: "red" }, font: { color: "yellow", name: "Calibri" } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", name: "Coolvetica" } },
+            { fill: { color: "red" }, font: { color: "yellow", italic: true } },
+            { fill: { color: "red" }, font: { color: "#9966cc", strikethrough: true } }
+          ],
+          [
+            { fill: { color: "#fbceb1" }, font: { color: "yellow", doubleStrikethrough: true } },
+            { fill: { color: "red" }, font: { color: "yellow", subscript: true } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", superscript: true } },
+            { fill: { color: "red" }, font: { color: "yellow" } }
+          ],
+          [
+            { fill: { color: "red" }, font: { color: "#b0bf1a" } },
+            { fill: { color: "#9966cc" }, font: { color: "yellow" } },
+            { fill: { color: "#b0bf1a" }, font: { color: "yellow" } },
+            { fill: { color: "red" }, font: { color: "#fbceb1" } }
+          ]
+        ]
+      });
+      await context.sync();
+    });
+PowerPoint.FontProperties#strikethrough:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
+
+    // Specifies the font formatting and fill colors of the cells in a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying font formatting and fill colors.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        specificCellProperties: [
+          [
+            { fill: { color: "red" }, font: { color: "yellow", name: "Calibri" } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", name: "Coolvetica" } },
+            { fill: { color: "red" }, font: { color: "yellow", italic: true } },
+            { fill: { color: "red" }, font: { color: "#9966cc", strikethrough: true } }
+          ],
+          [
+            { fill: { color: "#fbceb1" }, font: { color: "yellow", doubleStrikethrough: true } },
+            { fill: { color: "red" }, font: { color: "yellow", subscript: true } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", superscript: true } },
+            { fill: { color: "red" }, font: { color: "yellow" } }
+          ],
+          [
+            { fill: { color: "red" }, font: { color: "#b0bf1a" } },
+            { fill: { color: "#9966cc" }, font: { color: "yellow" } },
+            { fill: { color: "#b0bf1a" }, font: { color: "yellow" } },
+            { fill: { color: "red" }, font: { color: "#fbceb1" } }
+          ]
+        ]
+      });
+      await context.sync();
+    });
+PowerPoint.FontProperties#subscript:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
+
+    // Specifies the font formatting and fill colors of the cells in a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying font formatting and fill colors.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        specificCellProperties: [
+          [
+            { fill: { color: "red" }, font: { color: "yellow", name: "Calibri" } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", name: "Coolvetica" } },
+            { fill: { color: "red" }, font: { color: "yellow", italic: true } },
+            { fill: { color: "red" }, font: { color: "#9966cc", strikethrough: true } }
+          ],
+          [
+            { fill: { color: "#fbceb1" }, font: { color: "yellow", doubleStrikethrough: true } },
+            { fill: { color: "red" }, font: { color: "yellow", subscript: true } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", superscript: true } },
+            { fill: { color: "red" }, font: { color: "yellow" } }
+          ],
+          [
+            { fill: { color: "red" }, font: { color: "#b0bf1a" } },
+            { fill: { color: "#9966cc" }, font: { color: "yellow" } },
+            { fill: { color: "#b0bf1a" }, font: { color: "yellow" } },
+            { fill: { color: "red" }, font: { color: "#fbceb1" } }
+          ]
+        ]
+      });
+      await context.sync();
+    });
+PowerPoint.FontProperties#superscript:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
+
+    // Specifies the font formatting and fill colors of the cells in a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying font formatting and fill colors.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        specificCellProperties: [
+          [
+            { fill: { color: "red" }, font: { color: "yellow", name: "Calibri" } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", name: "Coolvetica" } },
+            { fill: { color: "red" }, font: { color: "yellow", italic: true } },
+            { fill: { color: "red" }, font: { color: "#9966cc", strikethrough: true } }
+          ],
+          [
+            { fill: { color: "#fbceb1" }, font: { color: "yellow", doubleStrikethrough: true } },
+            { fill: { color: "red" }, font: { color: "yellow", subscript: true } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", superscript: true } },
+            { fill: { color: "red" }, font: { color: "yellow" } }
+          ],
+          [
+            { fill: { color: "red" }, font: { color: "#b0bf1a" } },
+            { fill: { color: "#9966cc" }, font: { color: "yellow" } },
+            { fill: { color: "#b0bf1a" }, font: { color: "yellow" } },
+            { fill: { color: "red" }, font: { color: "#fbceb1" } }
+          ]
+        ]
+      });
+      await context.sync();
+    });
+PowerPoint.GeometricShapeType:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
+
+
+    // This function gets the collection of shapes on the first slide,
+
+    // and adds a hexagon shape to the collection, while specifying its
+
+    // location and size. Then it names the shape.
+
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      const shapeOptions: PowerPoint.ShapeAddOptions = {
+        left: 100,
+        top: 100,
+        height: 150,
+        width: 150,
+      };
+      const hexagon: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.hexagon, shapeOptions);
+      hexagon.name = "Hexagon";
+
+      await context.sync();
+    });
+PowerPoint.Hyperlink:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/hyperlinks/manage-hyperlinks.yaml
+
+
+    // Gets the hyperlinks found in the first selected slide.
+
+    await PowerPoint.run(async (context) => {
+      const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
+      const hyperlinks: PowerPoint.HyperlinkCollection = slide.hyperlinks.load("address,screenTip");
+      const hyperlinksCount = hyperlinks.getCount();
+      await context.sync();
+
+      console.log(`${hyperlinksCount.value} hyperlinks found in first selected slide:`);
+      for (let link of hyperlinks.items) {
+        console.log(`Address: "${link.address}" (Screen tip: "${link.screenTip}")`);
+      }
+    });
+PowerPoint.HyperlinkCollection:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/hyperlinks/manage-hyperlinks.yaml
+
+
+    // Gets the hyperlinks found in the first selected slide.
+
+    await PowerPoint.run(async (context) => {
+      const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
+      const hyperlinks: PowerPoint.HyperlinkCollection = slide.hyperlinks.load("address,screenTip");
+      const hyperlinksCount = hyperlinks.getCount();
+      await context.sync();
+
+      console.log(`${hyperlinksCount.value} hyperlinks found in first selected slide:`);
+      for (let link of hyperlinks.items) {
+        console.log(`Address: "${link.address}" (Screen tip: "${link.screenTip}")`);
+      }
+    });
+PowerPoint.InsertSlideFormatting:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/insert-slides.yaml
+
+
+    await PowerPoint.run(async function(context) {
+        // Get the ID of the first selected slide.
+        const presentation: PowerPoint.Presentation = context.presentation;
+        const selected: PowerPoint.Slide = presentation.getSelectedSlides().getItemAt(0);
+        selected.load("id");
+        await context.sync();
+
+        // Insert the other presentation after the selected slide.
+        const insertOptions: PowerPoint.InsertSlideOptions = {
+            formatting: PowerPoint.InsertSlideFormatting.useDestinationTheme,
+            targetSlideId: selected.id
+        };
+        presentation.insertSlidesFromBase64(chosenFileBase64, insertOptions);
+        await context.sync();
+    });
+PowerPoint.InsertSlideOptions:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/insert-slides.yaml
+
+
+    await PowerPoint.run(async function(context) {
+        // Get the ID of the first selected slide.
+        const presentation: PowerPoint.Presentation = context.presentation;
+        const selected: PowerPoint.Slide = presentation.getSelectedSlides().getItemAt(0);
+        selected.load("id");
+        await context.sync();
+
+        // Insert the other presentation after the selected slide.
+        const insertOptions: PowerPoint.InsertSlideOptions = {
+            formatting: PowerPoint.InsertSlideFormatting.useDestinationTheme,
+            targetSlideId: selected.id
+        };
+        presentation.insertSlidesFromBase64(chosenFileBase64, insertOptions);
+        await context.sync();
+    });
+PowerPoint.ParagraphFormat:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
+
+
+    // Gets navigational (complex) properties of the selected text range.
+
+    await PowerPoint.run(async (context) => {
+      const textRange: PowerPoint.TextRange = context.presentation.getSelectedTextRange();
+      textRange.load("font,paragraphFormat/bulletFormat,paragraphFormat/horizontalAlignment");
+      await context.sync();
+
+      console.log("Font properties of selected text range:");
+      console.log(`\tallCaps: ${textRange.font.allCaps}`);
+      console.log(`\tbold: ${textRange.font.bold}`);
+      console.log(`\tcolor: ${textRange.font.color}`);
+      console.log(`\tdoubleStrikethrough: ${textRange.font.doubleStrikethrough}`);
+      console.log(`\titalic: ${textRange.font.italic}`);
+      console.log(`\tname: ${textRange.font.name}`);
+      console.log(`\tsize: ${textRange.font.size}`);
+      console.log(`\tsmallCaps: ${textRange.font.smallCaps}`);
+      console.log(`\tstrikethrough: ${textRange.font.strikethrough}`);
+      console.log(`\tsubscript: ${textRange.font.subscript}`);
+      console.log(`\tsuperscript: ${textRange.font.superscript}`);
+      console.log(`\tunderline: ${textRange.font.underline}`);
+
+      console.log("Paragraph format properties of selected text range:");
+      console.log(`\tbulletFormat.visible: ${textRange.paragraphFormat.bulletFormat.visible}`);
+      console.log(`\thorizontalAlignment: ${textRange.paragraphFormat.horizontalAlignment}`);
+    });
+PowerPoint.ParagraphHorizontalAlignment:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
+
+    // Specifies the horizontal and vertical alignments of the cells in a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying horizontal and vertical alignment.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        uniformCellProperties: {
+          horizontalAlignment: PowerPoint.ParagraphHorizontalAlignment.justify,
+          verticalAlignment: PowerPoint.TextVerticalAlignment.middle
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.Presentation:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/insert-slides.yaml
+
+
+    await PowerPoint.run(async function(context) {
+        // Get the ID of the first selected slide.
+        const presentation: PowerPoint.Presentation = context.presentation;
+        const selected: PowerPoint.Slide = presentation.getSelectedSlides().getItemAt(0);
+        selected.load("id");
+        await context.sync();
+
+        // Insert the other presentation after the selected slide.
+        const insertOptions: PowerPoint.InsertSlideOptions = {
+            formatting: PowerPoint.InsertSlideFormatting.useDestinationTheme,
+            targetSlideId: selected.id
+        };
+        presentation.insertSlidesFromBase64(chosenFileBase64, insertOptions);
+        await context.sync();
+    });
+PowerPoint.Presentation#getSelectedShapes:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+
+
+    // Arranges the selected shapes in a line from left to right.
+
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      shapes.load("items");
+      await context.sync();
+      let maxHeight = 0;
+      shapes.items.map((shape) => {
+        shape.load("width,height");
+      });
+      await context.sync();
+      shapes.items.map((shape) => {
+        shape.left = currentLeft;
+        shape.top = currentTop;
+        currentLeft += shape.width;
+        if (shape.height > maxHeight) maxHeight = shape.height;
+      });
+      await context.sync();
+      currentLeft = 0;
+      if (currentTop > slideHeight - 200) currentTop = 0;
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+
+
+    // Gets the shapes you selected on the slide and displays their IDs on the
+    task pane.
+
+    await PowerPoint.run(async (context) => {
+      let finalTable = "";
+      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      await context.sync();
+      finalTable += "<br>getSelectedShapes.getCount returned:<b>" + shapeCount.value + "</b><br>";
+      finalTable +=
+        "<br><table border=1 cellpadding=3 cellspacing=0><tr><td bgcolor=#3333EE><font color=white>Index</font></td><td bgcolor=#3333EE><font color=white>Id</font></td></tr>";
+      shapes.load("items");
+      await context.sync();
+      shapes.items.map((shape, index) => {
+        finalTable += "<tr><td>" + index + "</td><td>" + shape.id + "</td></tr>";
+      });
+      finalTable += "</table>";
+      const outputSpan = document.getElementById("outputSpan");
+      outputSpan.innerHTML = "";
+      outputSpan.innerHTML += finalTable;
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+
+
+    // Saves which shapes are selected so that they can be reselected later.
+
+    await PowerPoint.run(async (context) => {
+      context.presentation.load("slides");
+      await context.sync();
+      const slides: PowerPoint.SlideScopedCollection = context.presentation.getSelectedSlides();
+      const slideCount = slides.getCount();
+      slides.load("items");
+      await context.sync();
+      savedSlideSelection = [];
+      slides.items.map((slide) => {
+        savedSlideSelection.push(slide.id);
+      });
+      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      shapes.load("items");
+      await context.sync();
+      shapes.items.map((shape) => {
+        savedShapeSelection.push(shape.id);
+      });
+    });
+PowerPoint.Presentation#getSelectedSlides:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-set-slides.yaml
+
+
+    // Gets the selected slides and displays their IDs on the task pane.
+
+    await PowerPoint.run(async (context) => {
+      let finalTable = "";
+      context.presentation.load("slides");
+      await context.sync();
+      const allSlidesList = {};
+      const allSlidesCount = context.presentation.slides.getCount();
+      context.presentation.slides.load("items");
+      await context.sync();
+      let allSlideItems: PowerPoint.Slide[] = context.presentation.slides.items;
+      allSlideItems.map((slide, index) => {
+        allSlidesList[slide.id] = `Slide ${index + 1}`;
+      });
+
+      const checkbox = document.getElementById("id-check-usenative") as HTMLInputElement;
+      if (checkbox && checkbox.checked) {
+        context.presentation.load("tags");
+      }
+
+      const slides: PowerPoint.SlideScopedCollection = context.presentation.getSelectedSlides();
+      const slideCount = slides.getCount();
+      slides.load("items");
+      await context.sync();
+      finalTable += "<br>getSelectedSlides.getCount returned:<b>" + slideCount.value + "</b><br>";
+      finalTable +=
+        "<br><table border=1 cellpadding=3 cellspacing=0><tr><td bgcolor=#3333EE><font color=white>Index</font></td><td bgcolor=#3333EE><font color=white>Id</font></td></tr>";
+      slides.items.map((slide, index) => {
+        finalTable += "<tr><td>" + index + " - " + allSlidesList[slide.id] + "</td><td>" + slide.id + "</td></tr>";
+      });
+      finalTable += "</table>";
+      const outputSpan = document.getElementById("outputSpan");
+      outputSpan.innerHTML = ""
+      outputSpan.innerHTML += finalTable;
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-set-slides.yaml
+
+
+    // Saves which slides are currently selected so they can be reselected
+    later.
+
+    await PowerPoint.run(async (context) => {
+      let finalTable = "";
+      context.presentation.load("slides");
+      await context.sync();
+      const slides: PowerPoint.SlideScopedCollection = context.presentation.getSelectedSlides();
+      const slideCount = slides.getCount();
+      await context.sync();
+      finalTable += "<br>getSelectedSlides.getCount returned:<b>" + slideCount.value + "</b><br>";
+      finalTable +=
+        "<br><table border=1 cellpadding=3 cellspacing=0><tr><td bgcolor=#3333EE><font color=white>Index</font></td><td bgcolor=#3333EE><font color=white>Id</font></td></tr>";
+      savedSlideSelection = [];
+      slides.load("items");
+      await context.sync();
+      slides.items.map((slide, index) => {
+        finalTable += "<tr><td>" + index + "</td><td>" + slide.id + "</td></tr>";
+        savedSlideSelection.push(slide.id);
+      });
+      finalTable += "</table>";
+      const outputSpan = document.getElementById("outputSpan");
+      outputSpan.innerHTML = ""
+      outputSpan.innerHTML += finalTable;
+    });
+PowerPoint.Presentation#getSelectedTextRange:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
+
+
+    // Gets the selected text range and prints data about the range on the task
+    pane.
+
+    await PowerPoint.run(async (context) => {
+      const textRange: PowerPoint.TextRange = context.presentation.getSelectedTextRange();
+      try {
+        await context.sync();
+      } catch (error) {
+        console.warn("You must select only one range of text for this action to work.");
+        return;
+      }
+      textRange.load("text");
+      textRange.load("start");
+      textRange.load("length");
+      await context.sync();
+      let txtHtml = textRange.text;
+      txtHtml = txtHtml.replace(/\n/g, "<br>");
+      txtHtml = txtHtml.replace(/\r/g, "<br>");
+      txtHtml = txtHtml.replace(/\v/g, "<br>");
+      let txtExplained = textRange.text;
+      txtExplained = txtExplained.replace(/\n/g, "<font color=red>NL</font>");
+      txtExplained = txtExplained.replace(/\r/g, "<font color=red>CR</font>");
+      txtExplained = txtExplained.replace(/\v/g, "<font color=red>VV</font>");
+      let finalTable = "";
+      finalTable +=
+        "<table border=1 cellpadding=3 cellspacing=0><tr><td bgcolor=#3333EE><font color=white>Index</font></td><td bgcolor=#3333EE><font color=white>Id</font></td></tr>";
+      finalTable += "<tr><td>Raw</td><td>" + textRange.text + "</td></tr>";
+      finalTable += "<tr><td>Html</td><td>" + txtHtml + "</td></tr>";
+      finalTable += "<tr><td>Exp</td><td>" + txtExplained + "</td></tr>";
+      finalTable += "<tr><td>Start</td><td>" + textRange.start + "</td></tr>";
+      finalTable += "<tr><td>Length</td><td>" + textRange.length + "</td></tr>";
+      finalTable += "</table>";
+      const outputSpan = document.getElementById("outputSpan");
+      outputSpan.innerHTML = "";
+      outputSpan.innerHTML += finalTable;
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
+
+
+    // Sets the range selection to the range that was saved previously.
+
+    await PowerPoint.run(async (context) => {
+      const slide1: PowerPoint.Slide = context.presentation.slides.getItem(savedTextSlideSelection[0]);
+      const shape1: PowerPoint.Shape = slide1.shapes.getItem(savedTextShapeSelection[0]);
+      const textRange: PowerPoint.TextRange = shape1.textFrame.textRange.getSubstring(
+        savedTextTextRangeStart,
+        savedTextTextRangeLength,
+      );
+      textRange.setSelected();
+      await context.sync();
+    });
+PowerPoint.Presentation#insertSlidesFromBase64:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/insert-slides.yaml
+
+
+    await PowerPoint.run(async function(context) {
+        // Get the ID of the first selected slide.
+        const presentation: PowerPoint.Presentation = context.presentation;
+        const selected: PowerPoint.Slide = presentation.getSelectedSlides().getItemAt(0);
+        selected.load("id");
+        await context.sync();
+
+        // Insert the other presentation after the selected slide.
+        const insertOptions: PowerPoint.InsertSlideOptions = {
+            formatting: PowerPoint.InsertSlideFormatting.useDestinationTheme,
+            targetSlideId: selected.id
+        };
+        presentation.insertSlidesFromBase64(chosenFileBase64, insertOptions);
+        await context.sync();
+    });
+PowerPoint.Presentation#setSelectedSlides:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-set-slides.yaml
+
+
+    // Sets selection to the slides that were saved.
+
+    await PowerPoint.run(async (context) => {
+      context.presentation.setSelectedSlides(savedSlideSelection);
+      await context.sync();
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-set-slides.yaml
+
+
+    // Selects slides 2, 4, and 5.
+
+    await PowerPoint.run(async (context) => {
+      context.presentation.load("slides");
+      await context.sync();
+      const slide2: PowerPoint.Slide = context.presentation.slides.getItemAt(1);
+      const slide4: PowerPoint.Slide = context.presentation.slides.getItemAt(3);
+      const slide5: PowerPoint.Slide = context.presentation.slides.getItemAt(4);
+      slide2.load("id");
+      slide4.load("id");
+      slide5.load("id");
+      try {
+        await context.sync();
+      } catch (error) {
+        console.warn("This action requires at least 5 slides in the presentation.");
+        return;
+      }
+      await context.sync();
+      context.presentation.setSelectedSlides([slide2.id, slide4.id, slide5.id]);
+      await context.sync();
+    });
+PowerPoint.Presentation#bindings:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml
 
 
-    // Get the compose type of the current message.
+    // Loads bindings.
 
-    Office.context.mailbox.item.getComposeTypeAsync(function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log(
-          "getComposeTypeAsync succeeded with composeType: " +
-            asyncResult.value.composeType +
-            " and coercionType: " +
-            asyncResult.value.coercionType
-        );
+    await PowerPoint.run(async (context) => {
+      const bindings = context.presentation.bindings;
+      bindings.load("items");
+      await context.sync();
+
+      const bindingCount = bindings.items.length;
+      if (bindingCount === 0) {
+        console.log(`There are no bindings.`);
+      } else if (bindingCount === 1) {
+        console.log("There's 1 binding.");
       } else {
-        console.error(asyncResult.error);
+        console.log(`There are ${bindingCount} bindings.`);
       }
+
+      bindings.items.forEach((binding) => {
+        getShapeForBindingId(binding.id).then((shape) => {
+          if (shape) {
+            console.log(`Binding ID: ${binding.id} refers to shape ID ${shape.id}`);
+          } else {
+            console.log(`Binding ID: ${binding.id} doesn't refers to shape.`);
+          }
+        });
+      });
+
+      populateBindingsDropdown(bindings.items);
     });
-'Office.MessageCompose#getConversationIndexAsync:member(2)':
+PowerPoint.Shape:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-conversation-index.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
 
 
-    // This snippet returns the Base64-encoded position of the current message
-    in a conversation thread (PR_CONVERSATION_INDEX).
+    // Changes the transparency of every geometric shape in the slide.
 
-    // The API call is supported on a message being composed and isn't supported
-    on read items or appointments.
+    await PowerPoint.run(async (context) => {
+      // Get the type of shape for every shape in the collection.
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      shapes.load("type");
+      await context.sync();
 
-    Office.context.mailbox.item.getConversationIndexAsync((result) => {
-       if (result.status === Office.AsyncResultStatus.Failed) {
-          console.log(result.error.message);
-          return;
-       }
-       
-       const conversationIndex = result.value;
-       if (conversationIndex) {
-          console.log("Position in the conversation thread: " + conversationIndex);
-       } else {
-          console.log("The current message doesn't belong to a conversation thread.");
-       }
+      // Change the shape transparency to be halfway transparent.
+      shapes.items.forEach((shape) => {
+        if (shape.type === PowerPoint.ShapeType.geometricShape) {
+          shape.fill.transparency = 0.5;
+        }
+      });
+      await context.sync();
     });
-'Office.MessageCompose#getItemClassAsync:member(2)':
+PowerPoint.Shape#delete:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-item-class-async.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
 
 
-    // This snippet returns the Exchange Web Services item class property
-    (PR_MESSAGE_CLASS) of the current message.
+    // This function gets the collection of shapes on the first slide,
 
-    // The API call is only supported on a message being composed.
+    // and then iterates through them, deleting each one.
 
-    Office.context.mailbox.item.getItemClassAsync((asyncResult) => {
-      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
-        console.log("Action failed with error: " + asyncResult.error.message);
-        return;
-      }
+    await PowerPoint.run(async (context) => {
+      const slide: PowerPoint.Slide = context.presentation.slides.getItemAt(0);
+      const shapes: PowerPoint.ShapeCollection = slide.shapes;
 
-      console.log("Item class of the current message: " + asyncResult.value);
-    });
-'Office.MessageCompose#getItemIdAsync:member(2)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/item-id-compose.yaml
+      // Load all the shapes in the collection without loading their properties.
+      shapes.load("items/$none");
 
+      await context.sync();
 
-    Office.context.mailbox.item.getItemIdAsync((result) => {
-        if (result.status === Office.AsyncResultStatus.Failed) {
-            console.error(`getItemIdAsync failed with message: ${result.error.message}`);
-            return;
-        }
+      shapes.items.forEach((shape) => shape.delete());
 
-        console.log(result.value);
+      await context.sync();
     });
-'Office.MessageCompose#getSelectedDataAsync:member(2)':
+PowerPoint.Shape#getTable:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/20-item-body/get-selected-data.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    Office.context.mailbox.item.getSelectedDataAsync(Office.CoercionType.Text,
-    function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        const text = asyncResult.value.data;
-        const prop = asyncResult.value.sourceProperty;
-        console.log("Selected text in " + prop + ": " + text);
-      } else {
-        console.error(asyncResult.error);
-      }
-    });
-'Office.MessageCompose#getSharedPropertiesAsync:member(2)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/65-delegates-and-shared-folders/get-shared-properties.yaml
+    // Gets the table from a shape.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      shapes.load("items");
+      await context.sync();
 
+      if (shapeCount.value > 0) {
+        const shape = shapes.getItemAt(0);
+        shape.load("type");
+        await context.sync();
 
-    Office.context.mailbox.item.getSharedPropertiesAsync((result) => {
-      if (result.status === Office.AsyncResultStatus.Failed) {
-        console.error("The current folder or mailbox isn't shared.");
-        return;
-      }
-      const sharedProperties = result.value;
-      console.log(`Owner: ${sharedProperties.owner}`);
-      console.log(`Permissions: ${sharedProperties.delegatePermissions}`);
-      console.log(`Target mailbox: ${sharedProperties.targetMailbox}`);
+        // The shape type can indicate whether the shape is a table.
+        const isTable = shape.type === PowerPoint.ShapeType.table;
+
+        if (isTable) {
+          // Get the Table object for the Shape which is a table.
+          const table = shape.getTable();
+          table.load();
+          await context.sync();
+
+          // Get the Table row and column count.
+          console.log("Table RowCount: " + table.rowCount + " and columnCount: " + table.columnCount);
+        } else console.log("Selected shape isn't table.");
+      } else console.log("No shape selected.");
     });
-'Office.MessageCompose#inReplyTo:member':
+PowerPoint.Shape#setZOrder:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-in-reply-to.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml
 
 
-    // This snippet gets the ID of the message being replied to by the current
-    message (PR_IN_REPLY_TO_ID).
+    async function changeZOrder(operation: PowerPoint.ShapeZOrder) {
+      // Changes the z-order position of the selected shapes.
+      return PowerPoint.run(async (context) => {
+        const selectedShapes = context.presentation.getSelectedShapes();
+        selectedShapes.load();
+        await context.sync();
 
-    // The API call is supported on messages being composed and isn't supported
-    on read items.
+        if (selectedShapes.items.length === 0) {
+          console.log("No shapes are selected.");
+        } else {
+          let direction = 1; // Start with bottom-most (lowest number).
 
-    const inReplyTo = Office.context.mailbox.item.inReplyTo;
+          // Start with top-most when sending to back or bringing forward.
 
-    if (inReplyTo) {
-      console.log("ID of the message being replied to: " + inReplyTo);
-    } else {
-      console.log("No InReplyTo property available for this message");
+          switch (operation) {
+            case PowerPoint.ShapeZOrder.bringForward:
+
+            case PowerPoint.ShapeZOrder.sendToBack:
+              direction = -1; // Reverse direction.
+
+              break;
+          }
+
+          // Change the z-order position for each of the selected shapes,
+
+          // starting with the bottom-most when bringing to front or sending backward,
+
+          // or top-most when sending to back or bringing forward,
+
+          // so the selected shapes retain their relative z-order positions after they're changed.
+
+          selectedShapes.items
+            .sort((a, b) => (a.zOrderPosition - b.zOrderPosition) * direction)
+            .forEach((shape) => {
+              try {
+                const originalZOrderPosition = shape.zOrderPosition;
+                shape.setZOrder(operation);
+
+                console.log(`Changed z-order of shape ${shape.id}.`);
+              } catch (err) {
+                console.log(`Unable to change z-order of shape ${shape.id}. ${err.message}`);
+              }
+            });
+
+          await context.sync();
+        }
+      });
     }
-'Office.MessageCompose#internetHeaders:member':
+PowerPoint.Shape#fill:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
 
-    Office.context.mailbox.item.internetHeaders.getAsync(
-      ["preferred-fruit", "preferred-vegetable", "best-vegetable", "nonexistent-header"],
-      function (asyncResult) {
-        if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-          console.log("Selected headers: " + JSON.stringify(asyncResult.value));
-        } else {
-          console.log("Error getting selected headers: " + JSON.stringify(asyncResult.error));
-        }
-      }
-    );
-'Office.MessageCompose#isClientSignatureEnabledAsync:member(1)':
+    // Changes the selected shapes fill color to red.
+
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      shapes.load("items/fill/type");
+      await context.sync();
+      shapes.items.map((shape) => {
+        const shapeFillType = shape.fill.type as PowerPoint.ShapeFillType;
+        console.log(`Shape ID ${shape.id} original fill type: ${shapeFillType}`);
+        shape.fill.setSolidColor("red");
+      });
+      await context.sync();
+    });
+PowerPoint.Shape#group:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/group-ungroup-shapes.yaml
 
 
-    // Check if the client signature is currently enabled.
+    await PowerPoint.run(async (context) => {
+      // Ungroups the first shape group on the current slide.
 
-    Office.context.mailbox.item.isClientSignatureEnabledAsync(function(asyncResult)
-    {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log("isClientSignatureEnabledAsync succeeded with result: " + asyncResult.value);
-      } else {
-        console.error(asyncResult.error);
+      // Get the shapes on the current slide.
+      context.presentation.load("slides");
+      const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
+      slide.load("shapes/items/type,shapes/items/id");
+      await context.sync();
+
+      const shapes: PowerPoint.ShapeCollection = slide.shapes;
+      const shapeGroups = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.group);
+      if (shapeGroups.length === 0) {
+        console.warn("No shape groups on the current slide, so nothing to ungroup.");
+        return;
       }
+
+      // Ungroup the first grouped shapes.
+      const firstGroupId = shapeGroups[0].id;
+      const shapeGroupToUngroup = shapes.getItem(firstGroupId);
+      shapeGroupToUngroup.group.ungroup();
+      await context.sync();
+
+      console.log(`Ungrouped shapes with group ID: ${firstGroupId}`);
     });
-'Office.MessageCompose#itemType:member':
+PowerPoint.Shape#height:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-item-type.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
 
-    const itemType = Office.context.mailbox.item.itemType;
+    // Arranges the selected shapes in a line from left to right.
 
-    switch (itemType) {
-        case Office.MailboxEnums.ItemType.Appointment:
-            console.log(`Current item is an ${itemType}.`);
-            break;
-        case Office.MailboxEnums.ItemType.Message:
-            console.log(`Current item is a ${itemType}. A message could be an email, meeting request, meeting response, or meeting cancellation.`);
-            break;
-    }
-'Office.MessageCompose#loadCustomPropertiesAsync:member(1)':
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      shapes.load("items");
+      await context.sync();
+      let maxHeight = 0;
+      shapes.items.map((shape) => {
+        shape.load("width,height");
+      });
+      await context.sync();
+      shapes.items.map((shape) => {
+        shape.left = currentLeft;
+        shape.top = currentTop;
+        currentLeft += shape.width;
+        if (shape.height > maxHeight) maxHeight = shape.height;
+      });
+      await context.sync();
+      currentLeft = 0;
+      if (currentTop > slideHeight - 200) currentTop = 0;
+    });
+PowerPoint.Shape#left:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+
+
+    // Arranges the selected shapes in a line from left to right.
+
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      shapes.load("items");
+      await context.sync();
+      let maxHeight = 0;
+      shapes.items.map((shape) => {
+        shape.load("width,height");
+      });
+      await context.sync();
+      shapes.items.map((shape) => {
+        shape.left = currentLeft;
+        shape.top = currentTop;
+        currentLeft += shape.width;
+        if (shape.height > maxHeight) maxHeight = shape.height;
+      });
+      await context.sync();
+      currentLeft = 0;
+      if (currentTop > slideHeight - 200) currentTop = 0;
+    });
+PowerPoint.Shape#top:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/15-item-custom-properties/load-set-get-save.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
 
-    Office.context.mailbox.item.loadCustomPropertiesAsync((result) => {
-      if (result.status === Office.AsyncResultStatus.Failed) {
-        console.error(`loadCustomPropertiesAsync failed with message ${result.error.message}`);
-        return;
-      }
+    // Arranges the selected shapes in a line from left to right.
 
-      customProps = result.value;
-      console.log("Loaded the CustomProperties object.");
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      shapes.load("items");
+      await context.sync();
+      let maxHeight = 0;
+      shapes.items.map((shape) => {
+        shape.load("width,height");
+      });
+      await context.sync();
+      shapes.items.map((shape) => {
+        shape.left = currentLeft;
+        shape.top = currentTop;
+        currentLeft += shape.width;
+        if (shape.height > maxHeight) maxHeight = shape.height;
+      });
+      await context.sync();
+      currentLeft = 0;
+      if (currentTop > slideHeight - 200) currentTop = 0;
     });
-'Office.MessageCompose#notificationMessages:member':
+PowerPoint.Shape#type:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
 
 
-    // Adds a progress indicator to the mail item.
+    // Changes the transparency of every geometric shape in the slide.
 
-    const id = $("#notificationId").val().toString();
+    await PowerPoint.run(async (context) => {
+      // Get the type of shape for every shape in the collection.
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      shapes.load("type");
+      await context.sync();
 
-    const details =
-      {
-        type: Office.MailboxEnums.ItemNotificationMessageType.ProgressIndicator,
-        message: "Progress indicator with id = " + id
-      };
-    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
-    handleResult);
+      // Change the shape transparency to be halfway transparent.
+      shapes.items.forEach((shape) => {
+        if (shape.type === PowerPoint.ShapeType.geometricShape) {
+          shape.fill.transparency = 0.5;
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.Shape#width:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
-    // Adds an informational notification to the mail item.
 
-    const id = $("#notificationId").val().toString();
+    // Arranges the selected shapes in a line from left to right.
 
-    const details =
-      {
-        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
-        message: "Non-persistent informational notification message with id = " + id,
-        icon: "icon1",
-        persistent: false
-      };
-    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
-    handleResult);
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      shapes.load("items");
+      await context.sync();
+      let maxHeight = 0;
+      shapes.items.map((shape) => {
+        shape.load("width,height");
+      });
+      await context.sync();
+      shapes.items.map((shape) => {
+        shape.left = currentLeft;
+        shape.top = currentTop;
+        currentLeft += shape.width;
+        if (shape.height > maxHeight) maxHeight = shape.height;
+      });
+      await context.sync();
+      currentLeft = 0;
+      if (currentTop > slideHeight - 200) currentTop = 0;
+    });
+PowerPoint.Shape#zOrderPosition:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml
 
 
-    // Adds a persistent information notification to the mail item.
+    async function changeZOrder(operation: PowerPoint.ShapeZOrder) {
+      // Changes the z-order position of the selected shapes.
+      return PowerPoint.run(async (context) => {
+        const selectedShapes = context.presentation.getSelectedShapes();
+        selectedShapes.load();
+        await context.sync();
 
-    const id = $("#notificationId").val().toString();
+        if (selectedShapes.items.length === 0) {
+          console.log("No shapes are selected.");
+        } else {
+          let direction = 1; // Start with bottom-most (lowest number).
 
-    const details =
-      {
-        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
-        message: "Persistent informational notification message with id = " + id,
-        icon: "icon1",
-        persistent: true
-      };
-    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
-    handleResult);
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+          // Start with top-most when sending to back or bringing forward.
 
+          switch (operation) {
+            case PowerPoint.ShapeZOrder.bringForward:
 
-    // Gets all the notification messages and their keys for the current mail
-    item.
+            case PowerPoint.ShapeZOrder.sendToBack:
+              direction = -1; // Reverse direction.
 
-    Office.context.mailbox.item.notificationMessages.getAllAsync((asyncResult)
-    => {
-      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
-        console.log(asyncResult.error.message);
-        return;
-      }
+              break;
+          }
 
-      console.log(asyncResult.value);
-    });
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+          // Change the z-order position for each of the selected shapes,
 
+          // starting with the bottom-most when bringing to front or sending backward,
 
-    // Replaces a notification message of a given key with another message.
+          // or top-most when sending to back or bringing forward,
 
-    const id = $("#notificationId").val().toString();
+          // so the selected shapes retain their relative z-order positions after they're changed.
 
-    Office.context.mailbox.item.notificationMessages.replaceAsync(
-      id,
-      {
-        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
-        message: "Notification message with id = " + id + " has been replaced with an informational message.",
-        icon: "icon2",
-        persistent: false
-      },
-      handleResult);
+          selectedShapes.items
+            .sort((a, b) => (a.zOrderPosition - b.zOrderPosition) * direction)
+            .forEach((shape) => {
+              try {
+                const originalZOrderPosition = shape.zOrderPosition;
+                shape.setZOrder(operation);
+
+                console.log(`Changed z-order of shape ${shape.id}.`);
+              } catch (err) {
+                console.log(`Unable to change z-order of shape ${shape.id}. ${err.message}`);
+              }
+            });
+
+          await context.sync();
+        }
+      });
+    }
+PowerPoint.ShapeAddOptions:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
 
 
-    // Removes a notification message from the current mail item.
+    // This function gets the collection of shapes on the first slide,
+
+    // and adds a hexagon shape to the collection, while specifying its
 
-    const id = $("#notificationId").val().toString();
+    // location and size. Then it names the shape.
 
-    Office.context.mailbox.item.notificationMessages.removeAsync(id,
-    handleResult);
-'Office.MessageCompose#removeAttachmentAsync:member(1)':
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      const shapeOptions: PowerPoint.ShapeAddOptions = {
+        left: 100,
+        top: 100,
+        height: 150,
+        width: 150,
+      };
+      const hexagon: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.hexagon, shapeOptions);
+      hexagon.name = "Hexagon";
+
+      await context.sync();
+    });
+PowerPoint.ShapeAutoSize:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/attachments-compose.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
 
 
-    Office.context.mailbox.item.removeAttachmentAsync(
-      $("#attachmentId")
-        .val()
-        .toString(),
-      (result) => {
-        if (result.status === Office.AsyncResultStatus.Failed) {
-          console.error(result.error.message);
-          return;
-        }
+    // This function gets the collection of shapes on the first slide,
 
-        console.log(`Attachment removed successfully.`);
-      }
-    );
-'Office.MessageCompose#sensitivityLabel:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/60-sensitivity-label/sensitivity-label.yaml
+    // and adds a brace pair, {}, to the collection, while specifying its
 
+    // location and size. Then it names the shape, sets its text and font
 
-    // This snippet gets the current mail item's sensitivity label.
+    // color, and centers it inside the braces.
 
-    Office.context.sensitivityLabelsCatalog.getIsEnabledAsync((asyncResult) => {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded && asyncResult.value == true) {
-        Office.context.mailbox.item.sensitivityLabel.getAsync((asyncResult) => {
-          if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-            console.log(asyncResult.value);
-          } else {
-            console.log("Action failed with error: " + asyncResult.error.message);
-          }
-        });
-      } else {
-        console.log("Action failed with error: " + asyncResult.error.message);
-      }
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      const braces: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.bracePair, {
+        left: 100,
+        top: 400,
+        height: 50,
+        width: 150,
+      });
+      braces.name = "Braces";
+      braces.textFrame.textRange.text = "Shape text";
+      braces.textFrame.textRange.font.color = "purple";
+      braces.textFrame.textRange.font.underline = PowerPoint.ShapeFontUnderlineStyle.heavy;
+      braces.textFrame.verticalAlignment = PowerPoint.TextVerticalAlignment.middleCentered;
+      braces.textFrame.autoSizeSetting = PowerPoint.ShapeAutoSize.autoSizeShapeToFitText;
+
+      return context.sync();
     });
-'Office.MessageCompose#seriesId:member':
+PowerPoint.ShapeCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-series-id.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
 
 
-    const seriesId = Office.context.mailbox.item.seriesId;
+    // Changes the transparency of every geometric shape in the slide.
 
+    await PowerPoint.run(async (context) => {
+      // Get the type of shape for every shape in the collection.
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      shapes.load("type");
+      await context.sync();
 
-    if (seriesId === undefined) {
-      console.log("This is a message that's not a meeting request.");
-    } else if (seriesId === null) {
-      console.log("This is a single appointment, a parent series, or a meeting request for a series or single meeting.");
-    } else {
-      console.log("This is an instance belonging to series with ID " + seriesId);
-    }
-'Office.MessageCompose#sessionData:member':
+      // Change the shape transparency to be halfway transparent.
+      shapes.items.forEach((shape) => {
+        if (shape.type === PowerPoint.ShapeType.geometricShape) {
+          shape.fill.transparency = 0.5;
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.ShapeCollection#addGeometricShape:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/session-data-apis.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
 
 
-    Office.context.mailbox.item.sessionData.getAllAsync(function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log("The sessionData is " + JSON.stringify(asyncResult.value));
-      } else {
-        console.log("Failed to get all sessionData. Error: " + JSON.stringify(asyncResult.error));
-      }
-    });
-'Office.MessageCompose#setSelectedDataAsync:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/set-selected-data.yaml
+    // This function gets the collection of shapes on the first slide,
 
+    // and adds a hexagon shape to the collection, while specifying its
 
-    Office.context.mailbox.item.setSelectedDataAsync("Replaced",
-    function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log("Selected text has been updated successfully.");
-      } else {
-        console.error(asyncResult.error);
-      }
+    // location and size. Then it names the shape.
+
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      const shapeOptions: PowerPoint.ShapeAddOptions = {
+        left: 100,
+        top: 100,
+        height: 150,
+        width: 150,
+      };
+      const hexagon: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.hexagon, shapeOptions);
+      hexagon.name = "Hexagon";
+
+      await context.sync();
     });
-'Office.MessageCompose#subject:member':
+PowerPoint.ShapeCollection#addGroup:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-subject-compose.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/group-ungroup-shapes.yaml
 
 
-    Office.context.mailbox.item.subject.getAsync((result) => {
-      if (result.status !== Office.AsyncResultStatus.Succeeded) {
-        console.error(`Action failed with message ${result.error.message}`);
+    await PowerPoint.run(async (context) => {
+      // Groups the geometric shapes on the current slide.
+
+      // Get the shapes on the current slide.
+      context.presentation.load("slides");
+      const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
+      slide.load("shapes/items/type,shapes/items/id");
+      await context.sync();
+
+      const shapes: PowerPoint.ShapeCollection = slide.shapes;
+      const shapesToGroup = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.geometricShape);
+      if (shapesToGroup.length === 0) {
+        console.warn("No shapes on the current slide, so nothing to group.");
         return;
       }
-      console.log(`Subject: ${result.value}`);
+
+      // Group the geometric shapes.
+      console.log(`Number of shapes to group: ${shapesToGroup.length}`);
+      const group = shapes.addGroup(shapesToGroup);
+      group.load("id");
+      await context.sync();
+
+      console.log(`Grouped shapes. Group ID: ${group.id}`);
     });
+PowerPoint.ShapeCollection#addLine:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-subject-compose.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
 
 
-    let subject = "Hello World!";
+    // This function gets the collection of shapes on the first slide,
 
-    Office.context.mailbox.item.subject.setAsync(subject, (result) => {
-      if (result.status !== Office.AsyncResultStatus.Succeeded) {
-        console.error(`Action failed with message ${result.error.message}`);
-        return;
-      }
-      console.log(`Successfully set subject to ${subject}`);
-    });
-'Office.MessageCompose#to:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml
+    // and adds a line to the collection, while specifying its
 
+    // start and end points. Then it names the shape.
 
-    Office.context.mailbox.item.to.getAsync(function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        const msgTo = asyncResult.value;
-        console.log("Message being sent to:");
-        for (let i = 0; i < msgTo.length; i++) {
-          console.log(msgTo[i].displayName + " (" + msgTo[i].emailAddress + ")");
-        }
-      } else {
-        console.error(asyncResult.error);
-      }
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+
+      // For a line, left and top are the coordinates of the start point,
+      // while height and width are the coordinates of the end point.
+      const line: PowerPoint.Shape = shapes.addLine(PowerPoint.ConnectorType.straight, {
+        left: 400,
+        top: 200,
+        height: 20,
+        width: 150,
+      });
+      line.name = "StraightLine";
+
+      await context.sync();
     });
+PowerPoint.ShapeCollection#addTable:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    const email = $("#emailTo")
-      .val()
-      .toString();
-    const emailArray = [email];
+    // Adds a basic table.
 
-    Office.context.mailbox.item.to.setAsync(emailArray, function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log("Succeeded in setting To field.");
-      } else {
-        console.error(asyncResult.error);
-      }
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a simple table, specifying the row and column count.
+      shapes.addTable(3, 4);
+      await context.sync();
     });
-'Office.MessageRead#attachments:member':
+PowerPoint.ShapeCollection#addTextBox:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/get-attachments-read.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
+
 
+    // This function gets the collection of shapes on the first slide,
 
-    const attachments = Office.context.mailbox.item.attachments;
+    // and adds a text box to the collection, while specifying its text,
 
-    console.log(attachments);
-'Office.MessageRead#categories:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-categories.yaml
+    // location, and size. Then it names the text box.
 
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      const textbox: PowerPoint.Shape = shapes.addTextBox("Hello!", {
+        left: 100,
+        top: 300,
+        height: 300,
+        width: 450,
+      });
+      textbox.name = "Textbox";
 
-    Office.context.mailbox.item.categories.getAsync(function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        const categories = asyncResult.value;
-        if (categories && categories.length > 0) {
-          console.log("Categories assigned to this item:");
-          console.log(JSON.stringify(categories));
-        } else {
-          console.log("There are no categories assigned to this item.");
-        }
-      } else {
-        console.error(asyncResult.error);
-      }
+      return context.sync();
     });
+PowerPoint.ShapeCollection#getCount:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-categories.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    // Note: In order for you to successfully add a category,
+    // Gets the table from a shape.
 
-    // it must be in the mailbox categories master list.
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      shapes.load("items");
+      await context.sync();
+
+      if (shapeCount.value > 0) {
+        const shape = shapes.getItemAt(0);
+        shape.load("type");
+        await context.sync();
 
+        // The shape type can indicate whether the shape is a table.
+        const isTable = shape.type === PowerPoint.ShapeType.table;
 
-    Office.context.mailbox.masterCategories.getAsync(function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        const masterCategories = asyncResult.value;
-        if (masterCategories && masterCategories.length > 0) {
-          // Grab the first category from the master list.
-          const categoryToAdd = [masterCategories[0].displayName];
-          Office.context.mailbox.item.categories.addAsync(categoryToAdd, function(asyncResult) {
-            if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-              console.log(`Successfully assigned category '${categoryToAdd}' to item.`);
-            } else {
-              console.log("categories.addAsync call failed with error: " + asyncResult.error.message);
-            }
-          });
-        } else {
-          console.log("There are no categories in the master list on this mailbox. You can add categories using Office.context.mailbox.masterCategories.addAsync.");
-        }
-      } else {
-        console.error(asyncResult.error);
-      }
+        if (isTable) {
+          // Get the Table object for the Shape which is a table.
+          const table = shape.getTable();
+          table.load();
+          await context.sync();
+
+          // Get the Table row and column count.
+          console.log("Table RowCount: " + table.rowCount + " and columnCount: " + table.columnCount);
+        } else console.log("Selected shape isn't table.");
+      } else console.log("No shape selected.");
     });
+PowerPoint.ShapeCollection#getItemAt:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/45-categories/work-with-categories.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/tags/tags.yaml
 
 
-    Office.context.mailbox.item.categories.getAsync(function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        const categories = asyncResult.value;
-        if (categories && categories.length > 0) {
-          // Grab the first category assigned to this item.
-          const categoryToRemove = [categories[0].displayName];
-          Office.context.mailbox.item.categories.removeAsync(categoryToRemove, function(asyncResult) {
-            if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-              console.log(`Successfully unassigned category '${categoryToRemove}' from this item.`);
-            } else {
-              console.log("categories.removeAsync call failed with error: " + asyncResult.error.message);
-            }
-          });
-        } else {
-          console.log("There are no categories assigned to this item.");
-        }
-      } else {
-        console.error(asyncResult.error);
-      }
+    await PowerPoint.run(async function(context) {
+      const slide: PowerPoint.Slide = context.presentation.slides.getItemAt(0);
+      const shape: PowerPoint.Shape = slide.shapes.getItemAt(0);
+      shape.tags.add("MOUNTAIN", "Denali");
+
+      await context.sync();
+
+      const myShapeTag: PowerPoint.Tag = shape.tags.getItem("MOUNTAIN");
+      myShapeTag.load("key, value");
+
+      await context.sync();
+
+      console.log("Added key " + JSON.stringify(myShapeTag.key) + " with value " + JSON.stringify(myShapeTag.value));
     });
-'Office.MessageRead#cc:member':
+PowerPoint.ShapeCollection#load:member(2):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-cc-message-read.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
 
 
-    const msgCc = Office.context.mailbox.item.cc;
+    // Changes the transparency of every geometric shape in the slide.
 
-    console.log("Message copied to:");
+    await PowerPoint.run(async (context) => {
+      // Get the type of shape for every shape in the collection.
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      shapes.load("type");
+      await context.sync();
 
-    for (let i = 0; i < msgCc.length; i++) {
-      console.log(msgCc[i].displayName + " (" + msgCc[i].emailAddress + ")");
-    }
-'Office.MessageRead#conversationId:member':
+      // Change the shape transparency to be halfway transparent.
+      shapes.items.forEach((shape) => {
+        if (shape.type === PowerPoint.ShapeType.geometricShape) {
+          shape.fill.transparency = 0.5;
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.ShapeFill:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-conversation-id-message.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
 
 
-    console.log(`Conversation ID:
-    ${Office.context.mailbox.item.conversationId}`);
-'Office.MessageRead#dateTimeCreated:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-date-time-created-read.yaml
+    // Changes the transparency of every geometric shape in the slide.
 
+    await PowerPoint.run(async (context) => {
+      // Get the type of shape for every shape in the collection.
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      shapes.load("type");
+      await context.sync();
 
-    console.log(`Creation date and time:
-    ${Office.context.mailbox.item.dateTimeCreated}`);
-'Office.MessageRead#dateTimeModified:member':
+      // Change the shape transparency to be halfway transparent.
+      shapes.items.forEach((shape) => {
+        if (shape.type === PowerPoint.ShapeType.geometricShape) {
+          shape.fill.transparency = 0.5;
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.ShapeFill#setImage:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-date-time-modified-read.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml
 
 
-    console.log(`Date and time item last modified:
-    ${Office.context.mailbox.item.dateTimeModified}`);
-'Office.MessageRead#display:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml
+    // Inserts an image with binding.
 
+    await PowerPoint.run(async (context) => {
+      const bindingId = (document.getElementById("temp-binding-id") as HTMLInputElement).value;
+      const slide = context.presentation.getSelectedSlides().getItemAt(0);
+      const myShape = slide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.rectangle, {
+        top: 100,
+        left: 30,
+        width: 200,
+        height: 200
+      });
 
-    // This snippet temporarily sets the content displayed in the body of a
-    message in read mode.
+      myShape.fill.setImage(flowerImage);
+      context.presentation.bindings.add(myShape, PowerPoint.BindingType.shape, bindingId);
+      await context.sync();
 
-    // The set content will remain visible until the user switches to a
-    different message in the Reading Pane or closes the window of the current
-    message.
+      const bindingsDropdown = document.getElementById("bindings-dropdown") as HTMLSelectElement;
 
-    const bodyText = $("#body-text-field")
-      .val()
-      .toString();
-    Office.context.mailbox.item.display.body.setAsync(bodyText, (asyncResult) =>
-    {
-      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
-        console.log(`Action failed with error: ${asyncResult.error.message}`);
-        return;
-      }
+      const option = new Option(`Binding ${bindingId}`, bindingId);
 
-      console.log("Temporarily set the content displayed in the body.");
+      // When a binding ID already exists, the binding is updated to refer to the new shape
+      // so select the existing item rather than add a new one.
+      const foundIndex = findDropdownItem(bindingsDropdown, option.text);
+      if (foundIndex < 0) {
+        bindingsDropdown.add(option);
+        bindingsDropdown.selectedIndex = bindingsDropdown.options.length - 1;
+      } else {
+        bindingsDropdown.selectedIndex = foundIndex;
+      }
     });
-'Office.MessageRead#displayReplyAllForm:member(1)':
+PowerPoint.ShapeFill#setSolidColor:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-forms.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
 
-    Office.context.mailbox.item.displayReplyAllForm("This is a reply ALL with
-    <b>some bold text</b>.");
-'Office.MessageRead#displayReplyAllFormAsync:member(1)':
+    // Changes the selected shapes fill color to red.
+
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      shapes.load("items/fill/type");
+      await context.sync();
+      shapes.items.map((shape) => {
+        const shapeFillType = shape.fill.type as PowerPoint.ShapeFillType;
+        console.log(`Shape ID ${shape.id} original fill type: ${shapeFillType}`);
+        shape.fill.setSolidColor("red");
+      });
+      await context.sync();
+    });
+PowerPoint.ShapeFill#foregroundColor:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-forms.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
 
-    Office.context.mailbox.item.displayReplyAllFormAsync("This is a reply ALL
-    with <b>some bold text</b>.", function(
-      asyncResult
-    ) {
-      console.log(JSON.stringify(asyncResult));
+    // Creates random shapes on the selected slide.
+
+    await PowerPoint.run(async (context) => {
+      let finalTable = "";
+      const currentSlide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
+      const maxNewShapeWidth = 200;
+      const maxNewShapeHeight = 200;
+      const minNewShapeWidth = 50;
+      const minNewShapeHeight = 50;
+      for (let i = 0; i < 20; i++) {
+        const rectangle: PowerPoint.Shape = currentSlide.shapes.addGeometricShape(
+          PowerPoint.GeometricShapeType.rectangle,
+        );
+        rectangle.height = getRandomBetween(minNewShapeWidth, maxNewShapeWidth);
+        rectangle.width = getRandomBetween(minNewShapeHeight, maxNewShapeHeight);
+        rectangle.left = getRandomBetween(0, slideWidth - rectangle.width);
+        rectangle.top = getRandomBetween(0, slideHeight - rectangle.height);
+        rectangle.fill.foregroundColor = generateRandomHexColor();
+      }
+      finalTable += "Done<br>";
+      const outputSpan = document.getElementById("outputSpan");
+      outputSpan.innerHTML = "";
+      outputSpan.innerHTML += finalTable;
     });
-'Office.MessageRead#displayReplyForm:member(1)':
+PowerPoint.ShapeFill#transparency:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-forms.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
 
 
-    Office.context.mailbox.item.displayReplyForm("This is a reply with <i>some
-    text in italics</i>.");
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
+    // Changes the transparency of every geometric shape in the slide.
 
+    await PowerPoint.run(async (context) => {
+      // Get the type of shape for every shape in the collection.
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      shapes.load("type");
+      await context.sync();
 
-    Office.context.mailbox.item.displayReplyForm({
-      htmlBody: "This is a reply with an inline image and an item attachment.<br><img src='/service/cid:dog.jpg'>",
-      attachments: [
-        { type: "file", url: "https://i.imgur.com/9S36xvA.jpg", name: "dog.jpg", inLine: true },
-        { type: "item", itemId: Office.context.mailbox.item.itemId, name: "test_email.msg" }
-      ],
-      callback: (result) => {
-        if (result.status === Office.AsyncResultStatus.Failed) {
-          console.error(`Action failed with message ${result.error.message}`);
-          return;
+      // Change the shape transparency to be halfway transparent.
+      shapes.items.forEach((shape) => {
+        if (shape.type === PowerPoint.ShapeType.geometricShape) {
+          shape.fill.transparency = 0.5;
         }
-
-        console.log("Created reply with attachments.");
-      }
+      });
+      await context.sync();
     });
-'Office.MessageRead#displayReplyFormAsync:member(1)':
+PowerPoint.ShapeFill#type:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-forms.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
 
-    Office.context.mailbox.item.displayReplyFormAsync("This is a reply with
-    <i>some text in italics</i>.", function(
-      asyncResult
-    ) {
-      console.log(JSON.stringify(asyncResult));
+    // Changes the selected shapes fill color to red.
+
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      shapes.load("items/fill/type");
+      await context.sync();
+      shapes.items.map((shape) => {
+        const shapeFillType = shape.fill.type as PowerPoint.ShapeFillType;
+        console.log(`Shape ID ${shape.id} original fill type: ${shapeFillType}`);
+        shape.fill.setSolidColor("red");
+      });
+      await context.sync();
     });
+PowerPoint.ShapeFillType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
-
-
-    // The async version is only available starting with requirement set 1.9.
-
-    // It provides a callback when the new appointment form has been created.
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
-    Office.context.mailbox.item.displayReplyFormAsync(
-      {
-        htmlBody: "This is a reply with an inline image and an item attachment.<br><img src='/service/cid:dog.jpg'>",
-        attachments: [
-          { type: "file", url: "http://i.imgur.com/9S36xvA.jpg", name: "dog.jpg", inLine: true },
-          { type: "item", itemId: Office.context.mailbox.item.itemId, name: "test_email.msg" }
-        ]
-      },
-      (asyncResult) => {
-        console.log(JSON.stringify(asyncResult));
-      }
-    );
-'Office.MessageRead#end:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-end-read.yaml
 
+    // Changes the selected shapes fill color to red.
 
-    console.log(`Appointment ends: ${Office.context.mailbox.item.end}`);
-'Office.MessageRead#from:member':
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      shapes.load("items/fill/type");
+      await context.sync();
+      shapes.items.map((shape) => {
+        const shapeFillType = shape.fill.type as PowerPoint.ShapeFillType;
+        console.log(`Shape ID ${shape.id} original fill type: ${shapeFillType}`);
+        shape.fill.setSolidColor("red");
+      });
+      await context.sync();
+    });
+PowerPoint.ShapeFont:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-from-message-read.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
 
 
-    const msgFrom = Office.context.mailbox.item.from;
+    // Gets navigational (complex) properties of the selected text range.
 
-    console.log("Message received from: " + msgFrom.displayName + " (" +
-    msgFrom.emailAddress + ")");
-'Office.MessageRead#getAllInternetHeadersAsync:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/70-mime-headers/get-internet-headers-message-read.yaml
+    await PowerPoint.run(async (context) => {
+      const textRange: PowerPoint.TextRange = context.presentation.getSelectedTextRange();
+      textRange.load("font,paragraphFormat/bulletFormat,paragraphFormat/horizontalAlignment");
+      await context.sync();
 
+      console.log("Font properties of selected text range:");
+      console.log(`\tallCaps: ${textRange.font.allCaps}`);
+      console.log(`\tbold: ${textRange.font.bold}`);
+      console.log(`\tcolor: ${textRange.font.color}`);
+      console.log(`\tdoubleStrikethrough: ${textRange.font.doubleStrikethrough}`);
+      console.log(`\titalic: ${textRange.font.italic}`);
+      console.log(`\tname: ${textRange.font.name}`);
+      console.log(`\tsize: ${textRange.font.size}`);
+      console.log(`\tsmallCaps: ${textRange.font.smallCaps}`);
+      console.log(`\tstrikethrough: ${textRange.font.strikethrough}`);
+      console.log(`\tsubscript: ${textRange.font.subscript}`);
+      console.log(`\tsuperscript: ${textRange.font.superscript}`);
+      console.log(`\tunderline: ${textRange.font.underline}`);
 
-    Office.context.mailbox.item.getAllInternetHeadersAsync(function
-    (asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log("Internet headers received successfully");
-        if (asyncResult.value.match(/preferred-fruit:.*/gim)) {
-          console.log("Sender's preferred fruit: " + asyncResult.value.match(/preferred-fruit:.*/gim)[0].slice(17));
-        } else {
-          console.log("Didn't receive header with sender's preferred fruit");
-        }
-        if (asyncResult.value.match(/preferred-vegetable:.*/gim)) {
-          console.log(
-            "Sender's preferred vegetable: " + asyncResult.value.match(/preferred-vegetable:.*/gim)[0].slice(21)
-          );
-        } else {
-          console.log("Didn't receive header with sender's preferred vegetable");
-        }
-      } else {
-        console.log("Error getting internet headers: " + JSON.stringify(asyncResult.error));
-      }
+      console.log("Paragraph format properties of selected text range:");
+      console.log(`\tbulletFormat.visible: ${textRange.paragraphFormat.bulletFormat.visible}`);
+      console.log(`\thorizontalAlignment: ${textRange.paragraphFormat.horizontalAlignment}`);
     });
-'Office.MessageRead#getAsFileAsync:member(2)':
+PowerPoint.ShapeFont#color:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-eml-format.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
 
 
-    Office.context.mailbox.item.getAsFileAsync((asyncResult) => {
-      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
-        console.log(`Error encountered during processing: ${asyncResult.error.message}`);
-        return;
-      }
+    // Sets the color of the selected text range to green.
 
-      console.log(asyncResult.value);
+    await PowerPoint.run(async (context) => {
+      const textRange: PowerPoint.TextRange = context.presentation.getSelectedTextRange();
+      textRange.font.color = "green";
+      await context.sync();
     });
-'Office.MessageRead#getAttachmentContentAsync:member(1)':
+PowerPoint.ShapeFont#underline:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/40-attachments/get-attachment-content.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
 
 
-    // Gets the attachments of the current message or appointment in read mode.
+    // This function gets the collection of shapes on the first slide,
 
-    // The item.attachments call can only be used in read mode.
+    // and adds a brace pair, {}, to the collection, while specifying its
 
-    const attachments = item.attachments;
+    // location and size. Then it names the shape, sets its text and font
 
-    if (attachments.length <= 0) {
-      console.log("Mail item has no attachments.");
-      return;
-    }
+    // color, and centers it inside the braces.
 
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      const braces: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.bracePair, {
+        left: 100,
+        top: 400,
+        height: 50,
+        width: 150,
+      });
+      braces.name = "Braces";
+      braces.textFrame.textRange.text = "Shape text";
+      braces.textFrame.textRange.font.color = "purple";
+      braces.textFrame.textRange.font.underline = PowerPoint.ShapeFontUnderlineStyle.heavy;
+      braces.textFrame.verticalAlignment = PowerPoint.TextVerticalAlignment.middleCentered;
+      braces.textFrame.autoSizeSetting = PowerPoint.ShapeAutoSize.autoSizeShapeToFitText;
 
-    for (let i = 0; i < attachments.length; i++) {
-      // Log the attachment type and its contents to the console.
-      item.getAttachmentContentAsync(attachments[i].id, handleAttachmentsCallback);
-    }
-'Office.MessageRead#getRegExMatches:member(1)':
+      return context.sync();
+    });
+PowerPoint.ShapeFontUnderlineStyle:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/75-regex-matches/contextual.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
 
 
-    // This API only works when you click on the highlighted word "ScriptLab".
+    // This function gets the collection of shapes on the first slide,
 
-    console.log(Office.context.mailbox.item.getRegExMatches());
-'Office.MessageRead#getRegExMatchesByName:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/75-regex-matches/contextual.yaml
+    // and adds a brace pair, {}, to the collection, while specifying its
 
+    // location and size. Then it names the shape, sets its text and font
 
-    // This API only works when you click on the highlighted word "ScriptLab".
+    // color, and centers it inside the braces.
 
-    console.log(Office.context.mailbox.item.getRegExMatchesByName("sampleRegexName"));
-'Office.MessageRead#getSelectedRegExMatches:member(1)':
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      const braces: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.bracePair, {
+        left: 100,
+        top: 400,
+        height: 50,
+        width: 150,
+      });
+      braces.name = "Braces";
+      braces.textFrame.textRange.text = "Shape text";
+      braces.textFrame.textRange.font.color = "purple";
+      braces.textFrame.textRange.font.underline = PowerPoint.ShapeFontUnderlineStyle.heavy;
+      braces.textFrame.verticalAlignment = PowerPoint.TextVerticalAlignment.middleCentered;
+      braces.textFrame.autoSizeSetting = PowerPoint.ShapeAutoSize.autoSizeShapeToFitText;
+
+      return context.sync();
+    });
+PowerPoint.ShapeGroup:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/75-regex-matches/contextual.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/group-ungroup-shapes.yaml
 
 
-    const matches = Office.context.mailbox.item.getSelectedRegExMatches();
-
-    if (matches) {
-        console.log(matches);
-    } else {
-        console.error("Open add-in by clicking on a highlighted regex match, for this API to return something useful.");
-    }
-'Office.MessageRead#getSharedPropertiesAsync:member(2)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/65-delegates-and-shared-folders/get-shared-properties.yaml
+    await PowerPoint.run(async (context) => {
+      // Ungroups the first shape group on the current slide.
 
+      // Get the shapes on the current slide.
+      context.presentation.load("slides");
+      const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
+      slide.load("shapes/items/type,shapes/items/id");
+      await context.sync();
 
-    Office.context.mailbox.item.getSharedPropertiesAsync((result) => {
-      if (result.status === Office.AsyncResultStatus.Failed) {
-        console.error("The current folder or mailbox isn't shared.");
+      const shapes: PowerPoint.ShapeCollection = slide.shapes;
+      const shapeGroups = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.group);
+      if (shapeGroups.length === 0) {
+        console.warn("No shape groups on the current slide, so nothing to ungroup.");
         return;
       }
-      const sharedProperties = result.value;
-      console.log(`Owner: ${sharedProperties.owner}`);
-      console.log(`Permissions: ${sharedProperties.delegatePermissions}`);
-      console.log(`Target mailbox: ${sharedProperties.targetMailbox}`);
-    });
-'Office.MessageRead#internetMessageId:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-internet-message-id-read.yaml
-
-
-    console.log(`Internet message ID:
-    ${Office.context.mailbox.item.internetMessageId}`);
-'Office.MessageRead#itemClass:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-item-class-read.yaml
 
+      // Ungroup the first grouped shapes.
+      const firstGroupId = shapeGroups[0].id;
+      const shapeGroupToUngroup = shapes.getItem(firstGroupId);
+      shapeGroupToUngroup.group.ungroup();
+      await context.sync();
 
-    console.log(`Item class: ${Office.context.mailbox.item.itemClass}`);
-'Office.MessageRead#itemType:member':
+      console.log(`Ungrouped shapes with group ID: ${firstGroupId}`);
+    });
+PowerPoint.ShapeGroup#ungroup:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-item-type.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/group-ungroup-shapes.yaml
 
-    const itemType = Office.context.mailbox.item.itemType;
 
-    switch (itemType) {
-        case Office.MailboxEnums.ItemType.Appointment:
-            console.log(`Current item is an ${itemType}.`);
-            break;
-        case Office.MailboxEnums.ItemType.Message:
-            console.log(`Current item is a ${itemType}. A message could be an email, meeting request, meeting response, or meeting cancellation.`);
-            break;
-    }
-'Office.MessageRead#loadCustomPropertiesAsync:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/15-item-custom-properties/load-set-get-save.yaml
+    await PowerPoint.run(async (context) => {
+      // Ungroups the first shape group on the current slide.
 
+      // Get the shapes on the current slide.
+      context.presentation.load("slides");
+      const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
+      slide.load("shapes/items/type,shapes/items/id");
+      await context.sync();
 
-    Office.context.mailbox.item.loadCustomPropertiesAsync((result) => {
-      if (result.status === Office.AsyncResultStatus.Failed) {
-        console.error(`loadCustomPropertiesAsync failed with message ${result.error.message}`);
+      const shapes: PowerPoint.ShapeCollection = slide.shapes;
+      const shapeGroups = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.group);
+      if (shapeGroups.length === 0) {
+        console.warn("No shape groups on the current slide, so nothing to ungroup.");
         return;
       }
 
-      customProps = result.value;
-      console.log("Loaded the CustomProperties object.");
+      // Ungroup the first grouped shapes.
+      const firstGroupId = shapeGroups[0].id;
+      const shapeGroupToUngroup = shapes.getItem(firstGroupId);
+      shapeGroupToUngroup.group.ungroup();
+      await context.sync();
+
+      console.log(`Ungrouped shapes with group ID: ${firstGroupId}`);
     });
-'Office.MessageRead#location:member':
+PowerPoint.ShapeLineDashStyle:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-location-read.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
 
 
-    console.log(`Appointment location:
-    ${Office.context.mailbox.item.location}`);
-'Office.MessageRead#normalizedSubject:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-normalized-subject-read.yaml
+    // Changes the dash style of every line in the slide.
 
+    await PowerPoint.run(async (context) => {
+      // Get the type of shape for every shape in the collection.
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      shapes.load("type");
+      await context.sync();
 
-    console.log(`Normalized subject:
-    ${Office.context.mailbox.item.normalizedSubject}`);
-'Office.MessageRead#notificationMessages:member':
+      // Change the dash style for shapes of the type `line`.
+      shapes.items.forEach((shape) => {
+        if (shape.type === PowerPoint.ShapeType.line) {
+          shape.lineFormat.style = PowerPoint.ShapeLineStyle.thickThin;
+          shape.lineFormat.dashStyle = PowerPoint.ShapeLineDashStyle.dashDot;
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.ShapeLineFormat:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
 
 
-    // Adds a progress indicator to the mail item.
+    // Changes the dash style of every line in the slide.
 
-    const id = $("#notificationId").val().toString();
+    await PowerPoint.run(async (context) => {
+      // Get the type of shape for every shape in the collection.
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      shapes.load("type");
+      await context.sync();
 
-    const details =
-      {
-        type: Office.MailboxEnums.ItemNotificationMessageType.ProgressIndicator,
-        message: "Progress indicator with id = " + id
-      };
-    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
-    handleResult);
+      // Change the dash style for shapes of the type `line`.
+      shapes.items.forEach((shape) => {
+        if (shape.type === PowerPoint.ShapeType.line) {
+          shape.lineFormat.style = PowerPoint.ShapeLineStyle.thickThin;
+          shape.lineFormat.dashStyle = PowerPoint.ShapeLineDashStyle.dashDot;
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.ShapeLineFormat#dashStyle:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
 
 
-    // Adds an informational notification to the mail item.
+    // Changes the dash style of every line in the slide.
 
-    const id = $("#notificationId").val().toString();
+    await PowerPoint.run(async (context) => {
+      // Get the type of shape for every shape in the collection.
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      shapes.load("type");
+      await context.sync();
 
-    const details =
-      {
-        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
-        message: "Non-persistent informational notification message with id = " + id,
-        icon: "icon1",
-        persistent: false
-      };
-    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
-    handleResult);
+      // Change the dash style for shapes of the type `line`.
+      shapes.items.forEach((shape) => {
+        if (shape.type === PowerPoint.ShapeType.line) {
+          shape.lineFormat.style = PowerPoint.ShapeLineStyle.thickThin;
+          shape.lineFormat.dashStyle = PowerPoint.ShapeLineDashStyle.dashDot;
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.ShapeScopedCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
-    // Adds a persistent information notification to the mail item.
 
-    const id = $("#notificationId").val().toString();
+    // Changes the selected shapes fill color to red.
 
-    const details =
-      {
-        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
-        message: "Persistent informational notification message with id = " + id,
-        icon: "icon1",
-        persistent: true
-      };
-    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
-    handleResult);
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      shapes.load("items/fill/type");
+      await context.sync();
+      shapes.items.map((shape) => {
+        const shapeFillType = shape.fill.type as PowerPoint.ShapeFillType;
+        console.log(`Shape ID ${shape.id} original fill type: ${shapeFillType}`);
+        shape.fill.setSolidColor("red");
+      });
+      await context.sync();
+    });
+PowerPoint.ShapeScopedCollection#getCount:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
-    // Gets all the notification messages and their keys for the current mail
-    item.
 
-    Office.context.mailbox.item.notificationMessages.getAllAsync((asyncResult)
-    => {
-      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
-        console.log(asyncResult.error.message);
-        return;
-      }
+    // Gets the shapes you selected on the slide and displays their IDs on the
+    task pane.
 
-      console.log(asyncResult.value);
+    await PowerPoint.run(async (context) => {
+      let finalTable = "";
+      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      await context.sync();
+      finalTable += "<br>getSelectedShapes.getCount returned:<b>" + shapeCount.value + "</b><br>";
+      finalTable +=
+        "<br><table border=1 cellpadding=3 cellspacing=0><tr><td bgcolor=#3333EE><font color=white>Index</font></td><td bgcolor=#3333EE><font color=white>Id</font></td></tr>";
+      shapes.load("items");
+      await context.sync();
+      shapes.items.map((shape, index) => {
+        finalTable += "<tr><td>" + index + "</td><td>" + shape.id + "</td></tr>";
+      });
+      finalTable += "</table>";
+      const outputSpan = document.getElementById("outputSpan");
+      outputSpan.innerHTML = "";
+      outputSpan.innerHTML += finalTable;
     });
+PowerPoint.ShapeType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
 
 
-    // Replaces a notification message of a given key with another message.
+    // Changes the dash style of every line in the slide.
 
-    const id = $("#notificationId").val().toString();
+    await PowerPoint.run(async (context) => {
+      // Get the type of shape for every shape in the collection.
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      shapes.load("type");
+      await context.sync();
 
-    Office.context.mailbox.item.notificationMessages.replaceAsync(
-      id,
-      {
-        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
-        message: "Notification message with id = " + id + " has been replaced with an informational message.",
-        icon: "icon2",
-        persistent: false
-      },
-      handleResult);
+      // Change the dash style for shapes of the type `line`.
+      shapes.items.forEach((shape) => {
+        if (shape.type === PowerPoint.ShapeType.line) {
+          shape.lineFormat.style = PowerPoint.ShapeLineStyle.thickThin;
+          shape.lineFormat.dashStyle = PowerPoint.ShapeLineDashStyle.dashDot;
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.ShapeZOrder:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml
 
-    // Removes a notification message from the current mail item.
 
-    const id = $("#notificationId").val().toString();
+    // Sends the shape to the back.
 
-    Office.context.mailbox.item.notificationMessages.removeAsync(id,
-    handleResult);
-'Office.MessageRead#recurrence:member':
+    changeZOrder(PowerPoint.ShapeZOrder.sendToBack);
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-recurrence-read.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml
 
 
-    const recurrence = Office.context.mailbox.item.recurrence;
+    async function changeZOrder(operation: PowerPoint.ShapeZOrder) {
+      // Changes the z-order position of the selected shapes.
+      return PowerPoint.run(async (context) => {
+        const selectedShapes = context.presentation.getSelectedShapes();
+        selectedShapes.load();
+        await context.sync();
 
+        if (selectedShapes.items.length === 0) {
+          console.log("No shapes are selected.");
+        } else {
+          let direction = 1; // Start with bottom-most (lowest number).
 
-    if (recurrence === undefined) {
-      console.log("This item is a message but not a meeting request.");
-    } else if (recurrence === null) {
-      console.log("This is a single appointment.");
-    } else {
-      console.log(JSON.stringify(recurrence));
-    }
-'Office.MessageRead#sender:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-sender-message-read.yaml
+          // Start with top-most when sending to back or bringing forward.
 
+          switch (operation) {
+            case PowerPoint.ShapeZOrder.bringForward:
 
-    const msgSender = Office.context.mailbox.item.sender;
+            case PowerPoint.ShapeZOrder.sendToBack:
+              direction = -1; // Reverse direction.
 
-    console.log("Sender: " + msgSender.displayName + " (" +
-    msgSender.emailAddress + ")");
-'Office.MessageRead#seriesId:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-series-id.yaml
+              break;
+          }
 
+          // Change the z-order position for each of the selected shapes,
 
-    const seriesId = Office.context.mailbox.item.seriesId;
+          // starting with the bottom-most when bringing to front or sending backward,
 
+          // or top-most when sending to back or bringing forward,
 
-    if (seriesId === undefined) {
-      console.log("This is a message that's not a meeting request.");
-    } else if (seriesId === null) {
-      console.log("This is a single appointment, a parent series, or a meeting request for a series or single meeting.");
-    } else {
-      console.log("This is an instance belonging to series with ID " + seriesId);
-    }
-'Office.MessageRead#start:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-start-read.yaml
+          // so the selected shapes retain their relative z-order positions after they're changed.
 
+          selectedShapes.items
+            .sort((a, b) => (a.zOrderPosition - b.zOrderPosition) * direction)
+            .forEach((shape) => {
+              try {
+                const originalZOrderPosition = shape.zOrderPosition;
+                shape.setZOrder(operation);
+
+                console.log(`Changed z-order of shape ${shape.id}.`);
+              } catch (err) {
+                console.log(`Unable to change z-order of shape ${shape.id}. ${err.message}`);
+              }
+            });
 
-    console.log(`Appointment starts: ${Office.context.mailbox.item.start}`);
-'Office.MessageRead#subject:member':
+          await context.sync();
+        }
+      });
+    }
+PowerPoint.Slide:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-subject-read.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
 
-    console.log(`Subject: ${Office.context.mailbox.item.subject}`);
-'Office.MessageRead#to:member':
+    // Reselects shapes that were saved previously.
+
+    await PowerPoint.run(async (context) => {
+      const slide1: PowerPoint.Slide = context.presentation.slides.getItem(savedSlideSelection[0]);
+      await context.sync();
+      slide1.setSelectedShapes(savedShapeSelection);
+      await context.sync();
+    });
+PowerPoint.Slide#delete:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-to-message-read.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-set-slides.yaml
 
 
-    const msgTo = Office.context.mailbox.item.to;
+    // Deletes the selected slides.
 
-    const distributionLists = [];
+    await PowerPoint.run(async (context) => {
+      context.presentation.load("slides");
+      await context.sync();
+      const slides: PowerPoint.SlideScopedCollection = context.presentation.getSelectedSlides();
+      const slideCount = slides.getCount();
+      slides.load("items");
+      await context.sync();
+      slides.items.map((slide) => {
+        slide.delete();
+      });
+    });
+PowerPoint.Slide#exportAsBase64:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/export-import-slide.yaml
 
-    const externalRecipients = [];
 
-    const internalRecipients = [];
+    // Exports current slide.
 
-    const otherRecipients = [];
+    await PowerPoint.run(async (context) => {
+      const slide = context.presentation.getSelectedSlides().getItemAt(0);
+      const slideBase64DataResult = slide.exportAsBase64();
+      const imageBase64DataResult = slide.getImageAsBase64({ height: 300 });
+      await context.sync();
 
-    for (let i = 0; i < msgTo.length; i++) {
-        switch (msgTo[i].recipientType) {
-        case Office.MailboxEnums.RecipientType.DistributionList:
-            distributionLists.push(msgTo[i]);
-            break;
-        case Office.MailboxEnums.RecipientType.ExternalUser:
-            externalRecipients.push(msgTo[i]);
-            break;
-        case Office.MailboxEnums.RecipientType.User:
-            internalRecipients.push(msgTo[i]);
-            break;
-        case Office.MailboxEnums.RecipientType.Other:
-            otherRecipients.push(msgTo[i]);
-        }
-    }
+      localStorage.setItem("exportedSlide", slideBase64DataResult.value);
+      localStorage.setItem("exportedSlideImage", imageBase64DataResult.value);
 
+      updateSlideImage(imageBase64DataResult.value);
 
-    if (distributionLists.length > 0) {
-        console.log("Distribution Lists:");
-        distributionLists.forEach((recipient) => console.log(`${recipient.displayName}, ${recipient.emailAddress}`));
-    }
+      console.log("Slide was exported.");
+    });
+PowerPoint.Slide#getImageAsBase64:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/export-import-slide.yaml
 
 
-    if (externalRecipients.length > 0) {
-        console.log("External Recipients:");
-        externalRecipients.forEach((recipient) => console.log(`${recipient.displayName}, ${recipient.emailAddress}`));
-    }
+    // Exports current slide.
 
+    await PowerPoint.run(async (context) => {
+      const slide = context.presentation.getSelectedSlides().getItemAt(0);
+      const slideBase64DataResult = slide.exportAsBase64();
+      const imageBase64DataResult = slide.getImageAsBase64({ height: 300 });
+      await context.sync();
 
-    if (internalRecipients.length > 0) {
-        console.log("Internal Recipients:");
-        internalRecipients.forEach((recipient) => console.log(`${recipient.displayName}, ${recipient.emailAddress}`));
-    }
+      localStorage.setItem("exportedSlide", slideBase64DataResult.value);
+      localStorage.setItem("exportedSlideImage", imageBase64DataResult.value);
 
+      updateSlideImage(imageBase64DataResult.value);
 
-    if (otherRecipients.length > 0) {
-        console.log("Other Recipients:");
-        otherRecipients.forEach((recipient) => console.log(`${recipient.displayName}, ${recipient.emailAddress}`));
-    }
-'Office.NotificationMessageAction:interface':
+      console.log("Slide was exported.");
+    });
+PowerPoint.Slide#setSelectedShapes:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
 
-    // Adds an informational message with actions to the mail item.
+    // Reselects shapes that were saved previously.
 
-    const id = $("#notificationId").val().toString();
+    await PowerPoint.run(async (context) => {
+      const slide1: PowerPoint.Slide = context.presentation.slides.getItem(savedSlideSelection[0]);
+      await context.sync();
+      slide1.setSelectedShapes(savedShapeSelection);
+      await context.sync();
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
 
-    const itemId = Office.context.mailbox.item.itemId;
+    // Selects the first two shapes on slide 1.
 
-    const details = {
-      type: Office.MailboxEnums.ItemNotificationMessageType.InsightMessage,
-      message: "This is an insight notification with id = " + id,
-      icon: "icon1",
-      actions: [
-        {
-          actionText: "Open insight",
-          actionType: Office.MailboxEnums.ActionType.ShowTaskPane,
-          // Identify whether the current mail item is in read or compose mode to set the appropriate commandId value.
-          commandId: (itemId == undefined ? "PG.HelpCommand.Compose" : "PG.HelpCommand.Read"),
-          contextData: { a: "aValue", b: "bValue" }
-        }
-      ]
-    };
+    await PowerPoint.run(async (context) => {
+      context.presentation.load("slides");
+      await context.sync();
+      const slide1 = context.presentation.slides.getItemAt(0);
+      slide1.load("shapes/items/type");
+      await context.sync();
 
+      const shapes = slide1.shapes.items.filter((item) => item.type === PowerPoint.ShapeType.geometricShape);
+      const shape1: PowerPoint.Shape = shapes[0];
+      const shape2: PowerPoint.Shape = shapes[1];
+      shape1.load("id");
+      shape2.load("id");
+      await context.sync();
 
-    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
-    handleResult);
-'Office.NotificationMessageDetails:interface':
+      console.log(`IDs: ${shape1.id}, ${shape2.id}`);
+      slide1.setSelectedShapes([shape1.id, shape2.id]);
+      await context.sync();
+    });
+PowerPoint.SlideCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
 
 
-    // Gets all the notification messages and their keys for the current mail
-    item.
+    const chosenMaster = (document.getElementById("master-id") as
+    HTMLInputElement).value;
 
-    Office.context.mailbox.item.notificationMessages.getAllAsync((asyncResult)
-    => {
-      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
-        console.log(asyncResult.error.message);
-        return;
-      }
+    const chosenLayout = (document.getElementById("layout-id") as
+    HTMLInputElement).value;
 
-      console.log(asyncResult.value);
+
+    await PowerPoint.run(async function(context) {
+      // Create a new slide using an existing master slide and layout.
+      const newSlideOptions: PowerPoint.AddSlideOptions = {
+        slideMasterId: chosenMaster, /* An ID from `Presentation.slideMasters`. */
+        layoutId: chosenLayout /* An ID from `SlideMaster.layouts`. */
+      };
+      context.presentation.slides.add(newSlideOptions);
+      await context.sync();
     });
-'Office.NotificationMessages#addAsync:member(1)':
+PowerPoint.SlideCollection#add:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
 
 
-    // Adds a progress indicator to the mail item.
+    const chosenMaster = (document.getElementById("master-id") as
+    HTMLInputElement).value;
 
-    const id = $("#notificationId").val().toString();
+    const chosenLayout = (document.getElementById("layout-id") as
+    HTMLInputElement).value;
 
-    const details =
-      {
-        type: Office.MailboxEnums.ItemNotificationMessageType.ProgressIndicator,
-        message: "Progress indicator with id = " + id
+
+    await PowerPoint.run(async function(context) {
+      // Create a new slide using an existing master slide and layout.
+      const newSlideOptions: PowerPoint.AddSlideOptions = {
+        slideMasterId: chosenMaster, /* An ID from `Presentation.slideMasters`. */
+        layoutId: chosenLayout /* An ID from `SlideMaster.layouts`. */
       };
-    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
-    handleResult);
+      context.presentation.slides.add(newSlideOptions);
+      await context.sync();
+    });
+PowerPoint.SlideCollection#getItemAt:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-set-slides.yaml
 
-    // Adds an informational notification to the mail item.
 
-    const id = $("#notificationId").val().toString();
+    // Selects slides 2, 4, and 5.
 
-    const details =
-      {
-        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
-        message: "Non-persistent informational notification message with id = " + id,
-        icon: "icon1",
-        persistent: false
-      };
-    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
-    handleResult);
+    await PowerPoint.run(async (context) => {
+      context.presentation.load("slides");
+      await context.sync();
+      const slide2: PowerPoint.Slide = context.presentation.slides.getItemAt(1);
+      const slide4: PowerPoint.Slide = context.presentation.slides.getItemAt(3);
+      const slide5: PowerPoint.Slide = context.presentation.slides.getItemAt(4);
+      slide2.load("id");
+      slide4.load("id");
+      slide5.load("id");
+      try {
+        await context.sync();
+      } catch (error) {
+        console.warn("This action requires at least 5 slides in the presentation.");
+        return;
+      }
+      await context.sync();
+      context.presentation.setSelectedSlides([slide2.id, slide4.id, slide5.id]);
+      await context.sync();
+    });
+PowerPoint.SlideGetImageOptions:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/export-import-slide.yaml
 
 
-    // Adds a persistent information notification to the mail item.
+    // Exports current slide.
 
-    const id = $("#notificationId").val().toString();
+    await PowerPoint.run(async (context) => {
+      const slide = context.presentation.getSelectedSlides().getItemAt(0);
+      const slideBase64DataResult = slide.exportAsBase64();
+      const imageBase64DataResult = slide.getImageAsBase64({ height: 300 });
+      await context.sync();
 
-    const details =
-      {
-        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
-        message: "Persistent informational notification message with id = " + id,
-        icon: "icon1",
-        persistent: true
-      };
-    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
-    handleResult);
+      localStorage.setItem("exportedSlide", slideBase64DataResult.value);
+      localStorage.setItem("exportedSlideImage", imageBase64DataResult.value);
+
+      updateSlideImage(imageBase64DataResult.value);
+
+      console.log("Slide was exported.");
+    });
+PowerPoint.SlideLayout:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
 
 
-    // Adds an error notification to the mail item.
+    await PowerPoint.run(async function(context) {
+      // Load information about all the slide masters and associated layouts.
+      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
+      await context.sync();
 
-    const id = $("#notificationId").val().toString();
+      // Log the name and ID of each slide master.
+      for (let i = 0; i < slideMasters.items.length; i++) {
+        console.log("Master name: " + slideMasters.items[i].name);
+        console.log("Master ID: " + slideMasters.items[i].id);
 
-    const details =
-      {
-        type: Office.MailboxEnums.ItemNotificationMessageType.ErrorMessage,
-        message: "Error notification message with id = " + id
-      };
-    Office.context.mailbox.item.notificationMessages.addAsync(id, details,
-    handleResult);
-'Office.NotificationMessages#getAllAsync:member(1)':
+        // Log the name and ID of each slide layout in the slide master.
+        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
+        for (let j = 0; j < layoutsInMaster.items.length; j++) {
+          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
+        }
+      }
+    });
+PowerPoint.SlideLayout#id:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
 
 
-    // Gets all the notification messages and their keys for the current mail
-    item.
+    await PowerPoint.run(async function(context) {
+      // Load information about all the slide masters and associated layouts.
+      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
+      await context.sync();
 
-    Office.context.mailbox.item.notificationMessages.getAllAsync((asyncResult)
-    => {
-      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
-        console.log(asyncResult.error.message);
-        return;
-      }
+      // Log the name and ID of each slide master.
+      for (let i = 0; i < slideMasters.items.length; i++) {
+        console.log("Master name: " + slideMasters.items[i].name);
+        console.log("Master ID: " + slideMasters.items[i].id);
 
-      console.log(asyncResult.value);
+        // Log the name and ID of each slide layout in the slide master.
+        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
+        for (let j = 0; j < layoutsInMaster.items.length; j++) {
+          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
+        }
+      }
     });
-'Office.NotificationMessages#removeAsync:member(1)':
+PowerPoint.SlideLayoutCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
 
 
-    // Removes a notification message from the current mail item.
+    await PowerPoint.run(async function(context) {
+      // Load information about all the slide masters and associated layouts.
+      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
+      await context.sync();
 
-    const id = $("#notificationId").val().toString();
+      // Log the name and ID of each slide master.
+      for (let i = 0; i < slideMasters.items.length; i++) {
+        console.log("Master name: " + slideMasters.items[i].name);
+        console.log("Master ID: " + slideMasters.items[i].id);
 
-    Office.context.mailbox.item.notificationMessages.removeAsync(id,
-    handleResult);
-'Office.NotificationMessages#replaceAsync:member(1)':
+        // Log the name and ID of each slide layout in the slide master.
+        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
+        for (let j = 0; j < layoutsInMaster.items.length; j++) {
+          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
+        }
+      }
+    });
+PowerPoint.SlideLayoutCollection#load:member(2):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/35-notifications/add-getall-remove.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
 
 
-    // Replaces a notification message of a given key with another message.
+    await PowerPoint.run(async function(context) {
+      // Load information about all the slide masters and associated layouts.
+      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
+      await context.sync();
 
-    const id = $("#notificationId").val().toString();
+      // Log the name and ID of each slide master.
+      for (let i = 0; i < slideMasters.items.length; i++) {
+        console.log("Master name: " + slideMasters.items[i].name);
+        console.log("Master ID: " + slideMasters.items[i].id);
 
-    Office.context.mailbox.item.notificationMessages.replaceAsync(
-      id,
-      {
-        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
-        message: "Notification message with id = " + id + " has been replaced with an informational message.",
-        icon: "icon2",
-        persistent: false
-      },
-      handleResult);
-'Office.Organizer#getAsync:member(1)':
+        // Log the name and ID of each slide layout in the slide master.
+        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
+        for (let j = 0; j < layoutsInMaster.items.length; j++) {
+          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
+        }
+      }
+    });
+PowerPoint.ShapeLineStyle:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-organizer-appointment-organizer.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
 
 
-    Office.context.mailbox.item.organizer.getAsync(function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        const apptOrganizer = asyncResult.value;
-        console.log("Organizer: " + apptOrganizer.displayName + " (" + apptOrganizer.emailAddress + ")");
-      } else {
-        console.error(asyncResult.error);
-      }
+    // Changes the dash style of every line in the slide.
+
+    await PowerPoint.run(async (context) => {
+      // Get the type of shape for every shape in the collection.
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      shapes.load("type");
+      await context.sync();
+
+      // Change the dash style for shapes of the type `line`.
+      shapes.items.forEach((shape) => {
+        if (shape.type === PowerPoint.ShapeType.line) {
+          shape.lineFormat.style = PowerPoint.ShapeLineStyle.thickThin;
+          shape.lineFormat.dashStyle = PowerPoint.ShapeLineDashStyle.dashDot;
+        }
+      });
+      await context.sync();
     });
-'Office.Recipients#getAsync:member(2)':
+PowerPoint.SlideMaster:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
 
 
-    Office.context.mailbox.item.bcc.getAsync(function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        const msgBcc = asyncResult.value;
-        console.log("Message being blind-copied to:");
-        for (let i = 0; i < msgBcc.length; i++) {
-          console.log(msgBcc[i].displayName + " (" + msgBcc[i].emailAddress + ")");
+    await PowerPoint.run(async function(context) {
+      // Load information about all the slide masters and associated layouts.
+      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
+      await context.sync();
+
+      // Log the name and ID of each slide master.
+      for (let i = 0; i < slideMasters.items.length; i++) {
+        console.log("Master name: " + slideMasters.items[i].name);
+        console.log("Master ID: " + slideMasters.items[i].id);
+
+        // Log the name and ID of each slide layout in the slide master.
+        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
+        for (let j = 0; j < layoutsInMaster.items.length; j++) {
+          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
         }
-      } else {
-        console.error(asyncResult.error);
       }
     });
+PowerPoint.SlideMaster#id:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
 
 
-    Office.context.mailbox.item.cc.getAsync(function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        const msgCc = asyncResult.value;
-        console.log("Message being copied to:");
-        for (let i = 0; i < msgCc.length; i++) {
-          console.log(msgCc[i].displayName + " (" + msgCc[i].emailAddress + ")");
+    await PowerPoint.run(async function(context) {
+      // Load information about all the slide masters and associated layouts.
+      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
+      await context.sync();
+
+      // Log the name and ID of each slide master.
+      for (let i = 0; i < slideMasters.items.length; i++) {
+        console.log("Master name: " + slideMasters.items[i].name);
+        console.log("Master ID: " + slideMasters.items[i].id);
+
+        // Log the name and ID of each slide layout in the slide master.
+        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
+        for (let j = 0; j < layoutsInMaster.items.length; j++) {
+          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
         }
-      } else {
-        console.error(asyncResult.error);
       }
     });
+PowerPoint.SlideMasterCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
 
 
-    Office.context.mailbox.item.optionalAttendees.getAsync(function(asyncResult)
-    {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        const apptOptionalAttendees = asyncResult.value;
-        for (let i = 0; i < apptOptionalAttendees.length; i++) {
-          console.log(
-            "Optional attendees: " +
-              apptOptionalAttendees[i].displayName +
-              " (" +
-              apptOptionalAttendees[i].emailAddress +
-              ") - response: " +
-              apptOptionalAttendees[i].appointmentResponse
-          );
+    await PowerPoint.run(async function(context) {
+      // Load information about all the slide masters and associated layouts.
+      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
+      await context.sync();
+
+      // Log the name and ID of each slide master.
+      for (let i = 0; i < slideMasters.items.length; i++) {
+        console.log("Master name: " + slideMasters.items[i].name);
+        console.log("Master ID: " + slideMasters.items[i].id);
+
+        // Log the name and ID of each slide layout in the slide master.
+        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
+        for (let j = 0; j < layoutsInMaster.items.length; j++) {
+          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
         }
-      } else {
-        console.error(asyncResult.error);
       }
     });
+PowerPoint.SlideMasterCollection#load:member(2):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
 
 
-    Office.context.mailbox.item.requiredAttendees.getAsync(function(asyncResult)
-    {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        const apptRequiredAttendees = asyncResult.value;
-        for (let i = 0; i < apptRequiredAttendees.length; i++) {
-          console.log(
-            "Required attendees: " +
-              apptRequiredAttendees[i].displayName +
-              " (" +
-              apptRequiredAttendees[i].emailAddress +
-              ") - response: " +
-              apptRequiredAttendees[i].appointmentResponse
-          );
+    await PowerPoint.run(async function(context) {
+      // Load information about all the slide masters and associated layouts.
+      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
+      await context.sync();
+
+      // Log the name and ID of each slide master.
+      for (let i = 0; i < slideMasters.items.length; i++) {
+        console.log("Master name: " + slideMasters.items[i].name);
+        console.log("Master ID: " + slideMasters.items[i].id);
+
+        // Log the name and ID of each slide layout in the slide master.
+        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
+        for (let j = 0; j < layoutsInMaster.items.length; j++) {
+          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
         }
-      } else {
-        console.error(asyncResult.error);
       }
     });
+PowerPoint.SlideScopedCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
 
-    Office.context.mailbox.item.to.getAsync(function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        const msgTo = asyncResult.value;
-        console.log("Message being sent to:");
-        for (let i = 0; i < msgTo.length; i++) {
-          console.log(msgTo[i].displayName + " (" + msgTo[i].emailAddress + ")");
-        }
-      } else {
-        console.error(asyncResult.error);
-      }
+    // Saves which shapes are selected so that they can be reselected later.
+
+    await PowerPoint.run(async (context) => {
+      context.presentation.load("slides");
+      await context.sync();
+      const slides: PowerPoint.SlideScopedCollection = context.presentation.getSelectedSlides();
+      const slideCount = slides.getCount();
+      slides.load("items");
+      await context.sync();
+      savedSlideSelection = [];
+      slides.items.map((slide) => {
+        savedSlideSelection.push(slide.id);
+      });
+      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      shapes.load("items");
+      await context.sync();
+      shapes.items.map((shape) => {
+        savedShapeSelection.push(shape.id);
+      });
     });
-'Office.Recipients#setAsync:member(2)':
+PowerPoint.Table:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-bcc-message-compose.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    const email = $("#emailBcc")
-      .val()
-      .toString();
-    const emailArray = [email];
+    // Updates a table's values.
 
-    Office.context.mailbox.item.bcc.setAsync(emailArray, function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log("Succeeded in setting Bcc field.");
-      } else {
-        console.error(asyncResult.error);
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table (which is a type of Shape).
+      const shape = shapes.addTable(4, 3);
+      let table = shape.getTable();
+      table.load();
+      await context.sync();
+
+      // Update values in the table.
+      for (let rowIndex = 0; rowIndex < table.rowCount; rowIndex++) {
+        for (let columnIndex = 0; columnIndex < table.columnCount; columnIndex++) {
+          const cell = table.getCellOrNullObject(rowIndex, columnIndex);
+          cell.text = generateRandomString();
+        }
       }
+
+      await context.sync();
     });
+PowerPoint.Table#getCellOrNullObject:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    const email = $("#emailCc")
-      .val()
-      .toString();
-    const emailArray = [email];
+    // Updates a table's values.
 
-    Office.context.mailbox.item.cc.setAsync(emailArray, function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log("Succeeded in setting Cc field.");
-      } else {
-        console.error(asyncResult.error);
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table (which is a type of Shape).
+      const shape = shapes.addTable(4, 3);
+      let table = shape.getTable();
+      table.load();
+      await context.sync();
+
+      // Update values in the table.
+      for (let rowIndex = 0; rowIndex < table.rowCount; rowIndex++) {
+        for (let columnIndex = 0; columnIndex < table.columnCount; columnIndex++) {
+          const cell = table.getCellOrNullObject(rowIndex, columnIndex);
+          cell.text = generateRandomString();
+        }
       }
+
+      await context.sync();
     });
+PowerPoint.TableAddOptions:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    const email = $("#emailOptional")
-      .val()
-      .toString();
-    const emailArray = [email];
+    // Specifies the width and height of a table.
 
-    Office.context.mailbox.item.optionalAttendees.setAsync(emailArray,
-    function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log("Succeeded in setting optional attendees field.");
-      } else {
-        console.error(asyncResult.error);
-      }
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying the width and height.
+      shapes.addTable(3, 4, {
+        width: 600,
+        height: 400
+      });
+      await context.sync();
     });
+PowerPoint.TableAddOptions#columns:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    const email = $("#emailRequired")
-      .val()
-      .toString();
-    const emailArray = [email];
+    // Specifies the column widths and row heights of a table.
 
-    Office.context.mailbox.item.requiredAttendees.setAsync(emailArray,
-    function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log("Succeeded in setting required attendees field.");
-      } else {
-        console.error(asyncResult.error);
-      }
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying column widths and row heights.
+      shapes.addTable(3, 4, {
+        columns: [{ columnWidth: 100 }, { columnWidth: 200 }, { columnWidth: 100 }, { columnWidth: 200 }],
+        rows: [{ rowHeight: 60 }, { rowHeight: 120 }, { rowHeight: 180 }]
+      });
+      await context.sync();
     });
+PowerPoint.TableAddOptions#height:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    const email = $("#emailTo")
-      .val()
-      .toString();
-    const emailArray = [email];
+    // Specifies the width and height of a table.
 
-    Office.context.mailbox.item.to.setAsync(emailArray, function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log("Succeeded in setting To field.");
-      } else {
-        console.error(asyncResult.error);
-      }
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying the width and height.
+      shapes.addTable(3, 4, {
+        width: 600,
+        height: 400
+      });
+      await context.sync();
     });
-'Office.Recurrence#getAsync:member(1)':
+PowerPoint.TableAddOptions#mergedAreas:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-set-recurrence-appointment-organizer.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    Office.context.mailbox.item.recurrence.getAsync(function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        const recurrence = asyncResult.value;
-        if (recurrence === null) {
-          console.log("This is a single appointment.");
-        } else {
-          console.log(`Recurrence pattern: ${JSON.stringify(recurrence)}`);
-        }
-      } else {
-        console.error(asyncResult.error);
-      }
+    // Specifies the merge areas of a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying one 2x2 merged area.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "", "HHHH"],
+          ["1", "", "", "1234"]
+        ],
+        mergedAreas: [{ rowIndex: 1, columnIndex: 1, rowCount: 2, columnCount: 2 }]
+      });
+      await context.sync();
     });
-'Office.Recurrence#setAsync:member(1)':
+PowerPoint.TableAddOptions#rows:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/50-recurrence/get-set-recurrence-appointment-organizer.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    // Important: Can only set the recurrence pattern of an appointment series.
-
-
-    const currentDate = new Date();
+    // Specifies the column widths and row heights of a table.
 
-    let seriesTimeObject: Office.SeriesTime;
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
 
-    // Set series start date to tomorrow.
+      // Add a table, specifying column widths and row heights.
+      shapes.addTable(3, 4, {
+        columns: [{ columnWidth: 100 }, { columnWidth: 200 }, { columnWidth: 100 }, { columnWidth: 200 }],
+        rows: [{ rowHeight: 60 }, { rowHeight: 120 }, { rowHeight: 180 }]
+      });
+      await context.sync();
+    });
+PowerPoint.TableAddOptions#specificCellProperties:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
-    seriesTimeObject.setStartDate(currentDate.getFullYear(),
-    currentDate.getMonth(), currentDate.getDay() + 1);
 
-    // Set series end date to one year from now.
+    // Specifies the font formatting and fill colors of the cells in a table.
 
-    seriesTimeObject.setEndDate(currentDate.getFullYear() + 1,
-    currentDate.getMonth() + 1, currentDate.getDay());
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying font formatting and fill colors.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        specificCellProperties: [
+          [
+            { fill: { color: "red" }, font: { color: "yellow", name: "Calibri" } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", name: "Coolvetica" } },
+            { fill: { color: "red" }, font: { color: "yellow", italic: true } },
+            { fill: { color: "red" }, font: { color: "#9966cc", strikethrough: true } }
+          ],
+          [
+            { fill: { color: "#fbceb1" }, font: { color: "yellow", doubleStrikethrough: true } },
+            { fill: { color: "red" }, font: { color: "yellow", subscript: true } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", superscript: true } },
+            { fill: { color: "red" }, font: { color: "yellow" } }
+          ],
+          [
+            { fill: { color: "red" }, font: { color: "#b0bf1a" } },
+            { fill: { color: "#9966cc" }, font: { color: "yellow" } },
+            { fill: { color: "#b0bf1a" }, font: { color: "yellow" } },
+            { fill: { color: "red" }, font: { color: "#fbceb1" } }
+          ]
+        ]
+      });
+      await context.sync();
+    });
+PowerPoint.TableAddOptions#uniformCellProperties:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
-    // Set start time to 1:30 PM.
 
-    seriesTimeObject.setStartTime(13, 30);
+    // Specifies a table's borders.
 
-    // Set duration to 30 minutes.
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying border styles.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        uniformCellProperties: {
+          borders: {
+            left: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            right: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            top: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 },
+            bottom: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 }
+          }
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.TableAddOptions#values:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
-    seriesTimeObject.setDuration(30);
 
+    // Specifies a table's values.
 
-    const pattern: Office.Recurrence = {
-      seriesTime: seriesTimeObject,
-      recurrenceType: Office.MailboxEnums.RecurrenceType.Yearly,
-      recurrenceProperties: {
-        interval: 1,
-        dayOfWeek: Office.MailboxEnums.Days.Tue,
-        weekNumber: Office.MailboxEnums.WeekNumber.Second,
-        month: Office.MailboxEnums.Month.Sep
-      },
-      recurrenceTimeZone: { name: Office.MailboxEnums.RecurrenceTimeZone.PacificStandardTime }
-    };
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying cell values.
+      const shape = shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ]
+      });
+      await context.sync();
+    });
+PowerPoint.TableAddOptions#width:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    Office.context.mailbox.item.recurrence.setAsync(pattern, (asyncResult) => {
-      if (asyncResult.status !== Office.AsyncResultStatus.Succeeded) {
-        console.error(`Failed to set recurrence. Error: ${asyncResult.error.message}`);
-        return;
-      }
-      console.log(`Succeeded in setting recurrence pattern ${JSON.stringify(pattern)}`);
+    // Specifies the width and height of a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying the width and height.
+      shapes.addTable(3, 4, {
+        width: 600,
+        height: 400
+      });
+      await context.sync();
     });
-'Office.ReplyFormAttachment:interface':
+PowerPoint.TableCell:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    // The async version is only available starting with requirement set 1.9.
+    // Updates a table's values.
 
-    // It provides a callback when the new appointment form has been created.
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
 
-    Office.context.mailbox.item.displayReplyFormAsync(
-      {
-        htmlBody: "This is a reply with an inline image and an item attachment.<br><img src='/service/cid:dog.jpg'>",
-        attachments: [
-          { type: "file", url: "http://i.imgur.com/9S36xvA.jpg", name: "dog.jpg", inLine: true },
-          { type: "item", itemId: Office.context.mailbox.item.itemId, name: "test_email.msg" }
-        ]
-      },
-      (asyncResult) => {
-        console.log(JSON.stringify(asyncResult));
+      // Add a table (which is a type of Shape).
+      const shape = shapes.addTable(4, 3);
+      let table = shape.getTable();
+      table.load();
+      await context.sync();
+
+      // Update values in the table.
+      for (let rowIndex = 0; rowIndex < table.rowCount; rowIndex++) {
+        for (let columnIndex = 0; columnIndex < table.columnCount; columnIndex++) {
+          const cell = table.getCellOrNullObject(rowIndex, columnIndex);
+          cell.text = generateRandomString();
+        }
       }
-    );
-'Office.ReplyFormData:interface':
+
+      await context.sync();
+    });
+PowerPoint.TableCell#text:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/55-display-items/display-reply-with-attachments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    // The async version is only available starting with requirement set 1.9.
+    // Updates a table's values.
 
-    // It provides a callback when the new appointment form has been created.
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
 
-    Office.context.mailbox.item.displayReplyFormAsync(
-      {
-        htmlBody: "This is a reply with an inline image and an item attachment.<br><img src='/service/cid:dog.jpg'>",
-        attachments: [
-          { type: "file", url: "http://i.imgur.com/9S36xvA.jpg", name: "dog.jpg", inLine: true },
-          { type: "item", itemId: Office.context.mailbox.item.itemId, name: "test_email.msg" }
-        ]
-      },
-      (asyncResult) => {
-        console.log(JSON.stringify(asyncResult));
+      // Add a table (which is a type of Shape).
+      const shape = shapes.addTable(4, 3);
+      let table = shape.getTable();
+      table.load();
+      await context.sync();
+
+      // Update values in the table.
+      for (let rowIndex = 0; rowIndex < table.rowCount; rowIndex++) {
+        for (let columnIndex = 0; columnIndex < table.columnCount; columnIndex++) {
+          const cell = table.getCellOrNullObject(rowIndex, columnIndex);
+          cell.text = generateRandomString();
+        }
       }
-    );
-'Office.RoamingSettings#get:member(1)':
+
+      await context.sync();
+    });
+PowerPoint.TableCellBorders:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/10-roaming-settings/roaming-settings.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    const settingName = $("#settingName").val();
+    // Specifies a table's borders.
 
-    const settingValue = Office.context.roamingSettings.get(settingName);
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying border styles.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        uniformCellProperties: {
+          borders: {
+            left: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            right: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            top: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 },
+            bottom: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 }
+          }
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.TableCellBorders#bottom:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
-    $("#settingValue").val(settingValue);
 
-    console.log(`The value of setting "${settingName}" is "${settingValue}".`);
-'Office.RoamingSettings#saveAsync:member(1)':
+    // Specifies a table's borders.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying border styles.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        uniformCellProperties: {
+          borders: {
+            left: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            right: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            top: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 },
+            bottom: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 }
+          }
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.TableCellBorders#left:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/10-roaming-settings/roaming-settings.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    // Save settings in the mailbox to make it available in future sessions.
+    // Specifies a table's borders.
 
-    Office.context.roamingSettings.saveAsync(function(result) {
-      if (result.status !== Office.AsyncResultStatus.Succeeded) {
-        console.error(`Action failed with message ${result.error.message}`);
-      } else {
-        console.log(`Settings saved with status: ${result.status}`);
-      }
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying border styles.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        uniformCellProperties: {
+          borders: {
+            left: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            right: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            top: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 },
+            bottom: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 }
+          }
+        }
+      });
+      await context.sync();
     });
-'Office.RoamingSettings#set:member(1)':
+PowerPoint.TableCellBorders#right:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/10-roaming-settings/roaming-settings.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
 
+    // Specifies a table's borders.
 
-    const settingName = $("#settingName").val();
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying border styles.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        uniformCellProperties: {
+          borders: {
+            left: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            right: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            top: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 },
+            bottom: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 }
+          }
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.TableCellBorders#top:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
-    const settingValue = $("#settingValue").val();
 
-    Office.context.roamingSettings.set(settingName, settingValue);
+    // Specifies a table's borders.
 
-    console.log(`Setting "${settingName}" set to value "${settingValue}".`);
-'Office.SelectedItemDetails:interface':
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying border styles.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        uniformCellProperties: {
+          borders: {
+            left: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            right: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            top: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 },
+            bottom: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 }
+          }
+        }
+      });
+      await context.sync();
+    });
+PowerPoint.TableCellProperties:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-message-properties.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    // Retrieves the selected messages' properties and logs them to the console.
+    // Specifies the font formatting and fill colors of the cells in a table.
 
-    Office.context.mailbox.getSelectedItemsAsync((asyncResult) => {
-      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
-        console.log(asyncResult.error.message);
-        return;
-      }
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying font formatting and fill colors.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        specificCellProperties: [
+          [
+            { fill: { color: "red" }, font: { color: "yellow", name: "Calibri" } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", name: "Coolvetica" } },
+            { fill: { color: "red" }, font: { color: "yellow", italic: true } },
+            { fill: { color: "red" }, font: { color: "#9966cc", strikethrough: true } }
+          ],
+          [
+            { fill: { color: "#fbceb1" }, font: { color: "yellow", doubleStrikethrough: true } },
+            { fill: { color: "red" }, font: { color: "yellow", subscript: true } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", superscript: true } },
+            { fill: { color: "red" }, font: { color: "yellow" } }
+          ],
+          [
+            { fill: { color: "red" }, font: { color: "#b0bf1a" } },
+            { fill: { color: "#9966cc" }, font: { color: "yellow" } },
+            { fill: { color: "#b0bf1a" }, font: { color: "yellow" } },
+            { fill: { color: "red" }, font: { color: "#fbceb1" } }
+          ]
+        ]
+      });
+      await context.sync();
+    });
+PowerPoint.TableCellProperties#borders:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
-      asyncResult.value.forEach((message) => {
-        console.log(`Item ID: ${message.itemId}`);
-        console.log(`Conversation ID: ${message.conversationId}`);
-        console.log(`Internet message ID: ${message.internetMessageId}`);
-        console.log(`Subject: ${message.subject}`);
-        console.log(`Item type: ${message.itemType}`);
-        console.log(`Item mode: ${message.itemMode}`);
-        console.log(`Has attachment: ${message.hasAttachment}`);
+
+    // Specifies a table's borders.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying border styles.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        uniformCellProperties: {
+          borders: {
+            left: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            right: { color: "blue", dashStyle: PowerPoint.ShapeLineDashStyle.solid, weight: 4 },
+            top: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 },
+            bottom: { color: "red", dashStyle: PowerPoint.ShapeLineDashStyle.longDashDotDot, weight: 2 }
+          }
+        }
       });
+      await context.sync();
     });
-'Office.Sensitivity#getAsync:member(2)':
+PowerPoint.TableCellProperties#fill:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-sensitivity-level.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    Office.context.mailbox.item.sensitivity.getAsync(function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log("Sensitivity: " + asyncResult.value);
-      } else {
-        console.log("Failed to get sensitivity: " + JSON.stringify(asyncResult.error));
-      }
+    // Specifies the font formatting and fill colors of the cells in a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying font formatting and fill colors.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        specificCellProperties: [
+          [
+            { fill: { color: "red" }, font: { color: "yellow", name: "Calibri" } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", name: "Coolvetica" } },
+            { fill: { color: "red" }, font: { color: "yellow", italic: true } },
+            { fill: { color: "red" }, font: { color: "#9966cc", strikethrough: true } }
+          ],
+          [
+            { fill: { color: "#fbceb1" }, font: { color: "yellow", doubleStrikethrough: true } },
+            { fill: { color: "red" }, font: { color: "yellow", subscript: true } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", superscript: true } },
+            { fill: { color: "red" }, font: { color: "yellow" } }
+          ],
+          [
+            { fill: { color: "red" }, font: { color: "#b0bf1a" } },
+            { fill: { color: "#9966cc" }, font: { color: "yellow" } },
+            { fill: { color: "#b0bf1a" }, font: { color: "yellow" } },
+            { fill: { color: "red" }, font: { color: "#fbceb1" } }
+          ]
+        ]
+      });
+      await context.sync();
     });
-'Office.Sensitivity#setAsync:member(1)':
+PowerPoint.TableCellProperties#font:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-sensitivity-level.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    Office.context.mailbox.item.sensitivity.setAsync(
-      Office.MailboxEnums.AppointmentSensitivityType.Private,
-      function callback(asyncResult) {
-        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
-          console.log("Failed to set appointment sensitivity: " + JSON.stringify(asyncResult.error));
-        } else {
-          console.log("Successfully set appointment sensitivity.");
-        }
-      }
-    );
-'Office.SensitivityLabel#getAsync:member(2)':
+    // Specifies the font formatting and fill colors of the cells in a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying font formatting and fill colors.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        specificCellProperties: [
+          [
+            { fill: { color: "red" }, font: { color: "yellow", name: "Calibri" } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", name: "Coolvetica" } },
+            { fill: { color: "red" }, font: { color: "yellow", italic: true } },
+            { fill: { color: "red" }, font: { color: "#9966cc", strikethrough: true } }
+          ],
+          [
+            { fill: { color: "#fbceb1" }, font: { color: "yellow", doubleStrikethrough: true } },
+            { fill: { color: "red" }, font: { color: "yellow", subscript: true } },
+            { fill: { color: "#0048ba" }, font: { color: "yellow", superscript: true } },
+            { fill: { color: "red" }, font: { color: "yellow" } }
+          ],
+          [
+            { fill: { color: "red" }, font: { color: "#b0bf1a" } },
+            { fill: { color: "#9966cc" }, font: { color: "yellow" } },
+            { fill: { color: "#b0bf1a" }, font: { color: "yellow" } },
+            { fill: { color: "red" }, font: { color: "#fbceb1" } }
+          ]
+        ]
+      });
+      await context.sync();
+    });
+PowerPoint.TableCellProperties#horizontalAlignment:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/60-sensitivity-label/sensitivity-label.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    // This snippet gets the current mail item's sensitivity label.
+    // Specifies the horizontal and vertical alignments of the cells in a table.
 
-    Office.context.sensitivityLabelsCatalog.getIsEnabledAsync((asyncResult) => {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded && asyncResult.value == true) {
-        Office.context.mailbox.item.sensitivityLabel.getAsync((asyncResult) => {
-          if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-            console.log(asyncResult.value);
-          } else {
-            console.log("Action failed with error: " + asyncResult.error.message);
-          }
-        });
-      } else {
-        console.log("Action failed with error: " + asyncResult.error.message);
-      }
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying horizontal and vertical alignment.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        uniformCellProperties: {
+          horizontalAlignment: PowerPoint.ParagraphHorizontalAlignment.justify,
+          verticalAlignment: PowerPoint.TextVerticalAlignment.middle
+        }
+      });
+      await context.sync();
     });
-'Office.SensitivityLabel#setAsync:member(2)':
+PowerPoint.TableCellProperties#indentLevel:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/60-sensitivity-label/sensitivity-label.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    // This snippet sets the sensitivity label on the current mail item.
+    // Specifying the indents for a table.
 
-    Office.context.sensitivityLabelsCatalog.getIsEnabledAsync((asyncResult) => {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded && asyncResult.value == true) {
-        Office.context.sensitivityLabelsCatalog.getAsync((asyncResult) => {
-          if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-            const catalog = asyncResult.value;
-            if (catalog.length > 0) {
-              var id = catalog[0].id;
-              Office.context.mailbox.item.sensitivityLabel.setAsync(id, (asyncResult) => {
-                if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-                  console.log(asyncResult.status);
-                } else {
-                  console.log("Action failed with error: " + asyncResult.error.message);
-                }
-              });
-            }
-            else {
-              console.log("Catalog list is empty");
-            }
-          } else {
-            console.log("Action failed with error: " + asyncResult.error.message);
-          }
-        });
-      } else {
-        console.log("Action failed with error: " + asyncResult.error.message);
-      }
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying the indent level for cells.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        specificCellProperties: [
+          [{ indentLevel: 0 }, { indentLevel: 1 }, { indentLevel: 2 }, { indentLevel: 3 }],
+          [{ indentLevel: 0 }, { indentLevel: 1 }, { indentLevel: 2 }, { indentLevel: 3 }],
+          [{ indentLevel: 0 }, { indentLevel: 1 }, { indentLevel: 2 }, { indentLevel: 3 }]
+        ]
+      });
+      await context.sync();
     });
-'Office.SensitivityLabelsCatalog#getAsync:member(2)':
+PowerPoint.TableCellProperties#textRuns:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/60-sensitivity-label/sensitivity-labels-catalog.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    // This snippet gets all available sensitivity labels from the catalog.
+    // Specifies the text runs of the cells in a table.
 
-    Office.context.sensitivityLabelsCatalog.getIsEnabledAsync((asyncResult) => {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded && asyncResult.value == true) {
-        Office.context.sensitivityLabelsCatalog.getAsync((asyncResult) => {
-          if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-            const catalog = asyncResult.value;
-            console.log("Sensitivity Labels Catalog:");
-            console.log(JSON.stringify(catalog));
-          } else {
-            console.log("Action failed with error: " + asyncResult.error.message);
-          }
-        });
-      } else {
-        console.log("Action failed with error: " + asyncResult.error.message);
-      }
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying text runs.
+      shapes.addTable(3, 4, {
+        specificCellProperties: [
+          [
+            { text: "Title text", font: { bold: true } },
+            { text: "Title text", font: { bold: true } },
+            { text: "Title text", font: { bold: true } },
+            { text: "Title text", font: { bold: true } }
+          ],
+          [
+            { text: "Bold text", font: { bold: true } },
+            {
+              textRuns: [
+                { text: "Text runs with " },
+                { text: "Underlined text", font: { underline: PowerPoint.ShapeFontUnderlineStyle.double } },
+                { text: " and plain text" }
+              ]
+            },
+            { text: "Italicized text", font: { italic: true } },
+            { text: "Plain text" }
+          ],
+          [
+            { text: "Bold text", font: { bold: true } },
+            { text: "Underlined text", font: { underline: PowerPoint.ShapeFontUnderlineStyle.dotted } },
+            {
+              font: { bold: true },
+              textRuns: [
+                { text: "Text runs with " },
+                { text: "italicized text", font: { italic: true } },
+                { text: " and (inherited) bold text" }
+              ]
+            },
+            { text: "Italicized text", font: { italic: true } }
+          ]
+        ]
+      });
+      await context.sync();
     });
-'Office.SensitivityLabelsCatalog#getIsEnabledAsync:member(2)':
+PowerPoint.TableCellProperties#verticalAlignment:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/60-sensitivity-label/sensitivity-labels-catalog.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    // This snippet determines if the sensitivity labels catalog is enabled on
-    the current mailbox.
+    // Specifies the horizontal and vertical alignments of the cells in a table.
 
-    Office.context.sensitivityLabelsCatalog.getIsEnabledAsync((asyncResult) => {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log(asyncResult.value);
-      } else {
-        console.log("Action failed with error: " + asyncResult.error.message);
-      }
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying horizontal and vertical alignment.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "GGG", "HHHH"],
+          ["1", "12", "123", "1234"]
+        ],
+        uniformCellProperties: {
+          horizontalAlignment: PowerPoint.ParagraphHorizontalAlignment.justify,
+          verticalAlignment: PowerPoint.TextVerticalAlignment.middle
+        }
+      });
+      await context.sync();
     });
-'Office.SessionData#clearAsync:member(1)':
+PowerPoint.TableColumnProperties:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/session-data-apis.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    Office.context.mailbox.item.sessionData.clearAsync(function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log("sessionData.clearAsync succeeded");
-      } else {
-        console.log("Failed to clear sessionData. Error: " + JSON.stringify(asyncResult.error));
-      }
+    // Specifies the column widths and row heights of a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying column widths and row heights.
+      shapes.addTable(3, 4, {
+        columns: [{ columnWidth: 100 }, { columnWidth: 200 }, { columnWidth: 100 }, { columnWidth: 200 }],
+        rows: [{ rowHeight: 60 }, { rowHeight: 120 }, { rowHeight: 180 }]
+      });
+      await context.sync();
     });
-'Office.SessionData#getAllAsync:member(1)':
+PowerPoint.TableColumnProperties#columnWidth:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/session-data-apis.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
+
+
+    // Specifies the column widths and row heights of a table.
 
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
 
-    Office.context.mailbox.item.sessionData.getAllAsync(function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log("The sessionData is " + JSON.stringify(asyncResult.value));
-      } else {
-        console.log("Failed to get all sessionData. Error: " + JSON.stringify(asyncResult.error));
-      }
+      // Add a table, specifying column widths and row heights.
+      shapes.addTable(3, 4, {
+        columns: [{ columnWidth: 100 }, { columnWidth: 200 }, { columnWidth: 100 }, { columnWidth: 200 }],
+        rows: [{ rowHeight: 60 }, { rowHeight: 120 }, { rowHeight: 180 }]
+      });
+      await context.sync();
     });
-'Office.SessionData#getAsync:member(1)':
+PowerPoint.TableMergedAreaProperties:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/session-data-apis.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    Office.context.mailbox.item.sessionData.getAsync(
-      "Date",
-      function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log("The sessionData value is " + JSON.stringify(asyncResult.value));
-      } else {
-        console.log("Failed to get sessionData. Error: " + JSON.stringify(asyncResult.error));
-      }
+    // Specifies the merge areas of a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying one 2x2 merged area.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "", "HHHH"],
+          ["1", "", "", "1234"]
+        ],
+        mergedAreas: [{ rowIndex: 1, columnIndex: 1, rowCount: 2, columnCount: 2 }]
+      });
+      await context.sync();
     });
-'Office.SessionData#removeAsync:member(1)':
+PowerPoint.TableMergedAreaProperties#columnCount:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/session-data-apis.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    Office.context.mailbox.item.sessionData.removeAsync(
-      "Date",
-      function callback(asyncResult) {
-        if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-          console.log("sessionData.removeAsync succeeded");
-        } else {
-          console.log("Failed to remove sessionData. Error: " + JSON.stringify(asyncResult.error));
-        }
-      }
-    );
-'Office.SessionData#setAsync:member(1)':
+    // Specifies the merge areas of a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying one 2x2 merged area.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "", "HHHH"],
+          ["1", "", "", "1234"]
+        ],
+        mergedAreas: [{ rowIndex: 1, columnIndex: 1, rowCount: 2, columnCount: 2 }]
+      });
+      await context.sync();
+    });
+PowerPoint.TableMergedAreaProperties#columnIndex:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/session-data-apis.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    Office.context.mailbox.item.sessionData.setAsync(
-      "Date",
-      "7/24/2020",
-      function(asyncResult) {
-      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
-        console.log("sessionData.setAsync succeeded");
-      } else {
-        console.log("Failed to set sessionData. Error: " + JSON.stringify(asyncResult.error));
-      }
+    // Specifies the merge areas of a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying one 2x2 merged area.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "", "HHHH"],
+          ["1", "", "", "1234"]
+        ],
+        mergedAreas: [{ rowIndex: 1, columnIndex: 1, rowCount: 2, columnCount: 2 }]
+      });
+      await context.sync();
     });
-'Office.SharedProperties:interface':
+PowerPoint.TableMergedAreaProperties#rowCount:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/65-delegates-and-shared-folders/get-shared-properties.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    Office.context.mailbox.item.getSharedPropertiesAsync((result) => {
-      if (result.status === Office.AsyncResultStatus.Failed) {
-        console.error("The current folder or mailbox isn't shared.");
-        return;
-      }
-      const sharedProperties = result.value;
-      console.log(`Owner: ${sharedProperties.owner}`);
-      console.log(`Permissions: ${sharedProperties.delegatePermissions}`);
-      console.log(`Target mailbox: ${sharedProperties.targetMailbox}`);
+    // Specifies the merge areas of a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying one 2x2 merged area.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "", "HHHH"],
+          ["1", "", "", "1234"]
+        ],
+        mergedAreas: [{ rowIndex: 1, columnIndex: 1, rowCount: 2, columnCount: 2 }]
+      });
+      await context.sync();
     });
-'Office.Time#getAsync:member(2)':
+PowerPoint.TableMergedAreaProperties#rowIndex:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-start-appointment-organizer.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    Office.context.mailbox.item.start.getAsync((result) => {
-      if (result.status !== Office.AsyncResultStatus.Succeeded) {
-        console.error(`Action failed with message ${result.error.message}`);
-        return;
-      }
-      console.log(`Appointment starts: ${result.value}`);
+    // Specifies the merge areas of a table.
+
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying one 2x2 merged area.
+      shapes.addTable(3, 4, {
+        values: [
+          ["A", "BB", "CCC", "DDDD"],
+          ["E", "FF", "", "HHHH"],
+          ["1", "", "", "1234"]
+        ],
+        mergedAreas: [{ rowIndex: 1, columnIndex: 1, rowCount: 2, columnCount: 2 }]
+      });
+      await context.sync();
     });
-'Office.Time#setAsync:member(1)':
+PowerPoint.TableRowProperties:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-start-appointment-organizer.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    const start = new Date(); // Represents current date and time.
+    // Specifies the column widths and row heights of a table.
 
-    start.setDate(start.getDate() + 2); // Add 2 days to current date.
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
 
-    Office.context.mailbox.item.start.setAsync(start, (result) => {
-      if (result.status !== Office.AsyncResultStatus.Succeeded) {
-        console.error(`Action failed with message ${result.error.message}`);
-        return;
-      }
-      console.log(`Successfully set start date and time to ${start}`);
+      // Add a table, specifying column widths and row heights.
+      shapes.addTable(3, 4, {
+        columns: [{ columnWidth: 100 }, { columnWidth: 200 }, { columnWidth: 100 }, { columnWidth: 200 }],
+        rows: [{ rowHeight: 60 }, { rowHeight: 120 }, { rowHeight: 180 }]
+      });
+      await context.sync();
     });
+PowerPoint.TableRowProperties#rowHeight:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-end-appointment-organizer.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    Office.context.mailbox.item.start.getAsync((result) => {
-      if (result.status !== Office.AsyncResultStatus.Succeeded) {
-        console.error(`Get start date failed with message ${result.error.message}`);
-        return;
-      }
+    // Specifies the column widths and row heights of a table.
 
-      const end = result.value; // Set end to current start date and time.
-      end.setDate(end.getDate() + 1); // Set end as 1 day later than start date.
-      Office.context.mailbox.item.end.setAsync(end, (result) => {
-        if (result.status !== Office.AsyncResultStatus.Succeeded) {
-          console.error(`Set end date failed with message ${result.error.message}`);
-          return;
-        }
-        console.log(`Successfully set end date and time to ${end}`);
+    await PowerPoint.run(async (context) => {
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying column widths and row heights.
+      shapes.addTable(3, 4, {
+        columns: [{ columnWidth: 100 }, { columnWidth: 200 }, { columnWidth: 100 }, { columnWidth: 200 }],
+        rows: [{ rowHeight: 60 }, { rowHeight: 120 }, { rowHeight: 180 }]
       });
+      await context.sync();
     });
-'PowerPoint.AddSlideOptions:interface':
+PowerPoint.Tag:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/tags/tags.yaml
 
 
-    const chosenMaster = $("#master-id").val() as string;
+    await PowerPoint.run(async function (context) {
+      let presentationTags: PowerPoint.TagCollection = context.presentation.tags;
+      presentationTags.add("COLOR", "blue");
 
-    const chosenLayout = $("#layout-id").val() as string;
+      await context.sync();
 
+      const tag: PowerPoint.Tag = presentationTags.getItem("COLOR");
+      tag.load("key, value");
 
-    await PowerPoint.run(async function(context) {
-      // Create a new slide using an existing master slide and layout.
-      const newSlideOptions: PowerPoint.AddSlideOptions = {
-        slideMasterId: chosenMaster, /* An ID from `Presentation.slideMasters`. */
-        layoutId: chosenLayout /* An ID from `SlideMaster.layouts`. */
-      };
-      context.presentation.slides.add(newSlideOptions);
       await context.sync();
+
+      console.log("Added key " + JSON.stringify(tag.key) + " with value " + JSON.stringify(tag.value));
     });
-'PowerPoint.ConnectorType:enum':
+PowerPoint.TagCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/tags/tags.yaml
 
-    // This function gets the collection of shapes on the first slide,
 
-    // and adds a line to the collection, while specifying its
+    await PowerPoint.run(async function(context) {
+      let selectedSlideIndex = await getSelectedSlideIndex();
 
-    // start and end points. Then it names the shape.
+      // Decrement because the getSelectedSlideByIndex method is 1-based,
+      // but the getItemAt method is 0-based.
+      selectedSlideIndex = selectedSlideIndex - 1;
+      const slide: PowerPoint.Slide = context.presentation.slides.getItemAt(selectedSlideIndex);
+      slide.tags.add("CUSTOMER_TYPE", "Premium");
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      await context.sync();
 
-      // For a line, left and top are the coordinates of the start point,
-      // while height and width are the coordinates of the end point.
-      const line: PowerPoint.Shape = shapes.addLine(PowerPoint.ConnectorType.straight, 
-          { 
-            left: 400, 
-            top: 200, 
-            height: 20, 
-            width: 150 
-          });
-      line.name = "StraightLine";
+      const audienceTag: PowerPoint.Tag = slide.tags.getItem("CUSTOMER_TYPE");
+      audienceTag.load("key, value");
 
       await context.sync();
+
+      console.log("Added key " + JSON.stringify(audienceTag.key) + " with value " + JSON.stringify(audienceTag.value));
     });
-'PowerPoint.GeometricShapeType:enum':
+PowerPoint.TagCollection#add:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/tags/tags.yaml
 
-    // This function gets the collection of shapes on the first slide,
 
-    // and adds a hexagon shape to the collection, while specifying its
+    await PowerPoint.run(async function(context) {
+      const slide: PowerPoint.Slide = context.presentation.slides.getItemAt(0);
+      slide.tags.add("OCEAN", "Indian");
+      slide.tags.add("PLANET", "Jupiter");
+      slide.tags.add("CONTINENT", "Antarctica");
 
-    // location and size. Then it names the shape.
+      await context.sync();
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-      const shapeOptions: PowerPoint.ShapeAddOptions = {
-        left: 100,
-        top: 100,
-        height: 150,
-        width: 150
-      };
-      const hexagon: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.hexagon, shapeOptions);
-      hexagon.name = "Hexagon";
+      slide.tags.load("key, value");
 
       await context.sync();
+
+      for (let i = 0; i < slide.tags.items.length; i++) {
+        console.log("Added key " + JSON.stringify(slide.tags.items[i].key) + " with value " +        JSON.stringify(slide.tags.items[i].value));
+      }
     });
-'PowerPoint.Hyperlink:class':
+PowerPoint.TagCollection#delete:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/hyperlinks/manage-hyperlinks.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/tags/tags.yaml
 
 
-    // Gets the hyperlinks found in the first selected slide.
+    await PowerPoint.run(async function (context) {
+      let presentationTags: PowerPoint.TagCollection = context.presentation.tags;
+
+      presentationTags.delete("COLOR");
 
-    await PowerPoint.run(async (context) => {
-      const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
-      const hyperlinks: PowerPoint.HyperlinkCollection = slide.hyperlinks.load("address,screenTip");
-      const hyperlinksCount = hyperlinks.getCount();
       await context.sync();
 
-      console.log(`${hyperlinksCount.value} hyperlinks found in first selected slide:`);
-      for (let link of hyperlinks.items) {
-        console.log(`Address: "${link.address}" (Screen tip: "${link.screenTip}")`);
-      }
+      console.log(JSON.stringify(presentationTags));
     });
-'PowerPoint.HyperlinkCollection:class':
+PowerPoint.TagCollection#getItem:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/hyperlinks/manage-hyperlinks.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/tags/tags.yaml
 
 
-    // Gets the hyperlinks found in the first selected slide.
+    await PowerPoint.run(async function(context) {
+      let selectedSlideIndex = await getSelectedSlideIndex();
+
+      // Decrement because the getSelectedSlideByIndex method is 1-based,
+      // but the getItemAt method is 0-based.
+      selectedSlideIndex = selectedSlideIndex - 1;
+      const slide: PowerPoint.Slide = context.presentation.slides.getItemAt(selectedSlideIndex);
+      slide.tags.add("CUSTOMER_TYPE", "Premium");
 
-    await PowerPoint.run(async (context) => {
-      const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
-      const hyperlinks: PowerPoint.HyperlinkCollection = slide.hyperlinks.load("address,screenTip");
-      const hyperlinksCount = hyperlinks.getCount();
       await context.sync();
 
-      console.log(`${hyperlinksCount.value} hyperlinks found in first selected slide:`);
-      for (let link of hyperlinks.items) {
-        console.log(`Address: "${link.address}" (Screen tip: "${link.screenTip}")`);
-      }
+      const audienceTag: PowerPoint.Tag = slide.tags.getItem("CUSTOMER_TYPE");
+      audienceTag.load("key, value");
+
+      await context.sync();
+
+      console.log("Added key " + JSON.stringify(audienceTag.key) + " with value " + JSON.stringify(audienceTag.value));
     });
-'PowerPoint.InsertSlideFormatting:enum':
+PowerPoint.TextFrame:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/insert-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
 
 
-    await PowerPoint.run(async function(context) {
-        // Get the ID of the first selected slide.
-        const presentation: PowerPoint.Presentation = context.presentation;
-        const selected: PowerPoint.Slide = presentation.getSelectedSlides().getItemAt(0);
-        selected.load("id");
-        await context.sync();
+    // Selects the first 10 characters of the selected shape.
 
-        // Insert the other presentation after the selected slide.
-        const insertOptions: PowerPoint.InsertSlideOptions = {
-            formatting: PowerPoint.InsertSlideFormatting.useDestinationTheme,
-            targetSlideId: selected.id
-        };
-        presentation.insertSlidesFromBase64(chosenFileBase64, insertOptions);
-        await context.sync();
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
+      const shapeCount = shapes.getCount();
+      await context.sync();
+      if (shapeCount.value !== 1) {
+        console.warn("You must select only one shape with text in it.");
+        return;
+      }
+      const shape: PowerPoint.Shape = shapes.getItemAt(0);
+      const textFrame: PowerPoint.TextFrame = shape.textFrame.load("textRange,hasText");
+      await context.sync();
+      if (textFrame.hasText != true) {
+        console.warn("You must select only one shape with text in it.");
+        return;
+      }
+      const textRange: PowerPoint.TextRange = textFrame.textRange;
+      textRange.load("text");
+      await context.sync();
+      if (textRange.text.length < 10) {
+        console.warn("You must select only one shape with at least 10 characters in it.");
+        return;
+      }
+      const textRange10 = textRange.getSubstring(0, 10);
+      textRange10.setSelected();
+      await context.sync();
     });
-'PowerPoint.InsertSlideOptions:interface':
+PowerPoint.TextFrame#autoSizeSetting:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/insert-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
 
 
-    await PowerPoint.run(async function(context) {
-        // Get the ID of the first selected slide.
-        const presentation: PowerPoint.Presentation = context.presentation;
-        const selected: PowerPoint.Slide = presentation.getSelectedSlides().getItemAt(0);
-        selected.load("id");
-        await context.sync();
+    // This function gets the collection of shapes on the first slide,
 
-        // Insert the other presentation after the selected slide.
-        const insertOptions: PowerPoint.InsertSlideOptions = {
-            formatting: PowerPoint.InsertSlideFormatting.useDestinationTheme,
-            targetSlideId: selected.id
-        };
-        presentation.insertSlidesFromBase64(chosenFileBase64, insertOptions);
-        await context.sync();
+    // and adds a brace pair, {}, to the collection, while specifying its
+
+    // location and size. Then it names the shape, sets its text and font
+
+    // color, and centers it inside the braces.
+
+    await PowerPoint.run(async (context) => {
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      const braces: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.bracePair, {
+        left: 100,
+        top: 400,
+        height: 50,
+        width: 150,
+      });
+      braces.name = "Braces";
+      braces.textFrame.textRange.text = "Shape text";
+      braces.textFrame.textRange.font.color = "purple";
+      braces.textFrame.textRange.font.underline = PowerPoint.ShapeFontUnderlineStyle.heavy;
+      braces.textFrame.verticalAlignment = PowerPoint.TextVerticalAlignment.middleCentered;
+      braces.textFrame.autoSizeSetting = PowerPoint.ShapeAutoSize.autoSizeShapeToFitText;
+
+      return context.sync();
     });
-'PowerPoint.Presentation:class':
+PowerPoint.TextRange:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/insert-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
 
 
-    await PowerPoint.run(async function(context) {
-        // Get the ID of the first selected slide.
-        const presentation: PowerPoint.Presentation = context.presentation;
-        const selected: PowerPoint.Slide = presentation.getSelectedSlides().getItemAt(0);
-        selected.load("id");
-        await context.sync();
+    // Sets the color of the selected text range to green.
 
-        // Insert the other presentation after the selected slide.
-        const insertOptions: PowerPoint.InsertSlideOptions = {
-            formatting: PowerPoint.InsertSlideFormatting.useDestinationTheme,
-            targetSlideId: selected.id
-        };
-        presentation.insertSlidesFromBase64(chosenFileBase64, insertOptions);
-        await context.sync();
+    await PowerPoint.run(async (context) => {
+      const textRange: PowerPoint.TextRange = context.presentation.getSelectedTextRange();
+      textRange.font.color = "green";
+      await context.sync();
     });
-'PowerPoint.Presentation#getSelectedShapes:member(1)':
+PowerPoint.TextRange#setSelected:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
 
 
-    // Arranges the selected shapes in a line from left to right.
+    // Selects the first 10 characters of the selected shape.
 
     await PowerPoint.run(async (context) => {
       const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
       const shapeCount = shapes.getCount();
-      shapes.load("items");
       await context.sync();
-      let maxHeight = 0;
-      shapes.items.map((shape) => {
-        shape.load("width,height");
-      });
+      if (shapeCount.value !== 1) {
+        console.warn("You must select only one shape with text in it.");
+        return;
+      }
+      const shape: PowerPoint.Shape = shapes.getItemAt(0);
+      const textFrame: PowerPoint.TextFrame = shape.textFrame.load("textRange,hasText");
       await context.sync();
-      shapes.items.map((shape) => {
-        shape.left = currentLeft;
-        shape.top = currentTop;
-        currentLeft += shape.width;
-        if (shape.height > maxHeight) maxHeight = shape.height;
-      });
+      if (textFrame.hasText != true) {
+        console.warn("You must select only one shape with text in it.");
+        return;
+      }
+      const textRange: PowerPoint.TextRange = textFrame.textRange;
+      textRange.load("text");
+      await context.sync();
+      if (textRange.text.length < 10) {
+        console.warn("You must select only one shape with at least 10 characters in it.");
+        return;
+      }
+      const textRange10 = textRange.getSubstring(0, 10);
+      textRange10.setSelected();
       await context.sync();
-      currentLeft = 0;
-      if (currentTop > slideHeight - 200) currentTop = 0;
     });
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
 
 
-    // Gets the shapes you selected on the slide and displays their IDs on the
-    task pane.
+    // Sets the range selection to the range that was saved previously.
 
     await PowerPoint.run(async (context) => {
-      let finalTable = "";
-      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
-      const shapeCount = shapes.getCount();
-      await context.sync();
-      finalTable += "<br>getSelectedShapes.getCount returned:<b>" + shapeCount.value + "</b><br>";
-      finalTable +=
-        "<br><table border=1 cellpadding=3 cellspacing=0><tr><td bgcolor=#3333EE><font color=white>Index</font></td><td bgcolor=#3333EE><font color=white>Id</font></td></tr>";
-      shapes.load("items");
+      const slide1: PowerPoint.Slide = context.presentation.slides.getItem(savedTextSlideSelection[0]);
+      const shape1: PowerPoint.Shape = slide1.shapes.getItem(savedTextShapeSelection[0]);
+      const textRange: PowerPoint.TextRange = shape1.textFrame.textRange.getSubstring(
+        savedTextTextRangeStart,
+        savedTextTextRangeLength,
+      );
+      textRange.setSelected();
       await context.sync();
-      shapes.items.map((shape, index) => {
-        finalTable += "<tr><td>" + index + "</td><td>" + shape.id + "</td></tr>";
-      });
-      finalTable += "</table>";
-      $("#outputSpan").empty();
-      $("#outputSpan").append(finalTable);
     });
+PowerPoint.TextRange#font:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
 
 
-    // Saves which shapes are selected so that they can be reselected later.
+    // Sets the color of the selected text range to green.
 
     await PowerPoint.run(async (context) => {
-      context.presentation.load("slides");
-      await context.sync();
-      const slides: PowerPoint.SlideScopedCollection = context.presentation.getSelectedSlides();
-      const slideCount = slides.getCount();
-      slides.load("items");
-      await context.sync();
-      savedSlideSelection = [];
-      slides.items.map((slide) => {
-        savedSlideSelection.push(slide.id);
-      });
-      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
-      const shapeCount = shapes.getCount();
-      shapes.load("items");
+      const textRange: PowerPoint.TextRange = context.presentation.getSelectedTextRange();
+      textRange.font.color = "green";
       await context.sync();
-      shapes.items.map((shape) => {
-        savedShapeSelection.push(shape.id);
-      });
     });
-'PowerPoint.Presentation#getSelectedSlides:member(1)':
+PowerPoint.TextRange#paragraphFormat:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-set-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
 
 
-    // Gets the selected slides and displays their IDs on the task pane.
+    // Gets navigational (complex) properties of the selected text range.
 
     await PowerPoint.run(async (context) => {
-      let finalTable = "";
-      context.presentation.load("slides");
-      await context.sync();
-      const allSlidesList = {};
-      const allSlidesCount = context.presentation.slides.getCount();
-      context.presentation.slides.load("items");
+      const textRange: PowerPoint.TextRange = context.presentation.getSelectedTextRange();
+      textRange.load("font,paragraphFormat/bulletFormat,paragraphFormat/horizontalAlignment");
       await context.sync();
-      let allSlideItems: PowerPoint.Slide[] = context.presentation.slides.items;
-      allSlideItems.map((slide, index) => {
-        allSlidesList[slide.id] = `Slide ${index + 1}`;
-      });
 
-      if ($("#id-check-usenative").is(":checked")) {
-        context.presentation.load("tags");
-      }
-      const slides: PowerPoint.SlideScopedCollection = context.presentation.getSelectedSlides();
-      const slideCount = slides.getCount();
-      slides.load("items");
-      await context.sync();
-      finalTable += "<br>getSelectedSlides.getCount returned:<b>" + slideCount.value + "</b><br>";
-      finalTable +=
-        "<br><table border=1 cellpadding=3 cellspacing=0><tr><td bgcolor=#3333EE><font color=white>Index</font></td><td bgcolor=#3333EE><font color=white>Id</font></td></tr>";
-      slides.items.map((slide, index) => {
-        finalTable += "<tr><td>" + index + " - " + allSlidesList[slide.id] + "</td><td>" + slide.id + "</td></tr>";
-      });
-      finalTable += "</table>";
-      $("#outputSpan").empty();
-      $("#outputSpan").append(finalTable);
+      console.log("Font properties of selected text range:");
+      console.log(`\tallCaps: ${textRange.font.allCaps}`);
+      console.log(`\tbold: ${textRange.font.bold}`);
+      console.log(`\tcolor: ${textRange.font.color}`);
+      console.log(`\tdoubleStrikethrough: ${textRange.font.doubleStrikethrough}`);
+      console.log(`\titalic: ${textRange.font.italic}`);
+      console.log(`\tname: ${textRange.font.name}`);
+      console.log(`\tsize: ${textRange.font.size}`);
+      console.log(`\tsmallCaps: ${textRange.font.smallCaps}`);
+      console.log(`\tstrikethrough: ${textRange.font.strikethrough}`);
+      console.log(`\tsubscript: ${textRange.font.subscript}`);
+      console.log(`\tsuperscript: ${textRange.font.superscript}`);
+      console.log(`\tunderline: ${textRange.font.underline}`);
+
+      console.log("Paragraph format properties of selected text range:");
+      console.log(`\tbulletFormat.visible: ${textRange.paragraphFormat.bulletFormat.visible}`);
+      console.log(`\thorizontalAlignment: ${textRange.paragraphFormat.horizontalAlignment}`);
     });
+PowerPoint.TextRun:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-set-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml
 
 
-    // Saves which slides are currently selected so they can be reselected
-    later.
+    // Specifies the text runs of the cells in a table.
 
     await PowerPoint.run(async (context) => {
-      let finalTable = "";
-      context.presentation.load("slides");
-      await context.sync();
-      const slides: PowerPoint.SlideScopedCollection = context.presentation.getSelectedSlides();
-      const slideCount = slides.getCount();
-      await context.sync();
-      finalTable += "<br>getSelectedSlides.getCount returned:<b>" + slideCount.value + "</b><br>";
-      finalTable +=
-        "<br><table border=1 cellpadding=3 cellspacing=0><tr><td bgcolor=#3333EE><font color=white>Index</font></td><td bgcolor=#3333EE><font color=white>Id</font></td></tr>";
-      savedSlideSelection = [];
-      slides.load("items");
-      await context.sync();
-      slides.items.map((slide, index) => {
-        finalTable += "<tr><td>" + index + "</td><td>" + slide.id + "</td></tr>";
-        savedSlideSelection.push(slide.id);
+      const shapes = context.presentation.getSelectedSlides().getItemAt(0).shapes;
+
+      // Add a table, specifying text runs.
+      shapes.addTable(3, 4, {
+        specificCellProperties: [
+          [
+            { text: "Title text", font: { bold: true } },
+            { text: "Title text", font: { bold: true } },
+            { text: "Title text", font: { bold: true } },
+            { text: "Title text", font: { bold: true } }
+          ],
+          [
+            { text: "Bold text", font: { bold: true } },
+            {
+              textRuns: [
+                { text: "Text runs with " },
+                { text: "Underlined text", font: { underline: PowerPoint.ShapeFontUnderlineStyle.double } },
+                { text: " and plain text" }
+              ]
+            },
+            { text: "Italicized text", font: { italic: true } },
+            { text: "Plain text" }
+          ],
+          [
+            { text: "Bold text", font: { bold: true } },
+            { text: "Underlined text", font: { underline: PowerPoint.ShapeFontUnderlineStyle.dotted } },
+            {
+              font: { bold: true },
+              textRuns: [
+                { text: "Text runs with " },
+                { text: "italicized text", font: { italic: true } },
+                { text: " and (inherited) bold text" }
+              ]
+            },
+            { text: "Italicized text", font: { italic: true } }
+          ]
+        ]
       });
-      finalTable += "</table>";
-      $("#outputSpan").empty();
-      $("#outputSpan").append(finalTable);
+      await context.sync();
     });
-'PowerPoint.Presentation#getSelectedTextRange:member(1)':
+PowerPoint.TextVerticalAlignment:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
 
 
-    // Gets the selected text range and prints data about the range on the task
-    pane.
+    // This function gets the collection of shapes on the first slide,
+
+    // and adds a brace pair, {}, to the collection, while specifying its
+
+    // location and size. Then it names the shape, sets its text and font
+
+    // color, and centers it inside the braces.
 
     await PowerPoint.run(async (context) => {
-      const textRange: PowerPoint.TextRange = context.presentation.getSelectedTextRange();
-      try {
-        await context.sync();
-      } catch (error) {
-        console.warn("You must select only one range of text for this action to work.");
-        return;
-      }
-      textRange.load("text");
-      textRange.load("start");
-      textRange.load("length");
-      await context.sync();
-      let txtHtml = textRange.text;
-      txtHtml = txtHtml.replace(/\n/g, "<br>");
-      txtHtml = txtHtml.replace(/\r/g, "<br>");
-      txtHtml = txtHtml.replace(/\v/g, "<br>");
-      let txtExplained = textRange.text;
-      txtExplained = txtExplained.replace(/\n/g, "<font color=red>NL</font>");
-      txtExplained = txtExplained.replace(/\r/g, "<font color=red>CR</font>");
-      txtExplained = txtExplained.replace(/\v/g, "<font color=red>VV</font>");
-      let finalTable = "";
-      finalTable +=
-        "<br><table border=1 cellpadding=3 cellspacing=0><tr><td bgcolor=#3333EE><font color=white>Index</font></td><td bgcolor=#3333EE><font color=white>Id</font></td></tr>";
-      finalTable += "<tr><td>Raw</td><td>" + textRange.text + "</td></tr>";
-      finalTable += "<tr><td>Html</td><td>" + txtHtml + "</td></tr>";
-      finalTable += "<tr><td>Exp</td><td>" + txtExplained + "</td></tr>";
-      finalTable += "<tr><td>Start</td><td>" + textRange.start + "</td></tr>";
-      finalTable += "<tr><td>Length</td><td>" + textRange.length + "</td></tr>";
-      finalTable += "</table>";
-      $("#outputSpan").empty();
-      $("#outputSpan").append(finalTable);
+      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
+      const braces: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.bracePair, {
+        left: 100,
+        top: 400,
+        height: 50,
+        width: 150,
+      });
+      braces.name = "Braces";
+      braces.textFrame.textRange.text = "Shape text";
+      braces.textFrame.textRange.font.color = "purple";
+      braces.textFrame.textRange.font.underline = PowerPoint.ShapeFontUnderlineStyle.heavy;
+      braces.textFrame.verticalAlignment = PowerPoint.TextVerticalAlignment.middleCentered;
+      braces.textFrame.autoSizeSetting = PowerPoint.ShapeAutoSize.autoSizeShapeToFitText;
+
+      return context.sync();
     });
+Word.Alignment:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/paragraph-properties.yaml
+
+
+    await Word.run(async (context) => {
+      const body: Word.Body = context.document.body;
+      body.clear();
+      body.insertParagraph(
+        "Do you want to create a solution that extends the functionality of Word? You can use the Office Add-ins platform to extend Word clients running on the web, on a Windows desktop, or on a Mac.",
+        "Start"
+      );
+      body.paragraphs
+        .getLast()
+        .insertText(
+          "Use add-in commands to extend the Word UI and launch task panes that run JavaScript that interacts with the content in a Word document. Any code that you can run in a browser can run in a Word add-in. Add-ins that interact with content in a Word document create requests to act on Word objects and synchronize object state.",
+          "Replace"
+        );
+      body.paragraphs.getFirst().alignment = "Left";
+      body.paragraphs.getLast().alignment = Word.Alignment.left;
+    });
+Word.Annotation:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+
 
+    // Accepts the first annotation found in the selected paragraph.
 
-    // Sets the range selection to the range that was saved previously.
+    await Word.run(async (context) => {
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
+      annotations.load("id,state,critiqueAnnotation");
 
-    await PowerPoint.run(async (context) => {
-      const slide1: PowerPoint.Slide = context.presentation.slides.getItem(savedTextSlideSelection[0]);
-      const shape1: PowerPoint.Shape = slide1.shapes.getItem(savedTextShapeSelection[0]);
-      const textRange: PowerPoint.TextRange = shape1.textFrame.textRange.getSubstring(savedTextTextRangeStart, savedTextTextRangeLength);
-      textRange.setSelected();
       await context.sync();
-    });
-'PowerPoint.Presentation#insertSlidesFromBase64:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/insert-slides.yaml
 
+      for (let i = 0; i < annotations.items.length; i++) {
+        const annotation: Word.Annotation = annotations.items[i];
 
-    await PowerPoint.run(async function(context) {
-        // Get the ID of the first selected slide.
-        const presentation: PowerPoint.Presentation = context.presentation;
-        const selected: PowerPoint.Slide = presentation.getSelectedSlides().getItemAt(0);
-        selected.load("id");
-        await context.sync();
+        if (annotation.state === Word.AnnotationState.created) {
+          console.log(`Accepting ID ${annotation.id}...`);
+          annotation.critiqueAnnotation.accept();
 
-        // Insert the other presentation after the selected slide.
-        const insertOptions: PowerPoint.InsertSlideOptions = {
-            formatting: PowerPoint.InsertSlideFormatting.useDestinationTheme,
-            targetSlideId: selected.id
-        };
-        presentation.insertSlidesFromBase64(chosenFileBase64, insertOptions);
-        await context.sync();
+          await context.sync();
+          break;
+        }
+      }
     });
-'PowerPoint.Presentation#setSelectedSlides:member(1)':
+Word.Annotation#delete:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-set-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Sets selection to the slides that were saved.
+    // Deletes all annotations found in the selected paragraph.
+
+    await Word.run(async (context) => {
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
+      annotations.load("id");
+
+      await context.sync();
+
+      const ids = [];
+      for (let i = 0; i < annotations.items.length; i++) {
+        const annotation: Word.Annotation = annotations.items[i];
+
+        ids.push(annotation.id);
+        annotation.delete();
+      }
 
-    await PowerPoint.run(async (context) => {
-      context.presentation.setSelectedSlides(savedSlideSelection);
       await context.sync();
+
+      console.log("Annotations deleted:", ids);
     });
+Word.Annotation#critiqueAnnotation:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-set-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Selects slides 2, 4, and 5.
+    // Gets annotations found in the selected paragraph.
+
+    await Word.run(async (context) => {
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
+      annotations.load("id,state,critiqueAnnotation");
 
-    await PowerPoint.run(async (context) => {
-      context.presentation.load("slides");
       await context.sync();
-      const slide2: PowerPoint.Slide = context.presentation.slides.getItemAt(1);
-      const slide4: PowerPoint.Slide = context.presentation.slides.getItemAt(3);
-      const slide5: PowerPoint.Slide = context.presentation.slides.getItemAt(4);
-      slide2.load("id");
-      slide4.load("id");
-      slide5.load("id");
-      try {
-        await context.sync();
-      } catch (error) {
-        console.warn("This action requires at least 5 slides in the presentation.");
-        return;
+
+      console.log("Annotations found:");
+
+      for (let i = 0; i < annotations.items.length; i++) {
+        const annotation: Word.Annotation = annotations.items[i];
+
+        console.log(`ID ${annotation.id} - state '${annotation.state}':`, annotation.critiqueAnnotation.critique);
       }
-      await context.sync();
-      context.presentation.setSelectedSlides([slide2.id, slide4.id, slide5.id]);
-      await context.sync();
     });
-'PowerPoint.Shape:class':
+Word.Annotation#id:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Changes the transparency of every geometric shape in the slide.
+    // Accepts the first annotation found in the selected paragraph.
+
+    await Word.run(async (context) => {
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
+      annotations.load("id,state,critiqueAnnotation");
 
-    await PowerPoint.run(async (context) => {
-      // Get the type of shape for every shape in the collection.
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-      shapes.load("type");
       await context.sync();
 
-      // Change the shape transparency to be halfway transparent.
-      shapes.items.forEach((shape) => {
-        if (shape.type === PowerPoint.ShapeType.geometricShape) {
-          shape.fill.transparency = 0.5;
+      for (let i = 0; i < annotations.items.length; i++) {
+        const annotation: Word.Annotation = annotations.items[i];
+
+        if (annotation.state === Word.AnnotationState.created) {
+          console.log(`Accepting ID ${annotation.id}...`);
+          annotation.critiqueAnnotation.accept();
+
+          await context.sync();
+          break;
         }
-      });
-      await context.sync();
+      }
     });
-'PowerPoint.Shape#delete:member(1)':
+Word.Annotation#state:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
-
-
-    // This function gets the collection of shapes on the first slide,
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
-    // and then iterates through them, deleting each one.
 
-    await PowerPoint.run(async (context) => {
-      const slide: PowerPoint.Slide = context.presentation.slides.getItemAt(0);
-      const shapes: PowerPoint.ShapeCollection = slide.shapes;
+    // Rejects the last annotation found in the selected paragraph.
 
-      // Load all the shapes in the collection without loading their properties.
-      shapes.load("items/$none");
+    await Word.run(async (context) => {
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
+      annotations.load("id,state,critiqueAnnotation");
 
       await context.sync();
 
-      shapes.items.forEach((shape) => shape.delete());
+      for (let i = annotations.items.length - 1; i >= 0; i--) {
+        const annotation: Word.Annotation = annotations.items[i];
 
-      await context.sync();
+        if (annotation.state === Word.AnnotationState.created) {
+          console.log(`Rejecting ID ${annotation.id}...`);
+          annotation.critiqueAnnotation.reject();
+
+          await context.sync();
+          break;
+        }
+      }
     });
-'PowerPoint.Shape#fill:member':
+Word.AnnotationClickedEventArgs:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Changes the selected shapes fill color to red.
+    // Registers event handlers.
+
+    await Word.run(async (context) => {
+      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
+      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
+
+      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
+      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
+      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
+      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
+      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
-      const shapeCount = shapes.getCount();
-      shapes.load("items");
-      await context.sync();
-      shapes.items.map((shape) => {
-        shape.fill.setSolidColor("red");
-      });
       await context.sync();
+
+      console.log("Event handlers registered.");
     });
-'PowerPoint.Shape#height:member':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Arranges the selected shapes in a line from left to right.
+    async function onClickedHandler(args: Word.AnnotationClickedEventArgs) {
+      await Word.run(async (context) => {
+        const annotation: Word.Annotation = context.document.getAnnotationById(args.id);
+        annotation.load("critiqueAnnotation");
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
-      const shapeCount = shapes.getCount();
-      shapes.load("items");
-      await context.sync();
-      let maxHeight = 0;
-      shapes.items.map((shape) => {
-        shape.load("width,height");
-      });
-      await context.sync();
-      shapes.items.map((shape) => {
-        shape.left = currentLeft;
-        shape.top = currentTop;
-        currentLeft += shape.width;
-        if (shape.height > maxHeight) maxHeight = shape.height;
+        await context.sync();
+
+        console.log(`AnnotationClicked: ID ${args.id}:`, annotation.critiqueAnnotation.critique);
       });
-      await context.sync();
-      currentLeft = 0;
-      if (currentTop > slideHeight - 200) currentTop = 0;
-    });
-'PowerPoint.Shape#left:member':
+    }
+Word.AnnotationCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Arranges the selected shapes in a line from left to right.
+    // Gets annotations found in the selected paragraph.
+
+    await Word.run(async (context) => {
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
+      annotations.load("id,state,critiqueAnnotation");
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
-      const shapeCount = shapes.getCount();
-      shapes.load("items");
-      await context.sync();
-      let maxHeight = 0;
-      shapes.items.map((shape) => {
-        shape.load("width,height");
-      });
-      await context.sync();
-      shapes.items.map((shape) => {
-        shape.left = currentLeft;
-        shape.top = currentTop;
-        currentLeft += shape.width;
-        if (shape.height > maxHeight) maxHeight = shape.height;
-      });
       await context.sync();
-      currentLeft = 0;
-      if (currentTop > slideHeight - 200) currentTop = 0;
-    });
-'PowerPoint.Shape#top:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
+      console.log("Annotations found:");
 
-    // Arranges the selected shapes in a line from left to right.
+      for (let i = 0; i < annotations.items.length; i++) {
+        const annotation: Word.Annotation = annotations.items[i];
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
-      const shapeCount = shapes.getCount();
-      shapes.load("items");
-      await context.sync();
-      let maxHeight = 0;
-      shapes.items.map((shape) => {
-        shape.load("width,height");
-      });
-      await context.sync();
-      shapes.items.map((shape) => {
-        shape.left = currentLeft;
-        shape.top = currentTop;
-        currentLeft += shape.width;
-        if (shape.height > maxHeight) maxHeight = shape.height;
-      });
-      await context.sync();
-      currentLeft = 0;
-      if (currentTop > slideHeight - 200) currentTop = 0;
+        console.log(`ID ${annotation.id} - state '${annotation.state}':`, annotation.critiqueAnnotation.critique);
+      }
     });
-'PowerPoint.Shape#type:member':
+Word.AnnotationHoveredEventArgs:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Changes the transparency of every geometric shape in the slide.
+    // Registers event handlers.
 
-    await PowerPoint.run(async (context) => {
-      // Get the type of shape for every shape in the collection.
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-      shapes.load("type");
-      await context.sync();
+    await Word.run(async (context) => {
+      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
+      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
+
+      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
+      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
+      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
+      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
+      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
 
-      // Change the shape transparency to be halfway transparent.
-      shapes.items.forEach((shape) => {
-        if (shape.type === PowerPoint.ShapeType.geometricShape) {
-          shape.fill.transparency = 0.5;
-        }
-      });
       await context.sync();
+
+      console.log("Event handlers registered.");
     });
-'PowerPoint.Shape#width:member':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Arranges the selected shapes in a line from left to right.
+    async function onHoveredHandler(args: Word.AnnotationHoveredEventArgs) {
+      await Word.run(async (context) => {
+        const annotation: Word.Annotation = context.document.getAnnotationById(args.id);
+        annotation.load("critiqueAnnotation");
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
-      const shapeCount = shapes.getCount();
-      shapes.load("items");
-      await context.sync();
-      let maxHeight = 0;
-      shapes.items.map((shape) => {
-        shape.load("width,height");
-      });
-      await context.sync();
-      shapes.items.map((shape) => {
-        shape.left = currentLeft;
-        shape.top = currentTop;
-        currentLeft += shape.width;
-        if (shape.height > maxHeight) maxHeight = shape.height;
+        await context.sync();
+
+        console.log(`AnnotationHovered: ID ${args.id}:`, annotation.critiqueAnnotation.critique);
       });
-      await context.sync();
-      currentLeft = 0;
-      if (currentTop > slideHeight - 200) currentTop = 0;
-    });
-'PowerPoint.ShapeAddOptions:interface':
+    }
+Word.AnnotationInsertedEventArgs:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
-    // This function gets the collection of shapes on the first slide,
 
-    // and adds a hexagon shape to the collection, while specifying its
+    // Registers event handlers.
 
-    // location and size. Then it names the shape.
+    await Word.run(async (context) => {
+      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
+      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-      const shapeOptions: PowerPoint.ShapeAddOptions = {
-        left: 100,
-        top: 100,
-        height: 150,
-        width: 150
-      };
-      const hexagon: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.hexagon, shapeOptions);
-      hexagon.name = "Hexagon";
+      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
+      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
+      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
+      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
+      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
 
       await context.sync();
+
+      console.log("Event handlers registered.");
     });
-'PowerPoint.ShapeCollection:class':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Changes the transparency of every geometric shape in the slide.
+    async function onInsertedHandler(args: Word.AnnotationInsertedEventArgs) {
+      await Word.run(async (context) => {
+        const annotations = [];
+        for (let i = 0; i < args.ids.length; i++) {
+          let annotation: Word.Annotation = context.document.getAnnotationById(args.ids[i]);
+          annotation.load("id,critiqueAnnotation");
 
-    await PowerPoint.run(async (context) => {
-      // Get the type of shape for every shape in the collection.
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-      shapes.load("type");
-      await context.sync();
+          annotations.push(annotation);
+        }
 
-      // Change the shape transparency to be halfway transparent.
-      shapes.items.forEach((shape) => {
-        if (shape.type === PowerPoint.ShapeType.geometricShape) {
-          shape.fill.transparency = 0.5;
+        await context.sync();
+
+        for (let annotation of annotations) {
+          console.log(`AnnotationInserted: ID ${annotation.id}:`, annotation.critiqueAnnotation.critique);
         }
       });
-      await context.sync();
-    });
-'PowerPoint.ShapeCollection#addGeometricShape:member(1)':
+    }
+Word.AnnotationPopupActionEventArgs:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
-    // This function gets the collection of shapes on the first slide,
 
-    // and adds a hexagon shape to the collection, while specifying its
+    // Registers event handlers.
 
-    // location and size. Then it names the shape.
+    await Word.run(async (context) => {
+      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
+      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-      const shapeOptions: PowerPoint.ShapeAddOptions = {
-        left: 100,
-        top: 100,
-        height: 150,
-        width: 150
-      };
-      const hexagon: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.hexagon, shapeOptions);
-      hexagon.name = "Hexagon";
+      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
+      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
+      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
+      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
+      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
 
       await context.sync();
+
+      console.log("Event handlers registered.");
     });
-'PowerPoint.ShapeCollection#addLine:member(1)':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
-
-
-    // This function gets the collection of shapes on the first slide,
-
-    // and adds a line to the collection, while specifying its
-
-    // start and end points. Then it names the shape.
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
 
-      // For a line, left and top are the coordinates of the start point,
-      // while height and width are the coordinates of the end point.
-      const line: PowerPoint.Shape = shapes.addLine(PowerPoint.ConnectorType.straight, 
-          { 
-            left: 400, 
-            top: 200, 
-            height: 20, 
-            width: 150 
-          });
-      line.name = "StraightLine";
+    async function onPopupActionHandler(args:
+    Word.AnnotationPopupActionEventArgs) {
+      await Word.run(async (context) => {
+        let message = `AnnotationPopupAction: ID ${args.id} = `;
+        if (args.action === "Accept") {
+          message += `Accepted: ${args.critiqueSuggestion}`;
+        } else {
+          message += "Rejected";
+        }
 
-      await context.sync();
-    });
-'PowerPoint.ShapeCollection#addTextBox:member(1)':
+        console.log(message);
+      });
+    }
+Word.AnnotationRemovedEventArgs:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // This function gets the collection of shapes on the first slide,
+    // Registers event handlers.
 
-    // and adds a text box to the collection, while specifying its text,
+    await Word.run(async (context) => {
+      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
+      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
 
-    // location, and size. Then it names the text box.
+      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
+      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
+      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
+      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
+      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-      const textbox: PowerPoint.Shape = shapes.addTextBox("Hello!", 
-          { 
-            left: 100, 
-            top: 300, 
-            height: 300, 
-            width: 450 
-          });
-      textbox.name = "Textbox";
+      await context.sync();
 
-      return context.sync();
+      console.log("Event handlers registered.");
     });
-'PowerPoint.ShapeCollection#getItemAt:member(1)':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/tags/tags.yaml
-
-
-    await PowerPoint.run(async function(context) {
-      const slide: PowerPoint.Slide = context.presentation.slides.getItemAt(0);
-      const shape: PowerPoint.Shape = slide.shapes.getItemAt(0);
-      shape.tags.add("MOUNTAIN", "Denali");
-
-      await context.sync();
-
-      const myShapeTag: PowerPoint.Tag = shape.tags.getItem("MOUNTAIN");
-      myShapeTag.load("key, value");
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
-      await context.sync();
 
-      console.log("Added key " + JSON.stringify(myShapeTag.key) + " with value " + JSON.stringify(myShapeTag.value));
-    });
-'PowerPoint.ShapeCollection#load:member(2)':
+    async function onRemovedHandler(args: Word.AnnotationRemovedEventArgs) {
+      await Word.run(async (context) => {
+        for (let id of args.ids) {
+          console.log(`AnnotationRemoved: ID ${id}`);
+        }
+      });
+    }
+Word.AnnotationSet:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Changes the transparency of every geometric shape in the slide.
+    // Adds annotations to the selected paragraph.
+
+    await Word.run(async (context) => {
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const options: Word.CritiquePopupOptions = {
+        brandingTextResourceId: "PG.TabLabel",
+        subtitleResourceId: "PG.HelpCommand.TipTitle",
+        titleResourceId: "PG.HelpCommand.Label",
+        suggestions: ["suggestion 1", "suggestion 2", "suggestion 3"]
+      };
+      const critique1: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.red,
+        start: 1,
+        length: 3,
+        popupOptions: options
+      };
+      const critique2: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.green,
+        start: 6,
+        length: 1,
+        popupOptions: options
+      };
+      const critique3: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.blue,
+        start: 10,
+        length: 3,
+        popupOptions: options
+      };
+      const critique4: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.lavender,
+        start: 14,
+        length: 3,
+        popupOptions: options
+      };
+      const critique5: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.berry,
+        start: 18,
+        length: 10,
+        popupOptions: options
+      };
+      const annotationSet: Word.AnnotationSet = {
+        critiques: [critique1, critique2, critique3, critique4, critique5]
+      };
+
+      const annotationIds = paragraph.insertAnnotations(annotationSet);
 
-    await PowerPoint.run(async (context) => {
-      // Get the type of shape for every shape in the collection.
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-      shapes.load("type");
       await context.sync();
 
-      // Change the shape transparency to be halfway transparent.
-      shapes.items.forEach((shape) => {
-        if (shape.type === PowerPoint.ShapeType.geometricShape) {
-          shape.fill.transparency = 0.5;
-        }
-      });
-      await context.sync();
+      console.log("Annotations inserted:", annotationIds.value);
     });
-'PowerPoint.ShapeFill:class':
+Word.AnnotationState:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Changes the transparency of every geometric shape in the slide.
+    // Accepts the first annotation found in the selected paragraph.
 
-    await PowerPoint.run(async (context) => {
-      // Get the type of shape for every shape in the collection.
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-      shapes.load("type");
-      await context.sync();
+    await Word.run(async (context) => {
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
+      annotations.load("id,state,critiqueAnnotation");
 
-      // Change the shape transparency to be halfway transparent.
-      shapes.items.forEach((shape) => {
-        if (shape.type === PowerPoint.ShapeType.geometricShape) {
-          shape.fill.transparency = 0.5;
-        }
-      });
       await context.sync();
-    });
-'PowerPoint.ShapeFill#foregroundColor:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
 
+      for (let i = 0; i < annotations.items.length; i++) {
+        const annotation: Word.Annotation = annotations.items[i];
 
-    // Creates random shapes on the selected slide.
+        if (annotation.state === Word.AnnotationState.created) {
+          console.log(`Accepting ID ${annotation.id}...`);
+          annotation.critiqueAnnotation.accept();
 
-    await PowerPoint.run(async (context) => {
-      let finalTable = "";
-      const currentSlide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
-      const maxNewShapeWidth = 200;
-      const maxNewShapeHeight = 200;
-      const minNewShapeWidth = 50;
-      const minNewShapeHeight = 50;
-      for (let i = 0; i < 20; i++) {
-        const rectangle: PowerPoint.Shape = currentSlide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.rectangle);
-        rectangle.height = getRandomBetween(minNewShapeWidth, maxNewShapeWidth);
-        rectangle.width = getRandomBetween(minNewShapeHeight, maxNewShapeHeight);
-        rectangle.left = getRandomBetween(0, slideWidth - rectangle.width);
-        rectangle.top = getRandomBetween(0, slideHeight - rectangle.height);
-        rectangle.fill.foregroundColor = generateRandomHexColor();
+          await context.sync();
+          break;
+        }
       }
-      finalTable += "Done<br>";
-      $("#slide-tags").empty();
-      $("#slide-tags").append(finalTable);
     });
-'PowerPoint.ShapeFill#setSolidColor:member(1)':
+Word.Application:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-external-document.yaml
 
 
-    // Changes the selected shapes fill color to red.
+    // Updates the text of the current document with the text from another
+    document passed in as a Base64-encoded string.
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
-      const shapeCount = shapes.getCount();
-      shapes.load("items");
-      await context.sync();
-      shapes.items.map((shape) => {
-        shape.fill.setSolidColor("red");
-      });
+    await Word.run(async (context) => {
+      // Use the Base64-encoded string representation of the selected .docx file.
+      const externalDoc: Word.DocumentCreated = context.application.createDocument(externalDocument);
       await context.sync();
-    });
-'PowerPoint.ShapeFill#transparency:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
 
+      if (!Office.context.requirements.isSetSupported("WordApiHiddenDocument", "1.3")) {
+        console.warn("The WordApiHiddenDocument 1.3 requirement set isn't supported on this client so can't proceed. Try this action on a platform that supports this requirement set.");
+        return;
+      }
 
-    // Changes the transparency of every geometric shape in the slide.
-
-    await PowerPoint.run(async (context) => {
-      // Get the type of shape for every shape in the collection.
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-      shapes.load("type");
+      const externalDocBody: Word.Body = externalDoc.body;
+      externalDocBody.load("text");
       await context.sync();
 
-      // Change the shape transparency to be halfway transparent.
-      shapes.items.forEach((shape) => {
-        if (shape.type === PowerPoint.ShapeType.geometricShape) {
-          shape.fill.transparency = 0.5;
-        }
-      });
+      // Insert the external document's text at the beginning of the current document's body.
+      const externalDocBodyText = externalDocBody.text;
+      const currentDocBody: Word.Body = context.document.body;
+      currentDocBody.insertText(externalDocBodyText, Word.InsertLocation.start);
       await context.sync();
     });
-'PowerPoint.ShapeFont:class':
+Word.Application#createDocument:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-external-document.yaml
 
 
-    // Sets the color of the selected text range to green.
+    // Updates the text of the current document with the text from another
+    document passed in as a Base64-encoded string.
 
-    await PowerPoint.run(async (context) => {
-      const textRange: PowerPoint.TextRange = context.presentation.getSelectedTextRange();
-      textRange.font.color = "green";
+    await Word.run(async (context) => {
+      // Use the Base64-encoded string representation of the selected .docx file.
+      const externalDoc: Word.DocumentCreated = context.application.createDocument(externalDocument);
       await context.sync();
-    });
-'PowerPoint.ShapeFont#color:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
 
+      if (!Office.context.requirements.isSetSupported("WordApiHiddenDocument", "1.3")) {
+        console.warn("The WordApiHiddenDocument 1.3 requirement set isn't supported on this client so can't proceed. Try this action on a platform that supports this requirement set.");
+        return;
+      }
 
-    // Sets the color of the selected text range to green.
+      const externalDocBody: Word.Body = externalDoc.body;
+      externalDocBody.load("text");
+      await context.sync();
 
-    await PowerPoint.run(async (context) => {
-      const textRange: PowerPoint.TextRange = context.presentation.getSelectedTextRange();
-      textRange.font.color = "green";
+      // Insert the external document's text at the beginning of the current document's body.
+      const externalDocBodyText = externalDocBody.text;
+      const currentDocBody: Word.Body = context.document.body;
+      currentDocBody.insertText(externalDocBodyText, Word.InsertLocation.start);
       await context.sync();
     });
-'PowerPoint.ShapeLineDashStyle:enum':
+Word.Application#retrieveStylesFromBase64:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/get-external-styles.yaml
 
 
-    // Changes the dash style of every line in the slide.
+    // Gets style info from another document passed in as a Base64-encoded
+    string.
 
-    await PowerPoint.run(async (context) => {
-      // Get the type of shape for every shape in the collection.
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-      shapes.load("type");
+    await Word.run(async (context) => {
+      const retrievedStyles = context.application.retrieveStylesFromBase64(externalDocument);
       await context.sync();
 
-      // Change the dash style for shapes of the type `line`.
-      shapes.items.forEach((shape) => {
-        if (shape.type === PowerPoint.ShapeType.line) {
-          shape.lineFormat.dashStyle = PowerPoint.ShapeLineDashStyle.dashDot;
-        }
-      });
-      await context.sync();
+      console.log("Styles from the other document:", retrievedStyles.value);
     });
-'PowerPoint.ShapeLineFormat:class':
+Word.Body#clear:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
 
 
-    // Changes the dash style of every line in the slide.
+    // Clears out the content from the document body.
 
-    await PowerPoint.run(async (context) => {
-      // Get the type of shape for every shape in the collection.
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-      shapes.load("type");
-      await context.sync();
+    // Run a batch operation against the Word object model.
 
-      // Change the dash style for shapes of the type `line`.
-      shapes.items.forEach((shape) => {
-        if (shape.type === PowerPoint.ShapeType.line) {
-          shape.lineFormat.dashStyle = PowerPoint.ShapeLineDashStyle.dashDot;
-        }
-      });
-      await context.sync();
+    await Word.run(async (context) => {
+      // Create a proxy object for the document body.
+      const body: Word.Body = context.document.body;
+
+      // Queue a command to clear the contents of the body.
+      body.clear();
+
+      console.log("Cleared the body contents.");
     });
-'PowerPoint.ShapeLineFormat#dashStyle:member':
+
+
+    // The Silly stories add-in sample shows how the clear method can be used to
+    clear the contents of a document.
+
+    // https://aka.ms/sillystorywordaddin
+Word.Body#getComments:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
 
-    // Changes the dash style of every line in the slide.
+    // Gets the comments in the document body.
 
-    await PowerPoint.run(async (context) => {
-      // Get the type of shape for every shape in the collection.
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-      shapes.load("type");
-      await context.sync();
+    await Word.run(async (context) => {
+      const comments: Word.CommentCollection = context.document.body.getComments();
 
-      // Change the dash style for shapes of the type `line`.
-      shapes.items.forEach((shape) => {
-        if (shape.type === PowerPoint.ShapeType.line) {
-          shape.lineFormat.dashStyle = PowerPoint.ShapeLineDashStyle.dashDot;
-        }
-      });
+      // Load objects to log in the console.
+      comments.load();
       await context.sync();
+
+      console.log("All comments:", comments);
     });
-'PowerPoint.ShapeScopedCollection:class':
+Word.Body#getHtml:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
 
 
-    // Changes the selected shapes fill color to red.
+    // Gets the HTML that represents the content of the body.
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
-      const shapeCount = shapes.getCount();
-      shapes.load("items");
-      await context.sync();
-      shapes.items.map((shape) => {
-        shape.fill.setSolidColor("red");
-      });
-      await context.sync();
-    });
-'PowerPoint.ShapeScopedCollection#getCount:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+    // Run a batch operation against the Word object model.
 
+    await Word.run(async (context) => {
+      // Create a proxy object for the document body.
+      const body: Word.Body = context.document.body;
 
-    // Gets the shapes you selected on the slide and displays their IDs on the
-    task pane.
+      // Queue a command to get the HTML contents of the body.
+      const bodyHTML = body.getHtml();
 
-    await PowerPoint.run(async (context) => {
-      let finalTable = "";
-      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
-      const shapeCount = shapes.getCount();
-      await context.sync();
-      finalTable += "<br>getSelectedShapes.getCount returned:<b>" + shapeCount.value + "</b><br>";
-      finalTable +=
-        "<br><table border=1 cellpadding=3 cellspacing=0><tr><td bgcolor=#3333EE><font color=white>Index</font></td><td bgcolor=#3333EE><font color=white>Id</font></td></tr>";
-      shapes.load("items");
+      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
       await context.sync();
-      shapes.items.map((shape, index) => {
-        finalTable += "<tr><td>" + index + "</td><td>" + shape.id + "</td></tr>";
-      });
-      finalTable += "</table>";
-      $("#outputSpan").empty();
-      $("#outputSpan").append(finalTable);
+
+      console.log("Body contents (HTML): " + bodyHTML.value);
     });
-'PowerPoint.ShapeType:enum':
+Word.Body#getOoxml:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
 
 
-    // Changes the dash style of every line in the slide.
+    // Gets the OOXML that represents the content of the body.
 
-    await PowerPoint.run(async (context) => {
-      // Get the type of shape for every shape in the collection.
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-      shapes.load("type");
-      await context.sync();
+    // Run a batch operation against the Word object model.
+
+    await Word.run(async (context) => {
+      // Create a proxy object for the document body.
+      const body: Word.Body = context.document.body;
+
+      // Queue a command to get the OOXML contents of the body.
+      const bodyOOXML = body.getOoxml();
 
-      // Change the dash style for shapes of the type `line`.
-      shapes.items.forEach((shape) => {
-        if (shape.type === PowerPoint.ShapeType.line) {
-          shape.lineFormat.dashStyle = PowerPoint.ShapeLineDashStyle.dashDot;
-        }
-      });
+      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
       await context.sync();
+
+      console.log("Body contents (OOXML): " + bodyOOXML.value);
     });
-'PowerPoint.Slide:class':
+Word.Body#getTrackedChanges:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-tracked-changes.yaml
 
 
-    // Reselects shapes that were saved previously.
+    // Gets all tracked changes.
 
-    await PowerPoint.run(async (context) => {
-      const slide1: PowerPoint.Slide = context.presentation.slides.getItem(savedSlideSelection[0]);
-      await context.sync();
-      slide1.setSelectedShapes(savedShapeSelection);
+    await Word.run(async (context) => {
+      const body: Word.Body = context.document.body;
+      const trackedChanges: Word.TrackedChangeCollection = body.getTrackedChanges();
+      trackedChanges.load();
       await context.sync();
+
+      console.log(trackedChanges);
     });
-'PowerPoint.Slide#delete:member(1)':
+Word.Body#insertBreak:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-set-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
 
 
-    // Deletes the selected slides.
+    // Inserts a page break at the beginning of the document.
 
-    await PowerPoint.run(async (context) => {
-      context.presentation.load("slides");
-      await context.sync();
-      const slides: PowerPoint.SlideScopedCollection = context.presentation.getSelectedSlides();
-      const slideCount = slides.getCount();
-      slides.load("items");
-      await context.sync();
-      slides.items.map((slide) => {
-        slide.delete();
-      });
-    });
-'PowerPoint.Slide#setSelectedShapes:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+    // Run a batch operation against the Word object model.
 
+    await Word.run(async (context) => {
+      // Create a proxy object for the document body.
+      const body: Word.Body = context.document.body;
 
-    // Reselects shapes that were saved previously.
+      // Queue a command to insert a page break at the start of the document body.
+      body.insertBreak(Word.BreakType.page, Word.InsertLocation.start);
 
-    await PowerPoint.run(async (context) => {
-      const slide1: PowerPoint.Slide = context.presentation.slides.getItem(savedSlideSelection[0]);
-      await context.sync();
-      slide1.setSelectedShapes(savedShapeSelection);
+      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
       await context.sync();
+
+      console.log("Added a page break at the start of the document body.");
     });
+Word.Body#insertContentControl:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
 
 
-    // Selects the first two shapes on slide 1.
+    // Creates a content control using the document body.
 
-    await PowerPoint.run(async (context) => {
-      context.presentation.load("slides");
-      await context.sync();
-      const slide1 = context.presentation.slides.getItemAt(0);
-      slide1.load("shapes");
-      await context.sync();
-      const shapes: PowerPoint.ShapeCollection = slide1.shapes;
-      const shape1: PowerPoint.Shape = shapes.getItemAt(0);
-      const shape2: PowerPoint.Shape = shapes.getItemAt(1);
-      shape1.load("id");
-      shape2.load("id");
-      await context.sync();
-      slide1.setSelectedShapes([shape1.id, shape2.id]);
+    // Run a batch operation against the Word object model.
+
+    await Word.run(async (context) => {
+      // Create a proxy object for the document body.
+      const body: Word.Body = context.document.body;
+
+      // Queue a command to wrap the body in a content control.
+      body.insertContentControl();
+
+      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
       await context.sync();
+
+      console.log("Wrapped the body in a content control.");
     });
-'PowerPoint.SlideCollection:class':
+Word.Body#insertFileFromBase64:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
 
 
-    const chosenMaster = $("#master-id").val() as string;
+    // Inserts the body from the external document at the beginning of this
+    document.
 
-    const chosenLayout = $("#layout-id").val() as string;
+    // Run a batch operation against the Word object model.
 
+    await Word.run(async (context) => {
+      // Create a proxy object for the document body.
+      const body: Word.Body = context.document.body;
 
-    await PowerPoint.run(async function(context) {
-      // Create a new slide using an existing master slide and layout.
-      const newSlideOptions: PowerPoint.AddSlideOptions = {
-        slideMasterId: chosenMaster, /* An ID from `Presentation.slideMasters`. */
-        layoutId: chosenLayout /* An ID from `SlideMaster.layouts`. */
-      };
-      context.presentation.slides.add(newSlideOptions);
+      // Queue a command to insert the Base64-encoded string representation of the body of the selected .docx file at the beginning of the current document.
+      body.insertFileFromBase64(externalDocument, Word.InsertLocation.start);
+
+      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
       await context.sync();
+
+      console.log("Added Base64-encoded text to the beginning of the document body.");
     });
-'PowerPoint.SlideCollection#add:member(1)':
+Word.Body#insertHtml:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
 
 
-    const chosenMaster = $("#master-id").val() as string;
+    // Inserts the HTML at the beginning of this document.
 
-    const chosenLayout = $("#layout-id").val() as string;
+    // Run a batch operation against the Word object model.
 
+    await Word.run(async (context) => {
+      // Create a proxy object for the document body.
+      const body: Word.Body = context.document.body;
 
-    await PowerPoint.run(async function(context) {
-      // Create a new slide using an existing master slide and layout.
-      const newSlideOptions: PowerPoint.AddSlideOptions = {
-        slideMasterId: chosenMaster, /* An ID from `Presentation.slideMasters`. */
-        layoutId: chosenLayout /* An ID from `SlideMaster.layouts`. */
-      };
-      context.presentation.slides.add(newSlideOptions);
+      // Queue a command to insert HTML at the beginning of the document.
+      body.insertHtml("<strong>This is text inserted with body.insertHtml()</strong>", Word.InsertLocation.start);
+
+      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
       await context.sync();
+
+      console.log("HTML added to the beginning of the document body.");
     });
-'PowerPoint.SlideCollection#getItemAt:member(1)':
+Word.Body#insertInlinePictureFromBase64:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-set-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
 
 
-    // Selects slides 2, 4, and 5.
+    // Inserts an image inline at the beginning of this document.
 
-    await PowerPoint.run(async (context) => {
-      context.presentation.load("slides");
-      await context.sync();
-      const slide2: PowerPoint.Slide = context.presentation.slides.getItemAt(1);
-      const slide4: PowerPoint.Slide = context.presentation.slides.getItemAt(3);
-      const slide5: PowerPoint.Slide = context.presentation.slides.getItemAt(4);
-      slide2.load("id");
-      slide4.load("id");
-      slide5.load("id");
-      try {
-        await context.sync();
-      } catch (error) {
-        console.warn("This action requires at least 5 slides in the presentation.");
-        return;
-      }
-      await context.sync();
-      context.presentation.setSelectedSlides([slide2.id, slide4.id, slide5.id]);
+    // Run a batch operation against the Word object model.
+
+    await Word.run(async (context) => {
+      // Create a proxy object for the document body.
+      const body: Word.Body = context.document.body;
+
+      // Base64-encoded image to insert inline.
+      const base64EncodedImg =
+        "iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAIAAAAxEEnAAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACFSURBVDhPtY1BEoQwDMP6/0+XgIMTBAeYoTqso9Rkx1zG+tNj1H94jgGzeNSjteO5vtQQuG2seO0av8LzGbe3anzRoJ4ybm/VeKEerAEbAUpW4aWQCmrGFWykRzGBCnYy2ha3oAIq2MloW9yCCqhgJ6NtcQsqoIKdjLbFLaiACnYyf2fODbrjZcXfr2F4AAAAAElFTkSuQmCC";
+
+      // Queue a command to insert a Base64-encoded image at the beginning of the current document.
+      body.insertInlinePictureFromBase64(base64EncodedImg, Word.InsertLocation.start);
+
+      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
       await context.sync();
+
+      console.log("Added a Base64-encoded image to the beginning of the document body.");
     });
-'PowerPoint.SlideLayout:class':
+Word.Body#insertOoxml:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
 
 
-    await PowerPoint.run(async function(context) {
-      // Load information about all the slide masters and associated layouts.
-      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
-      await context.sync();
+    // Inserts OOXML at the beginning of this document.
 
-      // Log the name and ID of each slide master.
-      for (let i = 0; i < slideMasters.items.length; i++) {
-        console.log("Master name: " + slideMasters.items[i].name);
-        console.log("Master ID: " + slideMasters.items[i].id);
+    // Run a batch operation against the Word object model.
 
-        // Log the name and ID of each slide layout in the slide master.
-        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
-        for (let j = 0; j < layoutsInMaster.items.length; j++) {
-          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
-        }
-      }
-    });
-'PowerPoint.SlideLayout#id:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
+    await Word.run(async (context) => {
+      // Create a proxy object for the document body.
+      const body: Word.Body = context.document.body;
 
+      // Queue a command to insert OOXML at the beginning of the body.
+      body.insertOoxml(
+        "<pkg:package xmlns:pkg='http://schemas.microsoft.com/office/2006/xmlPackage'><pkg:part pkg:name='/_rels/.rels' pkg:contentType='application/vnd.openxmlformats-package.relationships+xml' pkg:padding='512'><pkg:xmlData><Relationships xmlns='http://schemas.openxmlformats.org/package/2006/relationships'><Relationship Id='rId1' Type='http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument' Target='word/document.xml'/></Relationships></pkg:xmlData></pkg:part><pkg:part pkg:name='/word/document.xml' pkg:contentType='application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml'><pkg:xmlData><w:document xmlns:w='http://schemas.openxmlformats.org/wordprocessingml/2006/main' ><w:body><w:p><w:pPr><w:spacing w:before='360' w:after='0' w:line='480' w:lineRule='auto'/><w:rPr><w:color w:val='70AD47' w:themeColor='accent6'/><w:sz w:val='28'/></w:rPr></w:pPr><w:r><w:rPr><w:color w:val='70AD47' w:themeColor='accent6'/><w:sz w:val='28'/></w:rPr><w:t>This text has formatting directly applied to achieve its font size, color, line spacing, and paragraph spacing.</w:t></w:r></w:p></w:body></w:document></pkg:xmlData></pkg:part></pkg:package>",
+        Word.InsertLocation.start
+      );
 
-    await PowerPoint.run(async function(context) {
-      // Load information about all the slide masters and associated layouts.
-      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
+      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
       await context.sync();
 
-      // Log the name and ID of each slide master.
-      for (let i = 0; i < slideMasters.items.length; i++) {
-        console.log("Master name: " + slideMasters.items[i].name);
-        console.log("Master ID: " + slideMasters.items[i].id);
-
-        // Log the name and ID of each slide layout in the slide master.
-        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
-        for (let j = 0; j < layoutsInMaster.items.length; j++) {
-          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
-        }
-      }
+      console.log("Added OOXML to the beginning of the document body.");
     });
-'PowerPoint.SlideLayoutCollection:class':
+
+
+    // Read "Understand when and how to use Office Open XML in your Word add-in"
+    for guidance on working with OOXML.
+
+    //
+    https://learn.microsoft.com/office/dev/add-ins/word/create-better-add-ins-for-word-with-office-open-xml
+
+
+    // The Word-Add-in-DocumentAssembly sample shows how you can use this API to
+    assemble a document.
+
+    // https://github.com/OfficeDev/Word-Add-in-DocumentAssembly
+Word.Body#insertParagraph:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-formatted-text.yaml
 
 
-    await PowerPoint.run(async function(context) {
-      // Load information about all the slide masters and associated layouts.
-      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
+    await Word.run(async (context) => {
+      // Second sentence, let's insert it as a paragraph after the previously inserted one.
+      const secondSentence: Word.Paragraph = context.document.body.insertParagraph(
+        "This is the first text with a custom style.",
+        "End"
+      );
+      secondSentence.font.set({
+        bold: false,
+        italic: true,
+        name: "Berlin Sans FB",
+        color: "blue",
+        size: 30
+      });
+
       await context.sync();
+    });
+Word.Body#insertTable:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/table-cell-access.yaml
 
-      // Log the name and ID of each slide master.
-      for (let i = 0; i < slideMasters.items.length; i++) {
-        console.log("Master name: " + slideMasters.items[i].name);
-        console.log("Master ID: " + slideMasters.items[i].id);
 
-        // Log the name and ID of each slide layout in the slide master.
-        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
-        for (let j = 0; j < layoutsInMaster.items.length; j++) {
-          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
-        }
-      }
+    await Word.run(async (context) => {
+      // Use a two-dimensional array to hold the initial table values.
+      const data = [
+        ["Tokyo", "Beijing", "Seattle"],
+        ["Apple", "Orange", "Pineapple"]
+      ];
+      const table: Word.Table = context.document.body.insertTable(2, 3, "Start", data);
+      table.styleBuiltIn = Word.BuiltInStyleName.gridTable5Dark_Accent2;
+      table.styleFirstColumn = false;
+
+      await context.sync();
     });
-'PowerPoint.SlideLayoutCollection#load:member(2)':
+Word.Body#insertText:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
 
 
-    await PowerPoint.run(async function(context) {
-      // Load information about all the slide masters and associated layouts.
-      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
-      await context.sync();
+    // Inserts text at the beginning of this document.
 
-      // Log the name and ID of each slide master.
-      for (let i = 0; i < slideMasters.items.length; i++) {
-        console.log("Master name: " + slideMasters.items[i].name);
-        console.log("Master ID: " + slideMasters.items[i].id);
+    // Run a batch operation against the Word object model.
 
-        // Log the name and ID of each slide layout in the slide master.
-        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
-        for (let j = 0; j < layoutsInMaster.items.length; j++) {
-          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
-        }
-      }
+    await Word.run(async (context) => {
+      // Create a proxy object for the document body.
+      const body: Word.Body = context.document.body;
+
+      // Queue a command to insert text at the beginning of the current document.
+      body.insertText('This is text inserted with body.insertText()', Word.InsertLocation.start);
+
+      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
+      await context.sync();
+
+      console.log("Text added to the beginning of the document body.");
     });
-'PowerPoint.SlideMaster:class':
+Word.Body#search:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/search.yaml
 
 
-    await PowerPoint.run(async function(context) {
-      // Load information about all the slide masters and associated layouts.
-      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
-      await context.sync();
+    // Does a basic text search and highlights matches in the document.
 
-      // Log the name and ID of each slide master.
-      for (let i = 0; i < slideMasters.items.length; i++) {
-        console.log("Master name: " + slideMasters.items[i].name);
-        console.log("Master ID: " + slideMasters.items[i].id);
+    await Word.run(async (context) => {
+      const results : Word.RangeCollection = context.document.body.search("extend");
+      results.load("length");
 
-        // Log the name and ID of each slide layout in the slide master.
-        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
-        for (let j = 0; j < layoutsInMaster.items.length; j++) {
-          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
-        }
+      await context.sync();
+
+      // Let's traverse the search results and highlight matches.
+      for (let i = 0; i < results.items.length; i++) {
+        results.items[i].font.highlightColor = "yellow";
       }
+
+      await context.sync();
     });
-'PowerPoint.SlideMaster#id:member':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/search.yaml
 
 
-    await PowerPoint.run(async function(context) {
-      // Load information about all the slide masters and associated layouts.
-      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
-      await context.sync();
+    // Does a wildcard search and highlights matches in the document.
 
-      // Log the name and ID of each slide master.
-      for (let i = 0; i < slideMasters.items.length; i++) {
-        console.log("Master name: " + slideMasters.items[i].name);
-        console.log("Master ID: " + slideMasters.items[i].id);
+    await Word.run(async (context) => {
+      // Construct a wildcard expression and set matchWildcards to true in order to use wildcards.
+      const results : Word.RangeCollection = context.document.body.search("$*.[0-9][0-9]", { matchWildcards: true });
+      results.load("length");
 
-        // Log the name and ID of each slide layout in the slide master.
-        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
-        for (let j = 0; j < layoutsInMaster.items.length; j++) {
-          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
-        }
+      await context.sync();
+
+      // Let's traverse the search results and highlight matches.
+      for (let i = 0; i < results.items.length; i++) {
+        results.items[i].font.highlightColor = "red";
+        results.items[i].font.color = "white";
       }
+
+      await context.sync();
     });
-'PowerPoint.SlideMasterCollection:class':
+Word.Body#select:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
 
 
-    await PowerPoint.run(async function(context) {
-      // Load information about all the slide masters and associated layouts.
-      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
-      await context.sync();
+    // Selects the entire body.
 
-      // Log the name and ID of each slide master.
-      for (let i = 0; i < slideMasters.items.length; i++) {
-        console.log("Master name: " + slideMasters.items[i].name);
-        console.log("Master ID: " + slideMasters.items[i].id);
+    // Run a batch operation against the Word object model.
 
-        // Log the name and ID of each slide layout in the slide master.
-        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
-        for (let j = 0; j < layoutsInMaster.items.length; j++) {
-          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
-        }
-      }
+    await Word.run(async (context) => {
+      // Create a proxy object for the document body.
+      const body: Word.Body = context.document.body;
+
+      // Queue a command to select the document body.
+      // The Word UI will move to the selected document body.
+      body.select();
+
+      console.log("Selected the document body.");
     });
-'PowerPoint.SlideMasterCollection#load:member(2)':
+Word.Body#fields:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
 
-    await PowerPoint.run(async function(context) {
-      // Load information about all the slide masters and associated layouts.
-      const slideMasters: PowerPoint.SlideMasterCollection = context.presentation.slideMasters.load("id, name, layouts/items/name, layouts/items/id");
+    // Gets all fields in the document body.
+
+    await Word.run(async (context) => {
+      const fields: Word.FieldCollection = context.document.body.fields.load("items");
+
       await context.sync();
 
-      // Log the name and ID of each slide master.
-      for (let i = 0; i < slideMasters.items.length; i++) {
-        console.log("Master name: " + slideMasters.items[i].name);
-        console.log("Master ID: " + slideMasters.items[i].id);
+      if (fields.items.length === 0) {
+        console.log("No fields in this document.");
+      } else {
+        fields.load(["code", "result"]);
+        await context.sync();
 
-        // Log the name and ID of each slide layout in the slide master.
-        const layoutsInMaster: PowerPoint.SlideLayoutCollection = slideMasters.items[i].layouts;
-        for (let j = 0; j < layoutsInMaster.items.length; j++) {
-          console.log("    Layout name: " + layoutsInMaster.items[j].name + " Layout ID: " + layoutsInMaster.items[j].id);
+        for (let i = 0; i < fields.items.length; i++) {
+          console.log(`Field ${i + 1}'s code: ${fields.items[i].code}`, `Field ${i + 1}'s result: ${JSON.stringify(fields.items[i].result)}`);
         }
       }
     });
-'PowerPoint.SlideScopedCollection:class':
+Word.Body#font:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
 
 
-    // Saves which shapes are selected so that they can be reselected later.
+    // Gets the style and the font size, font name, and font color properties on
+    the body object.
 
-    await PowerPoint.run(async (context) => {
-      context.presentation.load("slides");
-      await context.sync();
-      const slides: PowerPoint.SlideScopedCollection = context.presentation.getSelectedSlides();
-      const slideCount = slides.getCount();
-      slides.load("items");
-      await context.sync();
-      savedSlideSelection = [];
-      slides.items.map((slide) => {
-        savedSlideSelection.push(slide.id);
-      });
-      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
-      const shapeCount = shapes.getCount();
-      shapes.load("items");
+    // Run a batch operation against the Word object model.
+
+    await Word.run(async (context) => {
+      // Create a proxy object for the document body.
+      const body: Word.Body = context.document.body;
+
+      // Queue a command to load font and style information for the document body.
+      body.load("font/size, font/name, font/color, style");
+
+      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
       await context.sync();
-      shapes.items.map((shape) => {
-        savedShapeSelection.push(shape.id);
-      });
+
+      // Show font-related property values on the body object.
+      const results =
+        "Font size: " +
+        body.font.size +
+        "; Font name: " +
+        body.font.name +
+        "; Font color: " +
+        body.font.color +
+        "; Body style: " +
+        body.style;
+
+      console.log(results);
     });
-'PowerPoint.Tag:class':
+Word.Body#footnotes:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/tags/tags.yaml
-
-
-    await PowerPoint.run(async function (context) {
-      let presentationTags: PowerPoint.TagCollection = context.presentation.tags;
-      presentationTags.add("COLOR", "blue");
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
 
-      await context.sync();
 
-      const tag: PowerPoint.Tag = presentationTags.getItem("COLOR");
-      tag.load("key, value");
+    // Gets the footnotes in the document body.
 
+    await Word.run(async (context) => {
+      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
+      footnotes.load("length");
       await context.sync();
 
-      console.log("Added key " + JSON.stringify(tag.key) + " with value " + JSON.stringify(tag.value));
+      console.log("Number of footnotes in the document body: " + footnotes.items.length);
     });
-'PowerPoint.TagCollection:class':
+Word.Body#inlinePictures:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/tags/tags.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
 
 
-    await PowerPoint.run(async function(context) {
-      let selectedSlideIndex = await getSelectedSlideIndex();
+    // Gets the first image in the document.
 
-      // Decrement because the getSelectedSlideByIndex method is 1-based,
-      // but the getItemAt method is 0-based.
-      selectedSlideIndex = selectedSlideIndex - 1;
-      const slide: PowerPoint.Slide = context.presentation.slides.getItemAt(selectedSlideIndex);
-      slide.tags.add("CUSTOMER_TYPE", "Premium");
+    await Word.run(async (context) => {
+      const firstPicture: Word.InlinePicture = context.document.body.inlinePictures.getFirst();
+      firstPicture.load("width, height, imageFormat");
 
       await context.sync();
-
-      const audienceTag: PowerPoint.Tag = slide.tags.getItem("CUSTOMER_TYPE");
-      audienceTag.load("key, value");
+      console.log(`Image dimensions: ${firstPicture.width} x ${firstPicture.height}`, `Image format: ${firstPicture.imageFormat}`);
+      // Get the image encoded as Base64.
+      const base64 = firstPicture.getBase64ImageSrc();
 
       await context.sync();
-
-      console.log("Added key " + JSON.stringify(audienceTag.key) + " with value " + JSON.stringify(audienceTag.value));
+      console.log(base64.value);
     });
-'PowerPoint.TagCollection#add:member(1)':
+Word.Body#lists:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/tags/tags.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
 
 
-    await PowerPoint.run(async function(context) {
-      const slide: PowerPoint.Slide = context.presentation.slides.getItemAt(0);
-      slide.tags.add("OCEAN", "Indian");
-      slide.tags.add("PLANET", "Jupiter");
-      slide.tags.add("CONTINENT", "Antarctica");
+    // Gets information about the first list in the document.
+
+    await Word.run(async (context) => {
+      const lists: Word.ListCollection = context.document.body.lists;
+      lists.load("items");
 
       await context.sync();
 
-      slide.tags.load("key, value");
+      if (lists.items.length === 0) {
+        console.warn("There are no lists in this document.");
+        return;
+      }
+      
+      // Get the first list.
+      const list: Word.List = lists.getFirst();
+      list.load("levelTypes,levelExistences");
 
       await context.sync();
 
-      for (let i = 0; i < slide.tags.items.length; i++) {
-        console.log("Added key " + JSON.stringify(slide.tags.items[i].key) + " with value " +        JSON.stringify(slide.tags.items[i].value));
+      const levelTypes  = list.levelTypes;
+      console.log("Level types of the first list:");
+      for (let i = 0; i < levelTypes.length; i++) {
+        console.log(`- Level ${i + 1} (index ${i}): ${levelTypes[i]}`);
+      }
+
+      const levelExistences = list.levelExistences;
+      console.log("Level existences of the first list:");
+      for (let i = 0; i < levelExistences.length; i++) {
+        console.log(`- Level ${i + 1} (index ${i}): ${levelExistences[i]}`);
       }
     });
-'PowerPoint.TagCollection#delete:member(1)':
+Word.Body#onCommentAdded:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/tags/tags.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
 
 
-    await PowerPoint.run(async function (context) {
-      let presentationTags: PowerPoint.TagCollection = context.presentation.tags;
+    // Registers event handlers.
 
-      presentationTags.delete("COLOR");
+    await Word.run(async (context) => {
+      const body: Word.Body = context.document.body;
+      body.track();
+      await context.sync();
 
+      eventContexts[0] = body.onCommentAdded.add(onEventHandler);
+      eventContexts[1] = body.onCommentChanged.add(onChangedHandler);
+      eventContexts[2] = body.onCommentDeleted.add(onEventHandler);
+      eventContexts[3] = body.onCommentDeselected.add(onEventHandler);
+      eventContexts[4] = body.onCommentSelected.add(onEventHandler);
       await context.sync();
 
-      console.log(JSON.stringify(presentationTags));
+      console.log("Event handlers registered.");
     });
-'PowerPoint.TagCollection#getItem:member(1)':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/tags/tags.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
 
 
-    await PowerPoint.run(async function(context) {
-      let selectedSlideIndex = await getSelectedSlideIndex();
+    async function onEventHandler(event: Word.CommentEventArgs) {
+      // Handler for all events except onCommentChanged.
+      await Word.run(async (context) => {
+        console.log(`${event.type} event detected. Event source: ${event.source}. Comment info:`, event.commentDetails);
+      });
+    }
+Word.Body#onCommentChanged:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
 
-      // Decrement because the getSelectedSlideByIndex method is 1-based,
-      // but the getItemAt method is 0-based.
-      selectedSlideIndex = selectedSlideIndex - 1;
-      const slide: PowerPoint.Slide = context.presentation.slides.getItemAt(selectedSlideIndex);
-      slide.tags.add("CUSTOMER_TYPE", "Premium");
 
-      await context.sync();
+    // Registers event handlers.
 
-      const audienceTag: PowerPoint.Tag = slide.tags.getItem("CUSTOMER_TYPE");
-      audienceTag.load("key, value");
+    await Word.run(async (context) => {
+      const body: Word.Body = context.document.body;
+      body.track();
+      await context.sync();
 
+      eventContexts[0] = body.onCommentAdded.add(onEventHandler);
+      eventContexts[1] = body.onCommentChanged.add(onChangedHandler);
+      eventContexts[2] = body.onCommentDeleted.add(onEventHandler);
+      eventContexts[3] = body.onCommentDeselected.add(onEventHandler);
+      eventContexts[4] = body.onCommentSelected.add(onEventHandler);
       await context.sync();
 
-      console.log("Added key " + JSON.stringify(audienceTag.key) + " with value " + JSON.stringify(audienceTag.value));
+      console.log("Event handlers registered.");
     });
-'PowerPoint.TextFrame:class':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
 
-    // Selects the first 10 characters of the selected shape.
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
-      const shapeCount = shapes.getCount();
-      await context.sync();
-      if (shapeCount.value !== 1) {
-        console.warn("You must select only one shape with text in it.");
-        return;
-      }
-      const shape: PowerPoint.Shape = shapes.getItemAt(0);
-      const textFrame: PowerPoint.TextFrame = shape.textFrame.load("textRange,hasText");
-      await context.sync();
-      if (textFrame.hasText != true) {
-        console.warn("You must select only one shape with text in it.");
-        return;
-      }
-      const textRange: PowerPoint.TextRange = textFrame.textRange;
-      textRange.load("text");
-      await context.sync();
-      if (textRange.text.length < 10) {
-        console.warn("You must select only one shape with at least 10 characters in it.");
-        return;
-      }
-      const textRange10 = textRange.getSubstring(0, 10);
-      textRange10.setSelected();
-      await context.sync();
-    });
-'PowerPoint.TextRange:class':
+    async function onChangedHandler(event: Word.CommentEventArgs) {
+      await Word.run(async (context) => {
+        console.log(
+          `${event.type} event detected. ${event.changeType} change made. Event source: ${event.source}. Comment info:`, event.commentDetails
+        );
+      });
+    }
+Word.Body#onCommentDeleted:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
 
 
-    // Sets the color of the selected text range to green.
+    // Registers event handlers.
 
-    await PowerPoint.run(async (context) => {
-      const textRange: PowerPoint.TextRange = context.presentation.getSelectedTextRange();
-      textRange.font.color = "green";
+    await Word.run(async (context) => {
+      const body: Word.Body = context.document.body;
+      body.track();
+      await context.sync();
+
+      eventContexts[0] = body.onCommentAdded.add(onEventHandler);
+      eventContexts[1] = body.onCommentChanged.add(onChangedHandler);
+      eventContexts[2] = body.onCommentDeleted.add(onEventHandler);
+      eventContexts[3] = body.onCommentDeselected.add(onEventHandler);
+      eventContexts[4] = body.onCommentSelected.add(onEventHandler);
       await context.sync();
+
+      console.log("Event handlers registered.");
     });
-'PowerPoint.TextRange#font:member':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
 
-    // Sets the color of the selected text range to green.
 
-    await PowerPoint.run(async (context) => {
-      const textRange: PowerPoint.TextRange = context.presentation.getSelectedTextRange();
-      textRange.font.color = "green";
-      await context.sync();
-    });
-'PowerPoint.TextRange#setSelected:member(1)':
+    async function onEventHandler(event: Word.CommentEventArgs) {
+      // Handler for all events except onCommentChanged.
+      await Word.run(async (context) => {
+        console.log(`${event.type} event detected. Event source: ${event.source}. Comment info:`, event.commentDetails);
+      });
+    }
+Word.Body#onCommentDeselected:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
 
 
-    // Selects the first 10 characters of the selected shape.
+    // Registers event handlers.
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
-      const shapeCount = shapes.getCount();
-      await context.sync();
-      if (shapeCount.value !== 1) {
-        console.warn("You must select only one shape with text in it.");
-        return;
-      }
-      const shape: PowerPoint.Shape = shapes.getItemAt(0);
-      const textFrame: PowerPoint.TextFrame = shape.textFrame.load("textRange,hasText");
-      await context.sync();
-      if (textFrame.hasText != true) {
-        console.warn("You must select only one shape with text in it.");
-        return;
-      }
-      const textRange: PowerPoint.TextRange = textFrame.textRange;
-      textRange.load("text");
+    await Word.run(async (context) => {
+      const body: Word.Body = context.document.body;
+      body.track();
       await context.sync();
-      if (textRange.text.length < 10) {
-        console.warn("You must select only one shape with at least 10 characters in it.");
-        return;
-      }
-      const textRange10 = textRange.getSubstring(0, 10);
-      textRange10.setSelected();
+
+      eventContexts[0] = body.onCommentAdded.add(onEventHandler);
+      eventContexts[1] = body.onCommentChanged.add(onChangedHandler);
+      eventContexts[2] = body.onCommentDeleted.add(onEventHandler);
+      eventContexts[3] = body.onCommentDeselected.add(onEventHandler);
+      eventContexts[4] = body.onCommentSelected.add(onEventHandler);
       await context.sync();
+
+      console.log("Event handlers registered.");
     });
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
 
-    // Sets the range selection to the range that was saved previously.
 
-    await PowerPoint.run(async (context) => {
-      const slide1: PowerPoint.Slide = context.presentation.slides.getItem(savedTextSlideSelection[0]);
-      const shape1: PowerPoint.Shape = slide1.shapes.getItem(savedTextShapeSelection[0]);
-      const textRange: PowerPoint.TextRange = shape1.textFrame.textRange.getSubstring(savedTextTextRangeStart, savedTextTextRangeLength);
-      textRange.setSelected();
-      await context.sync();
-    });
-'PowerPoint.TextVerticalAlignment:enum':
+    async function onEventHandler(event: Word.CommentEventArgs) {
+      // Handler for all events except onCommentChanged.
+      await Word.run(async (context) => {
+        console.log(`${event.type} event detected. Event source: ${event.source}. Comment info:`, event.commentDetails);
+      });
+    }
+Word.Body#onCommentSelected:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml
-
-
-    // This function gets the collection of shapes on the first slide,
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
 
-    // and adds a brace pair, {}, to the collection, while specifying its
 
-    // location and size. Then it names the shape, sets its text and font
+    // Registers event handlers.
 
-    // color, and centers it inside the braces.
+    await Word.run(async (context) => {
+      const body: Word.Body = context.document.body;
+      body.track();
+      await context.sync();
 
-    await PowerPoint.run(async (context) => {
-      const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-      const braces: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.bracePair, {
-          left: 100,
-          top: 400,
-          height: 50,
-          width: 150
-        });
-      braces.name = "Braces";
-      braces.textFrame.textRange.text = "Shape text";
-      braces.textFrame.textRange.font.color = "purple";
-      braces.textFrame.verticalAlignment = PowerPoint.TextVerticalAlignment.middleCentered;
+      eventContexts[0] = body.onCommentAdded.add(onEventHandler);
+      eventContexts[1] = body.onCommentChanged.add(onChangedHandler);
+      eventContexts[2] = body.onCommentDeleted.add(onEventHandler);
+      eventContexts[3] = body.onCommentDeselected.add(onEventHandler);
+      eventContexts[4] = body.onCommentSelected.add(onEventHandler);
+      await context.sync();
 
-      return context.sync();
+      console.log("Event handlers registered.");
     });
-'Word.Alignment:enum':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/paragraph-properties.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
 
 
-    await Word.run(async (context) => {
-      const body: Word.Body = context.document.body;
-      body.clear();
-      body.insertParagraph(
-        "Do you want to create a solution that extends the functionality of Word? You can use the Office Add-ins platform to extend Word clients running on the web, on a Windows desktop, or on a Mac.",
-        "Start"
-      );
-      body.paragraphs
-        .getLast()
-        .insertText(
-          "Use add-in commands to extend the Word UI and launch task panes that run JavaScript that interacts with the content in a Word document. Any code that you can run in a browser can run in a Word add-in. Add-ins that interact with content in a Word document create requests to act on Word objects and synchronize object state.",
-          "Replace"
-        );
-      body.paragraphs.getFirst().alignment = "Left";
-      body.paragraphs.getLast().alignment = Word.Alignment.left;
-    });
-'Word.Annotation:class':
+    async function onEventHandler(event: Word.CommentEventArgs) {
+      // Handler for all events except onCommentChanged.
+      await Word.run(async (context) => {
+        console.log(`${event.type} event detected. Event source: ${event.source}. Comment info:`, event.commentDetails);
+      });
+    }
+Word.Body#paragraphs:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/get-word-count.yaml
+
+
+    // Counts how many times each term appears in the document.
+
+    await Word.run(async (context) => {
+      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
+      paragraphs.load("text");
+      await context.sync();
+
+      // Split up the document text using existing spaces as the delimiter.
+      let text = [];
+      paragraphs.items.forEach((item) => {
+        let paragraph = item.text.trim();
+        if (paragraph) {
+          paragraph.split(" ").forEach((term) => {
+            let currentTerm = term.trim();
+            if (currentTerm) {
+              text.push(currentTerm);
+            }
+          });
+        }
+      });
+
+      // Determine the list of unique terms.
+      let makeTextDistinct = new Set(text);
+      let distinctText = Array.from(makeTextDistinct);
+      let allSearchResults = [];
 
+      for (let i = 0; i < distinctText.length; i++) {
+        let results = context.document.body.search(distinctText[i], { matchCase: true, matchWholeWord: true });
+        results.load("text");
 
-    // Accepts the first annotation found in the selected paragraph.
+        // Map each search term with its results.
+        let correlatedResults = {
+          searchTerm: distinctText[i],
+          hits: results
+        };
 
-    await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
-      annotations.load("id,state,critiqueAnnotation");
+        allSearchResults.push(correlatedResults);
+      }
 
       await context.sync();
 
-      for (let i = 0; i < annotations.items.length; i++) {
-        const annotation: Word.Annotation = annotations.items[i];
-
-        if (annotation.state === Word.AnnotationState.created) {
-          console.log(`Accepting ID ${annotation.id}...`);
-          annotation.critiqueAnnotation.accept();
+      // Display the count for each search term.
+      allSearchResults.forEach((result) => {
+        let length = result.hits.items.length;
 
-          await context.sync();
-          break;
-        }
-      }
+        console.log("Search term: " + result.searchTerm + " => Count: " + length);
+      });
     });
-'Word.Annotation#delete:member(1)':
+Word.Body#shapes:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
-    // Deletes all annotations found in the selected paragraph.
 
     await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
-      annotations.load("id");
-
+      // Gets text boxes in the main document.
+      const shapes: Word.ShapeCollection = context.document.body.shapes;
+      shapes.load();
       await context.sync();
 
-      const ids = [];
-      for (let i = 0; i < annotations.items.length; i++) {
-        const annotation: Word.Annotation = annotations.items[i];
-
-        ids.push(annotation.id);
-        annotation.delete();
+      if (shapes.items.length > 0) {
+        console.log(`Number of shapes found in the main document: ${shapes.items.length}`);
+        shapes.items.forEach(function (shape, index) {
+          if (shape.type === Word.ShapeType.textBox) {
+            console.log(`Shape ${index} in the main document has a text box. Properties:`, shape);
+          } else {
+            console.log(`Shape ${index} in the main document doesn't have a text box.`);
+          }
+        });
+      } else {
+        console.log("No shapes found in the main document.");
       }
-
-      await context.sync();
-
-      console.log("Annotations deleted:", ids);
     });
-'Word.Annotation#critiqueAnnotation:member':
+Word.Body#tables:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/table-cell-access.yaml
 
 
-    // Gets annotations found in the selected paragraph.
+    // Gets the content of the first cell in the first table.
 
     await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
-      annotations.load("id,state,critiqueAnnotation");
+      const firstCell: Word.Body = context.document.body.tables.getFirst().getCell(0, 0).body;
+      firstCell.load("text");
 
       await context.sync();
-
-      console.log("Annotations found:");
-
-      for (let i = 0; i < annotations.items.length; i++) {
-        const annotation: Word.Annotation = annotations.items[i];
-
-        console.log(`ID ${annotation.id} - state '${annotation.state}':`, annotation.critiqueAnnotation.critique);
-      }
+      console.log("First cell's text is: " + firstCell.text);
     });
-'Word.Annotation#id:member':
+Word.Body#text:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
 
 
-    // Accepts the first annotation found in the selected paragraph.
+    // Gets the text content of the body.
 
-    await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
-      annotations.load("id,state,critiqueAnnotation");
+    // Run a batch operation against the Word object model.
 
-      await context.sync();
+    await Word.run(async (context) => {
+      // Create a proxy object for the document body.
+      const body: Word.Body = context.document.body;
 
-      for (let i = 0; i < annotations.items.length; i++) {
-        const annotation: Word.Annotation = annotations.items[i];
+      // Queue a command to load the text in document body.
+      body.load("text");
 
-        if (annotation.state === Word.AnnotationState.created) {
-          console.log(`Accepting ID ${annotation.id}...`);
-          annotation.critiqueAnnotation.accept();
+      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
+      await context.sync();
 
-          await context.sync();
-          break;
-        }
-      }
+      console.log("Body contents (text): " + body.text);
     });
-'Word.Annotation#state:member':
+Word.Body#type:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
 
 
-    // Rejects the last annotation found in the selected paragraph.
+    // Gets the referenced note's item type and body type, which are both
+    "Footnote".
 
     await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
-      annotations.load("id,state,critiqueAnnotation");
-
+      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
+      footnotes.load("items");
       await context.sync();
 
-      for (let i = annotations.items.length - 1; i >= 0; i--) {
-        const annotation: Word.Annotation = annotations.items[i];
+      const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value;
+      const mark = (referenceNumber as number) - 1;
+      const item: Word.NoteItem = footnotes.items[mark];
+      console.log(`Note type of footnote ${referenceNumber}: ${item.type}`);
 
-        if (annotation.state === Word.AnnotationState.created) {
-          console.log(`Rejecting ID ${annotation.id}...`);
-          annotation.critiqueAnnotation.reject();
+      item.body.load("type");
+      await context.sync();
 
-          await context.sync();
-          break;
-        }
-      }
+      console.log(`Body type of note: ${item.body.type}`);
     });
-'Word.AnnotationClickedEventArgs:interface':
+Word.BodyType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
 
 
-    // Registers event handlers.
+    // Gets the referenced note's item type and body type, which are both
+    "Footnote".
 
     await Word.run(async (context) => {
-      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
-      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
+      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
+      footnotes.load("items");
+      await context.sync();
 
-      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
-      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
-      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
-      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
-      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
+      const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value;
+      const mark = (referenceNumber as number) - 1;
+      const item: Word.NoteItem = footnotes.items[mark];
+      console.log(`Note type of footnote ${referenceNumber}: ${item.type}`);
 
+      item.body.load("type");
       await context.sync();
 
-      console.log("Event handlers registered.");
+      console.log(`Body type of note: ${item.body.type}`);
     });
+Word.Border:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
 
 
-    async function onClickedHandler(args: Word.AnnotationClickedEventArgs) {
-      await Word.run(async (context) => {
-        const annotation: Word.Annotation = context.document.getAnnotationById(args.id);
-        annotation.load("critiqueAnnotation");
+    // Updates border properties (e.g., type, width, color) of the specified
+    style.
+
+    await Word.run(async (context) => {
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
+      if (styleName == "") {
+        console.warn("Enter a style name to update border properties.");
+        return;
+      }
+
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
+      style.load();
+      await context.sync();
 
+      if (style.isNullObject) {
+        console.warn(`There's no existing style with the name '${styleName}'.`);
+      } else {
+        const borders: Word.BorderCollection = style.borders;
+        borders.load("items");
         await context.sync();
 
-        console.log(`AnnotationClicked: ID ${args.id}:`, annotation.critiqueAnnotation.critique);
-      });
-    }
-'Word.AnnotationCollection:class':
+        borders.outsideBorderType = Word.BorderType.dashed;
+        borders.outsideBorderWidth = Word.BorderWidth.pt025;
+        borders.outsideBorderColor = "green";
+        console.log("Updated outside borders.");
+      }
+    });
+Word.BorderCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
 
 
-    // Gets annotations found in the selected paragraph.
+    // Updates border properties (e.g., type, width, color) of the specified
+    style.
 
     await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
-      annotations.load("id,state,critiqueAnnotation");
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
+      if (styleName == "") {
+        console.warn("Enter a style name to update border properties.");
+        return;
+      }
 
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
+      style.load();
       await context.sync();
 
-      console.log("Annotations found:");
-
-      for (let i = 0; i < annotations.items.length; i++) {
-        const annotation: Word.Annotation = annotations.items[i];
+      if (style.isNullObject) {
+        console.warn(`There's no existing style with the name '${styleName}'.`);
+      } else {
+        const borders: Word.BorderCollection = style.borders;
+        borders.load("items");
+        await context.sync();
 
-        console.log(`ID ${annotation.id} - state '${annotation.state}':`, annotation.critiqueAnnotation.critique);
+        borders.outsideBorderType = Word.BorderType.dashed;
+        borders.outsideBorderWidth = Word.BorderWidth.pt025;
+        borders.outsideBorderColor = "green";
+        console.log("Updated outside borders.");
       }
     });
-'Word.AnnotationHoveredEventArgs:interface':
+Word.BorderCollection#outsideBorderColor:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
 
 
-    // Registers event handlers.
+    // Updates border properties (e.g., type, width, color) of the specified
+    style.
 
     await Word.run(async (context) => {
-      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
-      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
-
-      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
-      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
-      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
-      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
-      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
+      if (styleName == "") {
+        console.warn("Enter a style name to update border properties.");
+        return;
+      }
 
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
+      style.load();
       await context.sync();
 
-      console.log("Event handlers registered.");
-    });
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
-
-
-    async function onHoveredHandler(args: Word.AnnotationHoveredEventArgs) {
-      await Word.run(async (context) => {
-        const annotation: Word.Annotation = context.document.getAnnotationById(args.id);
-        annotation.load("critiqueAnnotation");
-
+      if (style.isNullObject) {
+        console.warn(`There's no existing style with the name '${styleName}'.`);
+      } else {
+        const borders: Word.BorderCollection = style.borders;
+        borders.load("items");
         await context.sync();
 
-        console.log(`AnnotationHovered: ID ${args.id}:`, annotation.critiqueAnnotation.critique);
-      });
-    }
-'Word.AnnotationInsertedEventArgs:interface':
+        borders.outsideBorderType = Word.BorderType.dashed;
+        borders.outsideBorderWidth = Word.BorderWidth.pt025;
+        borders.outsideBorderColor = "green";
+        console.log("Updated outside borders.");
+      }
+    });
+Word.BorderCollection#outsideBorderType:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
 
 
-    // Registers event handlers.
+    // Updates border properties (e.g., type, width, color) of the specified
+    style.
 
     await Word.run(async (context) => {
-      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
-      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
-
-      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
-      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
-      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
-      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
-      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
+      if (styleName == "") {
+        console.warn("Enter a style name to update border properties.");
+        return;
+      }
 
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
+      style.load();
       await context.sync();
 
-      console.log("Event handlers registered.");
+      if (style.isNullObject) {
+        console.warn(`There's no existing style with the name '${styleName}'.`);
+      } else {
+        const borders: Word.BorderCollection = style.borders;
+        borders.load("items");
+        await context.sync();
+
+        borders.outsideBorderType = Word.BorderType.dashed;
+        borders.outsideBorderWidth = Word.BorderWidth.pt025;
+        borders.outsideBorderColor = "green";
+        console.log("Updated outside borders.");
+      }
     });
+Word.BorderCollection#outsideBorderWidth:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
 
 
-    async function onInsertedHandler(args: Word.AnnotationInsertedEventArgs) {
-      await Word.run(async (context) => {
-        const annotations = [];
-        for (let i = 0; i < args.ids.length; i++) {
-          let annotation: Word.Annotation = context.document.getAnnotationById(args.ids[i]);
-          annotation.load("id,critiqueAnnotation");
+    // Updates border properties (e.g., type, width, color) of the specified
+    style.
 
-          annotations.push(annotation);
-        }
+    await Word.run(async (context) => {
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
+      if (styleName == "") {
+        console.warn("Enter a style name to update border properties.");
+        return;
+      }
+
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
+      style.load();
+      await context.sync();
 
+      if (style.isNullObject) {
+        console.warn(`There's no existing style with the name '${styleName}'.`);
+      } else {
+        const borders: Word.BorderCollection = style.borders;
+        borders.load("items");
         await context.sync();
 
-        for (let annotation of annotations) {
-          console.log(`AnnotationInserted: ID ${annotation.id}:`, annotation.critiqueAnnotation.critique);
-        }
-      });
-    }
-'Word.AnnotationPopupActionEventArgs:interface':
+        borders.outsideBorderType = Word.BorderType.dashed;
+        borders.outsideBorderWidth = Word.BorderWidth.pt025;
+        borders.outsideBorderColor = "green";
+        console.log("Updated outside borders.");
+      }
+    });
+Word.BorderLocation:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
 
 
-    // Registers event handlers.
+    // Gets border details about the first table in the document.
 
     await Word.run(async (context) => {
-      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
-      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
-
-      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
-      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
-      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
-      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
-      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
-
+      const firstTable: Word.Table = context.document.body.tables.getFirst();
+      const borderLocation = Word.BorderLocation.top;
+      const border: Word.TableBorder = firstTable.getBorder(borderLocation);
+      border.load(["type", "color", "width"]);
       await context.sync();
 
-      console.log("Event handlers registered.");
+      console.log(`Details about the ${borderLocation} border of the first table:`, `- Color: ${border.color}`, `- Type: ${border.type}`, `- Width: ${border.width} points`);
     });
+Word.BorderType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
 
 
-    async function onPopupActionHandler(args:
-    Word.AnnotationPopupActionEventArgs) {
-      await Word.run(async (context) => {
-        let message = `AnnotationPopupAction: ID ${args.id} = `;
-        if (args.action === "Accept") {
-          message += `Accepted: ${args.critiqueSuggestion}`;
-        } else {
-          message += "Rejected";
-        }
+    // Gets border details about the first of the first table in the document.
 
-        console.log(message);
-      });
-    }
-'Word.AnnotationRemovedEventArgs:interface':
+    await Word.run(async (context) => {
+      const firstTable: Word.Table = context.document.body.tables.getFirst();
+      const firstCell: Word.TableCell = firstTable.getCell(0, 0);
+      const borderLocation = "Left";
+      const border: Word.TableBorder = firstCell.getBorder(borderLocation);
+      border.load(["type", "color", "width"]);
+      await context.sync();
+
+      console.log(`Details about the ${borderLocation} border of the first table's first cell:`, `- Color: ${border.color}`, `- Type: ${border.type}`, `- Width: ${border.width} points`);
+    });
+Word.BorderWidth:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
 
 
-    // Registers event handlers.
+    // Updates border properties (e.g., type, width, color) of the specified
+    style.
 
     await Word.run(async (context) => {
-      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
-      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
-
-      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
-      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
-      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
-      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
-      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
+      if (styleName == "") {
+        console.warn("Enter a style name to update border properties.");
+        return;
+      }
 
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
+      style.load();
       await context.sync();
 
-      console.log("Event handlers registered.");
+      if (style.isNullObject) {
+        console.warn(`There's no existing style with the name '${styleName}'.`);
+      } else {
+        const borders: Word.BorderCollection = style.borders;
+        borders.load("items");
+        await context.sync();
+
+        borders.outsideBorderType = Word.BorderType.dashed;
+        borders.outsideBorderWidth = Word.BorderWidth.pt025;
+        borders.outsideBorderColor = "green";
+        console.log("Updated outside borders.");
+      }
     });
+Word.BreakType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-line-and-page-breaks.yaml
 
 
-    async function onRemovedHandler(args: Word.AnnotationRemovedEventArgs) {
-      await Word.run(async (context) => {
-        for (let id of args.ids) {
-          console.log(`AnnotationRemoved: ID ${id}`);
-        }
-      });
-    }
-'Word.AnnotationSet:interface':
+    await Word.run(async (context) => {
+      context.document.body.paragraphs.getFirst().insertBreak(Word.BreakType.page, "After");
+
+      await context.sync();
+      console.log("success");
+    });
+Word.BuiltInStyleName:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-formatted-text.yaml
 
-    // Adds annotations to the selected paragraph.
 
     await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const options: Word.CritiquePopupOptions = {
-        brandingTextResourceId: "PG.TabLabel",
-        subtitleResourceId: "PG.HelpCommand.TipTitle",
-        titleResourceId: "PG.HelpCommand.Label",
-        suggestions: ["suggestion 1", "suggestion 2", "suggestion 3"]
-      };
-      const critique1: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.red,
-        start: 1,
-        length: 3,
-        popupOptions: options
-      };
-      const critique2: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.green,
-        start: 6,
-        length: 1,
-        popupOptions: options
-      };
-      const critique3: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.blue,
-        start: 10,
-        length: 3,
-        popupOptions: options
-      };
-      const critique4: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.lavender,
-        start: 14,
-        length: 3,
-        popupOptions: options
-      };
-      const critique5: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.berry,
-        start: 18,
-        length: 10,
-        popupOptions: options
-      };
-      const annotationSet: Word.AnnotationSet = {
-        critiques: [critique1, critique2, critique3, critique4, critique5]
-      };
+      const sentence: Word.Paragraph = context.document.body.insertParagraph(
+        "To be or not to be",
+        "End"
+      );
 
-      const annotationIds = paragraph.insertAnnotations(annotationSet);
+      // Use styleBuiltIn to use an enumeration of existing styles. If your style is custom make sure to use: range.style = "name of your style";
+      sentence.styleBuiltIn = Word.BuiltInStyleName.intenseReference;
 
       await context.sync();
-
-      console.log("Annotations inserted:", annotationIds.value);
     });
-'Word.AnnotationState:enum':
+Word.Canvas:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-canvases.yaml
 
-    // Accepts the first annotation found in the selected paragraph.
 
     await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
-      annotations.load("id,state,critiqueAnnotation");
-
+      // Inserts a canvas in the document.
+      const canvasShape: Word.Shape = context.document.getSelection().insertCanvas();
+      canvasShape.load();
       await context.sync();
 
-      for (let i = 0; i < annotations.items.length; i++) {
-        const annotation: Word.Annotation = annotations.items[i];
+      canvasShape.select();
+      console.log("Inserted canvas:", canvasShape);
 
-        if (annotation.state === Word.AnnotationState.created) {
-          console.log(`Accepting ID ${annotation.id}...`);
-          annotation.critiqueAnnotation.accept();
+      const canvas: Word.Canvas = canvasShape.canvas;
+      canvas.load("shape,shapes");
+      await context.sync();
 
-          await context.sync();
-          break;
-        }
-      }
+      console.log("Canvas object:", canvas);
     });
-'Word.Application:class':
+Word.Canvas#shapes:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-external-document.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-canvases.yaml
 
 
-    // Updates the text of the current document with the text from another
-    document passed in as a Base64-encoded string.
-
     await Word.run(async (context) => {
-      // Use the Base64-encoded string representation of the selected .docx file.
-      const externalDoc: Word.DocumentCreated = context.application.createDocument(externalDocument);
+      // Gets the first canvas found in the document body.
+      const canvasShape: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.canvas])
+        .getFirstOrNullObject();
+      canvasShape.load();
+      canvasShape.load("canvas/shapes");
       await context.sync();
 
-      const externalDocBody: Word.Body = externalDoc.body;
-      externalDocBody.load("text");
-      await context.sync();
+      if (canvasShape.isNullObject) {
+        console.log("No canvases found in the document body.");
+        return;
+      }
 
-      // Insert the external document's text at the beginning of the current document's body.
-      const externalDocBodyText = externalDocBody.text;
-      const currentDocBody: Word.Body = context.document.body;
-      currentDocBody.insertText(externalDocBodyText, Word.InsertLocation.start);
-      await context.sync();
+      console.log("First canvas found in the document body:", canvasShape);
+      console.log("Shapes associated with the first canvas:", canvasShape.canvas.shapes);
+      canvasShape.select();
     });
-'Word.Application#createDocument:member(1)':
+Word.CellPaddingLocation:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-external-document.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
 
 
-    // Updates the text of the current document with the text from another
-    document passed in as a Base64-encoded string.
+    // Gets cell padding details about the first table in the document.
 
     await Word.run(async (context) => {
-      // Use the Base64-encoded string representation of the selected .docx file.
-      const externalDoc: Word.DocumentCreated = context.application.createDocument(externalDocument);
-      await context.sync();
-
-      const externalDocBody: Word.Body = externalDoc.body;
-      externalDocBody.load("text");
+      const firstTable: Word.Table = context.document.body.tables.getFirst();
+      const cellPaddingLocation = Word.CellPaddingLocation.right;
+      const cellPadding = firstTable.getCellPadding(cellPaddingLocation);
       await context.sync();
 
-      // Insert the external document's text at the beginning of the current document's body.
-      const externalDocBodyText = externalDocBody.text;
-      const currentDocBody: Word.Body = context.document.body;
-      currentDocBody.insertText(externalDocBodyText, Word.InsertLocation.start);
-      await context.sync();
+      console.log(
+        `Cell padding details about the ${cellPaddingLocation} border of the first table: ${cellPadding.value} points`
+      );
     });
-'Word.Application#retrieveStylesFromBase64:member(1)':
+Word.ChangeTrackingMode:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/get-external-styles.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-change-tracking.yaml
 
 
-    // Gets style info from another document passed in as a Base64-encoded
-    string.
+    // Gets the current change tracking mode.
 
     await Word.run(async (context) => {
-      const retrievedStyles = context.application.retrieveStylesFromBase64(externalDocument);
+      const document: Word.Document = context.document;
+      document.load("changeTrackingMode");
       await context.sync();
 
-      console.log("Styles from the other document:", retrievedStyles.value);
+      if (document.changeTrackingMode === Word.ChangeTrackingMode.trackMineOnly) {
+        console.log("Only my changes are being tracked.");
+      } else if (document.changeTrackingMode === Word.ChangeTrackingMode.trackAll) {
+        console.log("Everyone's changes are being tracked.");
+      } else {
+        console.log("No changes are being tracked.");
+      }
     });
-'Word.Body#clear:member(1)':
+Word.ChangeTrackingState:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/get-change-tracking-states.yaml
 
-    // Clears out the content from the document body.
 
-    // Run a batch operation against the Word object model.
+    // Logs the current change tracking states of the content controls.
 
     await Word.run(async (context) => {
-      // Create a proxy object for the document body.
-      const body: Word.Body = context.document.body;
-
-      // Queue a command to clear the contents of the body.
-      body.clear();
-
-      console.log("Cleared the body contents.");
-    });
+      let trackAddedArray: Word.ChangeTrackingState[] = [Word.ChangeTrackingState.added];
+      let trackDeletedArray: Word.ChangeTrackingState[] = [Word.ChangeTrackingState.deleted];
+      let trackNormalArray: Word.ChangeTrackingState[] = [Word.ChangeTrackingState.normal];
 
+      let addedContentControls = context.document.body.getContentControls().getByChangeTrackingStates(trackAddedArray);
+      let deletedContentControls = context.document.body
+        .getContentControls()
+        .getByChangeTrackingStates(trackDeletedArray);
+      let normalContentControls = context.document.body.getContentControls().getByChangeTrackingStates(trackNormalArray);
 
-    // The Silly stories add-in sample shows how the clear method can be used to
-    clear the contents of a document.
+      addedContentControls.load();
+      deletedContentControls.load();
+      normalContentControls.load();
+      await context.sync();
 
-    // https://aka.ms/sillystorywordaddin
-'Word.Body#getComments:member(1)':
+      console.log(`Number of content controls in Added state: ${addedContentControls.items.length}`);
+      console.log(`Number of content controls in Deleted state: ${deletedContentControls.items.length}`);
+      console.log(`Number of content controls in Normal state: ${normalContentControls.items.length}`);
+    });
+Word.ChangeTrackingVersion:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-change-tracking.yaml
 
 
-    // Gets the comments in the document body.
+    // Gets the reviewed text.
 
     await Word.run(async (context) => {
-      const comments: Word.CommentCollection = context.document.body.getComments();
+      const range: Word.Range = context.document.getSelection();
+      const before = range.getReviewedText(Word.ChangeTrackingVersion.original);
+      const after = range.getReviewedText(Word.ChangeTrackingVersion.current);
 
-      // Load objects to log in the console.
-      comments.load();
       await context.sync();
 
-      console.log("All comments:", comments);
+      console.log("Reviewed text (before):", before.value, "Reviewed text (after):", after.value);
     });
-'Word.Body#getHtml:member(1)':
+Word.CheckboxContentControl:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
 
-    // Gets the HTML that represents the content of the body.
 
-    // Run a batch operation against the Word object model.
+    // Toggles the isChecked property on all checkbox content controls.
 
     await Word.run(async (context) => {
-      // Create a proxy object for the document body.
-      const body: Word.Body = context.document.body;
-
-      // Queue a command to get the HTML contents of the body.
-      const bodyHTML = body.getHtml();
+      let contentControls = context.document.getContentControls({
+        types: [Word.ContentControlType.checkBox]
+      });
+      contentControls.load("items");
 
-      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
       await context.sync();
 
-      console.log("Body contents (HTML): " + bodyHTML.value);
-    });
-'Word.Body#getOoxml:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
+      const length = contentControls.items.length;
+      console.log(`Number of checkbox content controls: ${length}`);
 
+      if (length <= 0) {
+        return;
+      }
 
-    // Gets the OOXML that represents the content of the body.
+      const checkboxContentControls = [];
+      for (let i = 0; i < length; i++) {
+        let contentControl = contentControls.items[i];
+        contentControl.load("id,checkboxContentControl/isChecked");
+        checkboxContentControls.push(contentControl);
+      }
 
-    // Run a batch operation against the Word object model.
+      await context.sync();
 
-    await Word.run(async (context) => {
-      // Create a proxy object for the document body.
-      const body: Word.Body = context.document.body;
+      console.log("isChecked state before:");
+      const updatedCheckboxContentControls = [];
+      for (let i = 0; i < checkboxContentControls.length; i++) {
+        const currentCheckboxContentControl = checkboxContentControls[i];
+        const isCheckedBefore = currentCheckboxContentControl.checkboxContentControl.isChecked;
+        console.log(`id: ${currentCheckboxContentControl.id} ... isChecked: ${isCheckedBefore}`);
 
-      // Queue a command to get the OOXML contents of the body.
-      const bodyOOXML = body.getOoxml();
+        currentCheckboxContentControl.checkboxContentControl.isChecked = !isCheckedBefore;
+        currentCheckboxContentControl.load("id,checkboxContentControl/isChecked");
+        updatedCheckboxContentControls.push(currentCheckboxContentControl);
+      }
 
-      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
       await context.sync();
 
-      console.log("Body contents (OOXML): " + bodyOOXML.value);
+      console.log("isChecked state after:");
+      for (let i = 0; i < updatedCheckboxContentControls.length; i++) {
+        const currentCheckboxContentControl = updatedCheckboxContentControls[i];
+        console.log(
+          `id: ${currentCheckboxContentControl.id} ... isChecked: ${currentCheckboxContentControl.checkboxContentControl.isChecked}`
+        );
+      }
     });
-'Word.Body#getTrackedChanges:member(1)':
+Word.CloseBehavior:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-tracked-changes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/save-close.yaml
 
 
-    // Gets all tracked changes.
+    // Closes the document after saving.
 
     await Word.run(async (context) => {
-      const body: Word.Body = context.document.body;
-      const trackedChanges: Word.TrackedChangeCollection = body.getTrackedChanges();
-      trackedChanges.load();
-      await context.sync();
-
-      console.log(trackedChanges);
+      context.document.close(Word.CloseBehavior.save);
     });
-'Word.Body#insertBreak:member(1)':
+Word.ComboBoxContentControl:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml
 
 
-    // Inserts a page break at the beginning of the document.
-
-    // Run a batch operation against the Word object model.
+    // Places a combo box content control at the end of the selection.
 
     await Word.run(async (context) => {
-      // Create a proxy object for the document body.
-      const body: Word.Body = context.document.body;
-
-      // Queue a command to insert a page break at the start of the document body.
-      body.insertBreak(Word.BreakType.page, Word.InsertLocation.start);
-
-      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
+      let selection = context.document.getSelection();
+      selection.getRange(Word.RangeLocation.end).insertContentControl(Word.ContentControlType.comboBox);
       await context.sync();
 
-      console.log("Added a page break at the start of the document body.");
+      console.log("Combo box content control inserted at the end of the selection.");
     });
-'Word.Body#insertContentControl:member(1)':
+Word.ComboBoxContentControl#addListItem:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml
 
 
-    // Creates a content control using the document body.
-
-    // Run a batch operation against the Word object model.
+    // Adds the provided list item to the first combo box content control in the
+    selection.
 
     await Word.run(async (context) => {
-      // Create a proxy object for the document body.
-      const body: Word.Body = context.document.body;
+      const listItemText = (document.getElementById("item-to-add") as HTMLInputElement).value.trim();
+      const selectedRange: Word.Range = context.document.getSelection();
+      let selectedContentControl = selectedRange
+        .getContentControls({
+          types: [Word.ContentControlType.comboBox]
+        })
+        .getFirstOrNullObject();
+      selectedContentControl.load("id,comboBoxContentControl");
+      await context.sync();
 
-      // Queue a command to wrap the body in a content control.
-      body.insertContentControl();
+      if (selectedContentControl.isNullObject) {
+        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
+        parentContentControl.load("id,type,comboBoxContentControl");
+        await context.sync();
 
-      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.comboBox) {
+          console.warn("No combo box content control is currently selected.");
+          return;
+        } else {
+          selectedContentControl = parentContentControl;
+        }
+      }
+
+      selectedContentControl.comboBoxContentControl.addListItem(listItemText);
       await context.sync();
 
-      console.log("Wrapped the body in a content control.");
+      console.log(`List item added to control with ID ${selectedContentControl.id}: ${listItemText}`);
     });
-'Word.Body#insertFileFromBase64:member(1)':
+Word.ComboBoxContentControl#deleteAllListItems:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml
 
 
-    // Inserts the body from the external document at the beginning of this
-    document.
-
-    // Run a batch operation against the Word object model.
+    // Deletes the list items from first combo box content control found in the
+    selection.
 
     await Word.run(async (context) => {
-      // Create a proxy object for the document body.
-      const body: Word.Body = context.document.body;
+      const selectedRange: Word.Range = context.document.getSelection();
+      let selectedContentControl = selectedRange
+        .getContentControls({
+          types: [Word.ContentControlType.comboBox]
+        })
+        .getFirstOrNullObject();
+      selectedContentControl.load("id,comboBoxContentControl");
+      await context.sync();
 
-      // Queue a command to insert the Base64-encoded string representation of the body of the selected .docx file at the beginning of the current document.
-      body.insertFileFromBase64(externalDocument, Word.InsertLocation.start);
+      if (selectedContentControl.isNullObject) {
+        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
+        parentContentControl.load("id,type,comboBoxContentControl");
+        await context.sync();
 
-      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.comboBox) {
+          console.warn("No combo box content control is currently selected.");
+          return;
+        } else {
+          selectedContentControl = parentContentControl;
+        }
+      }
+
+      console.log(`About to delete the list from the combo box content control with ID ${selectedContentControl.id}`);
+      selectedContentControl.comboBoxContentControl.deleteAllListItems();
       await context.sync();
 
-      console.log("Added Base64-encoded text to the beginning of the document body.");
+      console.log("Deleted the list from the combo box content control.");
     });
-'Word.Body#insertHtml:member(1)':
+Word.ComboBoxContentControl#listItems:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml
 
 
-    // Inserts the HTML at the beginning of this document.
-
-    // Run a batch operation against the Word object model.
+    // Deletes the provided list item from the first combo box content control
+    in the selection.
 
     await Word.run(async (context) => {
-      // Create a proxy object for the document body.
-      const body: Word.Body = context.document.body;
+      const listItemText = (document.getElementById("item-to-delete") as HTMLInputElement).value.trim();
+      const selectedRange: Word.Range = context.document.getSelection();
+      let selectedContentControl = selectedRange
+        .getContentControls({
+          types: [Word.ContentControlType.comboBox]
+        })
+        .getFirstOrNullObject();
+      selectedContentControl.load("id,comboBoxContentControl");
+      await context.sync();
+
+      if (selectedContentControl.isNullObject) {
+        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
+        parentContentControl.load("id,type,comboBoxContentControl");
+        await context.sync();
+
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.comboBox) {
+          console.warn("No combo box content control is currently selected.");
+          return;
+        } else {
+          selectedContentControl = parentContentControl;
+        }
+      }
+
+      let selectedComboBox: Word.ComboBoxContentControl = selectedContentControl.comboBoxContentControl;
+      selectedComboBox.listItems.load("items/*");
+      await context.sync();
 
-      // Queue a command to insert HTML at the beginning of the document.
-      body.insertHtml("<strong>This is text inserted with body.insertHtml()</strong>", Word.InsertLocation.start);
+      let listItems: Word.ContentControlListItemCollection = selectedContentControl.comboBoxContentControl.listItems;
+      let itemToDelete: Word.ContentControlListItem = listItems.items.find((item) => item.displayText === listItemText);
+      if (!itemToDelete) {
+        console.warn(`List item doesn't exist in control with ID ${selectedContentControl.id}: ${listItemText}`);
+        return;
+      }
 
-      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
+      itemToDelete.delete();
       await context.sync();
 
-      console.log("HTML added to the beginning of the document body.");
+      console.log(`List item deleted from control with ID ${selectedContentControl.id}: ${listItemText}`);
     });
-'Word.Body#insertInlinePictureFromBase64:member(1)':
+Word.Comment:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
-    // Inserts an image inline at the beginning of this document.
 
-    // Run a batch operation against the Word object model.
+    // Sets a comment on the selected content.
 
     await Word.run(async (context) => {
-      // Create a proxy object for the document body.
-      const body: Word.Body = context.document.body;
-
-      // Base64-encoded image to insert inline.
-      const base64EncodedImg =
-        "iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAIAAAAxEEnAAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACFSURBVDhPtY1BEoQwDMP6/0+XgIMTBAeYoTqso9Rkx1zG+tNj1H94jgGzeNSjteO5vtQQuG2seO0av8LzGbe3anzRoJ4ybm/VeKEerAEbAUpW4aWQCmrGFWykRzGBCnYy2ha3oAIq2MloW9yCCqhgJ6NtcQsqoIKdjLbFLaiACnYyf2fODbrjZcXfr2F4AAAAAElFTkSuQmCC";
-
-      // Queue a command to insert a Base64-encoded image at the beginning of the current document.
-      body.insertInlinePictureFromBase64(base64EncodedImg, Word.InsertLocation.start);
+      const text = (document.getElementById("comment-text") as HTMLInputElement).value;
+      const comment: Word.Comment = context.document.getSelection().insertComment(text);
 
-      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
+      // Load object to log in the console.
+      comment.load();
       await context.sync();
 
-      console.log("Added a Base64-encoded image to the beginning of the document body.");
+      console.log("Comment inserted:", comment);
     });
-'Word.Body#insertOoxml:member(1)':
+Word.Comment#delete:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
-    // Inserts OOXML at the beginning of this document.
 
-    // Run a batch operation against the Word object model.
+    // Deletes the first comment in the selected content.
 
     await Word.run(async (context) => {
-      // Create a proxy object for the document body.
-      const body: Word.Body = context.document.body;
-
-      // Queue a command to insert OOXML at the beginning of the body.
-      body.insertOoxml(
-        "<pkg:package xmlns:pkg='http://schemas.microsoft.com/office/2006/xmlPackage'><pkg:part pkg:name='/_rels/.rels' pkg:contentType='application/vnd.openxmlformats-package.relationships+xml' pkg:padding='512'><pkg:xmlData><Relationships xmlns='http://schemas.openxmlformats.org/package/2006/relationships'><Relationship Id='rId1' Type='http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument' Target='word/document.xml'/></Relationships></pkg:xmlData></pkg:part><pkg:part pkg:name='/word/document.xml' pkg:contentType='application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml'><pkg:xmlData><w:document xmlns:w='http://schemas.openxmlformats.org/wordprocessingml/2006/main' ><w:body><w:p><w:pPr><w:spacing w:before='360' w:after='0' w:line='480' w:lineRule='auto'/><w:rPr><w:color w:val='70AD47' w:themeColor='accent6'/><w:sz w:val='28'/></w:rPr></w:pPr><w:r><w:rPr><w:color w:val='70AD47' w:themeColor='accent6'/><w:sz w:val='28'/></w:rPr><w:t>This text has formatting directly applied to achieve its font size, color, line spacing, and paragraph spacing.</w:t></w:r></w:p></w:body></w:document></pkg:xmlData></pkg:part></pkg:package>",
-        Word.InsertLocation.start
-      );
-
-      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
+      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
+      comment.delete();
       await context.sync();
 
-      console.log("Added OOXML to the beginning of the document body.");
-    });
-
-
-    // Read "Understand when and how to use Office Open XML in your Word add-in"
-    for guidance on working with OOXML.
-
-    //
-    https://learn.microsoft.com/office/dev/add-ins/word/create-better-add-ins-for-word-with-office-open-xml
-
-
-    // The Word-Add-in-DocumentAssembly sample shows how you can use this API to
-    assemble a document.
+      if (comment.isNullObject) {
+        console.warn("No comments in the selection, so nothing to delete.");
+        return;
+      }
 
-    // https://github.com/OfficeDev/Word-Add-in-DocumentAssembly
-'Word.Body#insertParagraph:member(1)':
+      console.log("Comment deleted.");
+    });
+Word.Comment#getRange:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-formatted-text.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
 
-    await Word.run(async (context) => {
-      // Second sentence, let's insert it as a paragraph after the previously inserted one.
-      const secondSentence: Word.Paragraph = context.document.body.insertParagraph(
-        "This is the first text with a custom style.",
-        "End"
-      );
-      secondSentence.font.set({
-        bold: false,
-        italic: true,
-        name: "Berlin Sans FB",
-        color: "blue",
-        size: 30
-      });
+    // Gets the range of the first comment in the selected content.
 
+    await Word.run(async (context) => {
+      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
+      comment.load("contentRange");
+      const range: Word.Range = comment.getRange();
+      range.load("text");
       await context.sync();
+
+      if (comment.isNullObject) {
+        console.warn("No comments in the selection, so no range to get.");
+        return;
+      }
+
+      console.log(`Comment location: ${range.text}`);
+      const contentRange: Word.CommentContentRange = comment.contentRange;
+      console.log("Comment content range:", contentRange);
     });
-'Word.Body#insertTable:member(1)':
+Word.Comment#reply:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/table-cell-access.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
 
-    await Word.run(async (context) => {
-      // Use a two-dimensional array to hold the initial table values.
-      const data = [
-        ["Tokyo", "Beijing", "Seattle"],
-        ["Apple", "Orange", "Pineapple"]
-      ];
-      const table: Word.Table = context.document.body.insertTable(2, 3, "Start", data);
-      table.styleBuiltIn = Word.BuiltInStyleName.gridTable5Dark_Accent2;
-      table.styleFirstColumn = false;
+    // Replies to the first active comment in the selected content.
 
+    await Word.run(async (context) => {
+      const text = (document.getElementById("reply-text") as HTMLInputElement).value;
+      const comments: Word.CommentCollection = context.document.getSelection().getComments();
+      comments.load("items");
       await context.sync();
+
+      const firstActiveComment: Word.Comment = comments.items.find((item) => item.resolved !== true);
+      if (firstActiveComment) {
+        const reply: Word.CommentReply = firstActiveComment.reply(text);
+        console.log("Reply added.");
+      } else {
+        console.warn("No active comment was found in the selection, so couldn't reply.");
+      }
     });
-'Word.Body#insertText:member(1)':
+Word.Comment#content:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
-    // Inserts text at the beginning of this document.
 
-    // Run a batch operation against the Word object model.
+    // Edits the first active comment in the selected content.
 
     await Word.run(async (context) => {
-      // Create a proxy object for the document body.
-      const body: Word.Body = context.document.body;
+      const text = (document.getElementById("edit-comment-text") as HTMLInputElement).value;
+      const comments: Word.CommentCollection = context.document.getSelection().getComments();
+      comments.load("items");
+      await context.sync();
 
-      // Queue a command to insert text at the beginning of the current document.
-      body.insertText('This is text inserted with body.insertText()', Word.InsertLocation.start);
+      const firstActiveComment: Word.Comment = comments.items.find((item) => item.resolved !== true);
+      if (!firstActiveComment) {
+        console.warn("No active comment was found in the selection, so couldn't edit.");
+        return;
+      }
 
-      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
+      firstActiveComment.content = text;
+
+      // Load object to log in the console.
+      firstActiveComment.load();
       await context.sync();
 
-      console.log("Text added to the beginning of the document body.");
+      console.log("Comment content changed:", firstActiveComment);
     });
-'Word.Body#search:member(1)':
+Word.Comment#contentRange:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/search.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
 
-    // Does a basic text search and highlights matches in the document.
+    // Gets the range of the first comment in the selected content.
 
     await Word.run(async (context) => {
-      const results : Word.RangeCollection = context.document.body.search("extend");
-      results.load("length");
-
+      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
+      comment.load("contentRange");
+      const range: Word.Range = comment.getRange();
+      range.load("text");
       await context.sync();
 
-      // Let's traverse the search results and highlight matches.
-      for (let i = 0; i < results.items.length; i++) {
-        results.items[i].font.highlightColor = "yellow";
+      if (comment.isNullObject) {
+        console.warn("No comments in the selection, so no range to get.");
+        return;
       }
 
-      await context.sync();
+      console.log(`Comment location: ${range.text}`);
+      const contentRange: Word.CommentContentRange = comment.contentRange;
+      console.log("Comment content range:", contentRange);
     });
+Word.Comment#replies:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/search.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
 
-    // Does a wildcard search and highlights matches in the document.
+    // Gets the replies to the first comment in the selected content.
 
     await Word.run(async (context) => {
-      // Construct a wildcard expression and set matchWildcards to true in order to use wildcards.
-      const results : Word.RangeCollection = context.document.body.search("$*.[0-9][0-9]", { matchWildcards: true });
-      results.load("length");
-
+      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
+      comment.load("replies");
       await context.sync();
 
-      // Let's traverse the search results and highlight matches.
-      for (let i = 0; i < results.items.length; i++) {
-        results.items[i].font.highlightColor = "red";
-        results.items[i].font.color = "white";
+      if (comment.isNullObject) {
+        console.warn("No comments in the selection, so no replies to get.");
+        return;
       }
 
-      await context.sync();
+      const replies: Word.CommentReplyCollection = comment.replies;
+      console.log("Replies to the first comment:", replies);
     });
-'Word.Body#select:member(1)':
+Word.Comment#resolved:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
-    // Selects the entire body.
 
-    // Run a batch operation against the Word object model.
+    // Toggles Resolved status of the first comment in the selected content.
 
     await Word.run(async (context) => {
-      // Create a proxy object for the document body.
-      const body: Word.Body = context.document.body;
+      const comment: Word.Comment = context.document
+        .getSelection()
+        .getComments()
+        .getFirstOrNullObject();
+      comment.load("resolved");
+      await context.sync();
 
-      // Queue a command to select the document body.
-      // The Word UI will move to the selected document body.
-      body.select();
+      if (comment.isNullObject) {
+        console.warn("No comments in the selection, so nothing to toggle.");
+        return;
+      }
 
-      console.log("Selected the document body.");
+      // Toggle resolved status.
+      // If the comment is active, set as resolved.
+      // If it's resolved, set resolved to false.
+      const resolvedBefore = comment.resolved;
+      console.log(`Comment Resolved status (before): ${resolvedBefore}`);
+      comment.resolved = !resolvedBefore;
+      comment.load("resolved");
+      await context.sync();
+
+      console.log(`Comment Resolved status (after): ${comment.resolved}`);
     });
-'Word.Body#fields:member':
+Word.CommentChangeType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
 
 
-    // Gets all fields in the document body.
+    // Registers event handlers.
 
     await Word.run(async (context) => {
-      const fields: Word.FieldCollection = context.document.body.fields.load("items");
-
+      const body: Word.Body = context.document.body;
+      body.track();
       await context.sync();
 
-      if (fields.items.length === 0) {
-        console.log("No fields in this document.");
-      } else {
-        fields.load(["code", "result"]);
-        await context.sync();
+      eventContexts[0] = body.onCommentAdded.add(onEventHandler);
+      eventContexts[1] = body.onCommentChanged.add(onChangedHandler);
+      eventContexts[2] = body.onCommentDeleted.add(onEventHandler);
+      eventContexts[3] = body.onCommentDeselected.add(onEventHandler);
+      eventContexts[4] = body.onCommentSelected.add(onEventHandler);
+      await context.sync();
 
-        for (let i = 0; i < fields.items.length; i++) {
-          console.log(`Field ${i + 1}'s code: ${fields.items[i].code}`, `Field ${i + 1}'s result: ${JSON.stringify(fields.items[i].result)}`);
-        }
-      }
+      console.log("Event handlers registered.");
     });
-'Word.Body#font:member':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
+
+
+    async function onChangedHandler(event: Word.CommentEventArgs) {
+      await Word.run(async (context) => {
+        console.log(
+          `${event.type} event detected. ${event.changeType} change made. Event source: ${event.source}. Comment info:`, event.commentDetails
+        );
+      });
+    }
+Word.CommentCollection:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
-    // Gets the style and the font size, font name, and font color properties on
-    the body object.
 
-    // Run a batch operation against the Word object model.
+    // Replies to the first active comment in the selected content.
 
     await Word.run(async (context) => {
-      // Create a proxy object for the document body.
-      const body: Word.Body = context.document.body;
-
-      // Queue a command to load font and style information for the document body.
-      body.load("font/size, font/name, font/color, style");
-
-      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
+      const text = (document.getElementById("reply-text") as HTMLInputElement).value;
+      const comments: Word.CommentCollection = context.document.getSelection().getComments();
+      comments.load("items");
       await context.sync();
 
-      // Show font-related property values on the body object.
-      const results =
-        "Font size: " +
-        body.font.size +
-        "; Font name: " +
-        body.font.name +
-        "; Font color: " +
-        body.font.color +
-        "; Body style: " +
-        body.style;
-
-      console.log(results);
+      const firstActiveComment: Word.Comment = comments.items.find((item) => item.resolved !== true);
+      if (firstActiveComment) {
+        const reply: Word.CommentReply = firstActiveComment.reply(text);
+        console.log("Reply added.");
+      } else {
+        console.warn("No active comment was found in the selection, so couldn't reply.");
+      }
     });
-'Word.Body#footnotes:member':
+Word.CommentCollection#getFirstOrNullObject:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
 
-    // Gets the footnotes in the document body.
+    // Gets the range of the first comment in the selected content.
 
     await Word.run(async (context) => {
-      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
-      footnotes.load("length");
+      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
+      comment.load("contentRange");
+      const range: Word.Range = comment.getRange();
+      range.load("text");
       await context.sync();
 
-      console.log("Number of footnotes in the document body: " + footnotes.items.length);
+      if (comment.isNullObject) {
+        console.warn("No comments in the selection, so no range to get.");
+        return;
+      }
+
+      console.log(`Comment location: ${range.text}`);
+      const contentRange: Word.CommentContentRange = comment.contentRange;
+      console.log("Comment content range:", contentRange);
     });
-'Word.Body#inlinePictures:member':
+Word.CommentCollection#items:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
 
-    // Gets the first image in the document.
+    // Replies to the first active comment in the selected content.
 
     await Word.run(async (context) => {
-      const firstPicture: Word.InlinePicture = context.document.body.inlinePictures.getFirst();
-      firstPicture.load("width, height, imageFormat");
-
+      const text = (document.getElementById("reply-text") as HTMLInputElement).value;
+      const comments: Word.CommentCollection = context.document.getSelection().getComments();
+      comments.load("items");
       await context.sync();
-      console.log(`Image dimensions: ${firstPicture.width} x ${firstPicture.height}`, `Image format: ${firstPicture.imageFormat}`);
-      // Get the image encoded as Base64.
-      const base64 = firstPicture.getBase64ImageSrc();
 
-      await context.sync();
-      console.log(base64.value);
+      const firstActiveComment: Word.Comment = comments.items.find((item) => item.resolved !== true);
+      if (firstActiveComment) {
+        const reply: Word.CommentReply = firstActiveComment.reply(text);
+        console.log("Reply added.");
+      } else {
+        console.warn("No active comment was found in the selection, so couldn't reply.");
+      }
     });
-'Word.Body#lists:member':
+Word.CommentContentRange:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
 
-    // Gets information about the first list in the document.
+    // Gets the range of the first comment in the selected content.
 
     await Word.run(async (context) => {
-      const lists: Word.ListCollection = context.document.body.lists;
-      lists.load("items");
-
+      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
+      comment.load("contentRange");
+      const range: Word.Range = comment.getRange();
+      range.load("text");
       await context.sync();
 
-      if (lists.items.length === 0) {
-        console.warn("There are no lists in this document.");
+      if (comment.isNullObject) {
+        console.warn("No comments in the selection, so no range to get.");
         return;
       }
-      
-      // Get the first list.
-      const list: Word.List = lists.getFirst();
-      list.load("levelTypes,levelExistences");
-
-      await context.sync();
-
-      const levelTypes  = list.levelTypes;
-      console.log("Level types of the first list:");
-      for (let i = 0; i < levelTypes.length; i++) {
-        console.log(`- Level ${i + 1} (index ${i}): ${levelTypes[i]}`);
-      }
 
-      const levelExistences = list.levelExistences;
-      console.log("Level existences of the first list:");
-      for (let i = 0; i < levelExistences.length; i++) {
-        console.log(`- Level ${i + 1} (index ${i}): ${levelExistences[i]}`);
-      }
+      console.log(`Comment location: ${range.text}`);
+      const contentRange: Word.CommentContentRange = comment.contentRange;
+      console.log("Comment content range:", contentRange);
     });
-'Word.Body#onCommentAdded:member':
+Word.CommentDetail:interface:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
@@ -16518,7 +22100,7 @@
         console.log(`${event.type} event detected. Event source: ${event.source}. Comment info:`, event.commentDetails);
       });
     }
-'Word.Body#onCommentChanged:member':
+Word.CommentEventArgs:interface:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
@@ -16552,718 +22134,949 @@
         );
       });
     }
-'Word.Body#onCommentDeleted:member':
+Word.CommentReply:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
 
-    // Registers event handlers.
+    // Replies to the first active comment in the selected content.
 
     await Word.run(async (context) => {
-      const body: Word.Body = context.document.body;
-      body.track();
+      const text = (document.getElementById("reply-text") as HTMLInputElement).value;
+      const comments: Word.CommentCollection = context.document.getSelection().getComments();
+      comments.load("items");
       await context.sync();
 
-      eventContexts[0] = body.onCommentAdded.add(onEventHandler);
-      eventContexts[1] = body.onCommentChanged.add(onChangedHandler);
-      eventContexts[2] = body.onCommentDeleted.add(onEventHandler);
-      eventContexts[3] = body.onCommentDeselected.add(onEventHandler);
-      eventContexts[4] = body.onCommentSelected.add(onEventHandler);
+      const firstActiveComment: Word.Comment = comments.items.find((item) => item.resolved !== true);
+      if (firstActiveComment) {
+        const reply: Word.CommentReply = firstActiveComment.reply(text);
+        console.log("Reply added.");
+      } else {
+        console.warn("No active comment was found in the selection, so couldn't reply.");
+      }
+    });
+Word.CommentReplyCollection:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
+
+
+    // Gets the replies to the first comment in the selected content.
+
+    await Word.run(async (context) => {
+      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
+      comment.load("replies");
       await context.sync();
 
-      console.log("Event handlers registered.");
+      if (comment.isNullObject) {
+        console.warn("No comments in the selection, so no replies to get.");
+        return;
+      }
+
+      const replies: Word.CommentReplyCollection = comment.replies;
+      console.log("Replies to the first comment:", replies);
     });
+Word.CompareTarget:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/compare-documents.yaml
 
 
-    async function onEventHandler(event: Word.CommentEventArgs) {
-      // Handler for all events except onCommentChanged.
-      await Word.run(async (context) => {
-        console.log(`${event.type} event detected. Event source: ${event.source}. Comment info:`, event.commentDetails);
-      });
-    }
-'Word.Body#onCommentDeselected:member':
+    // Compares the current document with a specified external document.
+
+    await Word.run(async (context) => {
+      // Absolute path of an online or local document.
+      const filePath = (document.getElementById("filePath") as HTMLInputElement).value;
+      // Options that configure the compare operation.
+      const options: Word.DocumentCompareOptions = {
+        compareTarget: Word.CompareTarget.compareTargetCurrent,
+        detectFormatChanges: false
+        // Other options you choose...
+        };
+      context.document.compare(filePath, options);
+
+      await context.sync();
+
+      console.log("Differences shown in the current document.");
+    });
+Word.ContentControl#delete:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondeleted-event.yaml
+
+
+    await Word.run(async (context) => {
+      const contentControls: Word.ContentControlCollection = context.document.contentControls.getByTag("forTesting");
+      contentControls.load("items");
+      await context.sync();
+
+      if (contentControls.items.length === 0) {
+        console.log("There are no content controls in this document.");
+      } else {
+        console.log("Control to be deleted:", contentControls.items[0]);
+        contentControls.items[0].delete(false);
+        await context.sync();
+      }
+    });
+Word.ContentControl#resetState:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-content-controls.yaml
+
+
+    // Resets the state of the first content control.
+
+    await Word.run(async (context) => {
+      let firstContentControl = context.document.contentControls.getFirstOrNullObject();
+      await context.sync();
+
+      if (firstContentControl.isNullObject) {
+        console.warn("There are no content controls in this document.");
+        return;
+      }
+
+      firstContentControl.resetState();
+      firstContentControl.load("id");
+      await context.sync();
+
+      console.log(`Reset state of first content control with ID: ${firstContentControl.id}`);
+    });
+Word.ContentControl#set:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-content-controls.yaml
+
+
+    // Adds title and colors to odd and even content controls and changes their
+    appearance.
+
+    await Word.run(async (context) => {
+      // Get the complete sentence (as range) associated with the insertion point.
+      let evenContentControls = context.document.contentControls.getByTag("even");
+      let oddContentControls = context.document.contentControls.getByTag("odd");
+      evenContentControls.load("length");
+      oddContentControls.load("length");
+
+      await context.sync();
+
+      for (let i = 0; i < evenContentControls.items.length; i++) {
+        // Change a few properties and append a paragraph.
+        evenContentControls.items[i].set({
+          color: "red",
+          title: "Odd ContentControl #" + (i + 1),
+          appearance: Word.ContentControlAppearance.tags
+        });
+        evenContentControls.items[i].insertParagraph("This is an odd content control", "End");
+      }
+
+      for (let j = 0; j < oddContentControls.items.length; j++) {
+        // Change a few properties and append a paragraph.
+        oddContentControls.items[j].set({
+          color: "green",
+          title: "Even ContentControl #" + (j + 1),
+          appearance: "Tags"
+        });
+        oddContentControls.items[j].insertHtml("This is an <b>even</b> content control", "End");
+      }
+
+      await context.sync();
+    });
+Word.ContentControl#setState:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-content-controls.yaml
 
 
-    // Registers event handlers.
+    // Sets the state of the first content control.
 
     await Word.run(async (context) => {
-      const body: Word.Body = context.document.body;
-      body.track();
+      const state = ((document.getElementById("state-to-set") as HTMLSelectElement)
+        .value as unknown) as Word.ContentControlState;
+      let firstContentControl = context.document.contentControls.getFirstOrNullObject();
       await context.sync();
 
-      eventContexts[0] = body.onCommentAdded.add(onEventHandler);
-      eventContexts[1] = body.onCommentChanged.add(onChangedHandler);
-      eventContexts[2] = body.onCommentDeleted.add(onEventHandler);
-      eventContexts[3] = body.onCommentDeselected.add(onEventHandler);
-      eventContexts[4] = body.onCommentSelected.add(onEventHandler);
+      if (firstContentControl.isNullObject) {
+        console.warn("There are no content controls in this document.");
+        return;
+      }
+
+      firstContentControl.setState(state);
+      firstContentControl.load("id");
       await context.sync();
 
-      console.log("Event handlers registered.");
+      console.log(`Set state of first content control with ID ${firstContentControl.id} to ${state}.`);
     });
+Word.ContentControl#checkboxContentControl:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
-
-
-    async function onEventHandler(event: Word.CommentEventArgs) {
-      // Handler for all events except onCommentChanged.
-      await Word.run(async (context) => {
-        console.log(`${event.type} event detected. Event source: ${event.source}. Comment info:`, event.commentDetails);
-      });
-    }
-'Word.Body#onCommentSelected:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
 
 
-    // Registers event handlers.
+    // Toggles the isChecked property of the first checkbox content control
+    found in the selection.
 
     await Word.run(async (context) => {
-      const body: Word.Body = context.document.body;
-      body.track();
-      await context.sync();
+      const selectedRange: Word.Range = context.document.getSelection();
+      let selectedContentControl = selectedRange
+        .getContentControls({
+          types: [Word.ContentControlType.checkBox]
+        })
+        .getFirstOrNullObject();
+      selectedContentControl.load("id,checkboxContentControl/isChecked");
 
-      eventContexts[0] = body.onCommentAdded.add(onEventHandler);
-      eventContexts[1] = body.onCommentChanged.add(onChangedHandler);
-      eventContexts[2] = body.onCommentDeleted.add(onEventHandler);
-      eventContexts[3] = body.onCommentDeselected.add(onEventHandler);
-      eventContexts[4] = body.onCommentSelected.add(onEventHandler);
       await context.sync();
 
-      console.log("Event handlers registered.");
-    });
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
+      if (selectedContentControl.isNullObject) {
+        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
+        parentContentControl.load("id,type,checkboxContentControl/isChecked");
+        await context.sync();
+
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.checkBox) {
+          console.warn("No checkbox content control is currently selected.");
+          return;
+        } else {
+          selectedContentControl = parentContentControl;
+        }
+      }
 
+      const isCheckedBefore = selectedContentControl.checkboxContentControl.isChecked;
+      console.log("isChecked state before:", `id: ${selectedContentControl.id} ... isChecked: ${isCheckedBefore}`);
+      selectedContentControl.checkboxContentControl.isChecked = !isCheckedBefore;
+      selectedContentControl.load("id,checkboxContentControl/isChecked");
+      await context.sync();
 
-    async function onEventHandler(event: Word.CommentEventArgs) {
-      // Handler for all events except onCommentChanged.
-      await Word.run(async (context) => {
-        console.log(`${event.type} event detected. Event source: ${event.source}. Comment info:`, event.commentDetails);
-      });
-    }
-'Word.Body#paragraphs:member':
+      console.log(
+        "isChecked state after:",
+        `id: ${selectedContentControl.id} ... isChecked: ${selectedContentControl.checkboxContentControl.isChecked}`
+      );
+    });
+Word.ContentControl#comboBoxContentControl:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/get-word-count.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml
 
 
-    // Counts how many times each term appears in the document.
+    // Adds the provided list item to the first combo box content control in the
+    selection.
 
     await Word.run(async (context) => {
-      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
-      paragraphs.load("text");
+      const listItemText = (document.getElementById("item-to-add") as HTMLInputElement).value.trim();
+      const selectedRange: Word.Range = context.document.getSelection();
+      let selectedContentControl = selectedRange
+        .getContentControls({
+          types: [Word.ContentControlType.comboBox]
+        })
+        .getFirstOrNullObject();
+      selectedContentControl.load("id,comboBoxContentControl");
       await context.sync();
 
-      // Split up the document text using existing spaces as the delimiter.
-      let text = [];
-      paragraphs.items.forEach((item) => {
-        let paragraph = item.text.trim();
-        if (paragraph) {
-          paragraph.split(" ").forEach((term) => {
-            let currentTerm = term.trim();
-            if (currentTerm) {
-              text.push(currentTerm);
-            }
-          });
+      if (selectedContentControl.isNullObject) {
+        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
+        parentContentControl.load("id,type,comboBoxContentControl");
+        await context.sync();
+
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.comboBox) {
+          console.warn("No combo box content control is currently selected.");
+          return;
+        } else {
+          selectedContentControl = parentContentControl;
         }
-      });
+      }
 
-      // Determine the list of unique terms.
-      let makeTextDistinct = new Set(text);
-      let distinctText = Array.from(makeTextDistinct);
-      let allSearchResults = [];
+      selectedContentControl.comboBoxContentControl.addListItem(listItemText);
+      await context.sync();
 
-      for (let i = 0; i < distinctText.length; i++) {
-        let results = context.document.body.search(distinctText[i], { matchCase: true, matchWholeWord: true });
-        results.load("text");
+      console.log(`List item added to control with ID ${selectedContentControl.id}: ${listItemText}`);
+    });
+Word.ContentControl#dropDownListContentControl:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml
 
-        // Map each search term with its results.
-        let correlatedResults = {
-          searchTerm: distinctText[i],
-          hits: results
-        };
 
-        allSearchResults.push(correlatedResults);
-      }
+    // Adds the provided list item to the first dropdown list content control in
+    the selection.
 
+    await Word.run(async (context) => {
+      const listItemText = (document.getElementById("item-to-add") as HTMLInputElement).value.trim();
+      const selectedRange: Word.Range = context.document.getSelection();
+      let selectedContentControl = selectedRange
+        .getContentControls({
+          types: [Word.ContentControlType.dropDownList]
+        })
+        .getFirstOrNullObject();
+      selectedContentControl.load("id,dropDownListContentControl");
       await context.sync();
 
-      // Display the count for each search term.
-      allSearchResults.forEach((result) => {
-        let length = result.hits.items.length;
+      if (selectedContentControl.isNullObject) {
+        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
+        parentContentControl.load("id,type,dropDownListContentControl");
+        await context.sync();
 
-        console.log("Search term: " + result.searchTerm + " => Count: " + length);
-      });
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
+          console.warn("No dropdown list content control is currently selected.");
+          return;
+        } else {
+          selectedContentControl = parentContentControl;
+        }
+      }
+
+      selectedContentControl.dropDownListContentControl.addListItem(listItemText);
+      await context.sync();
+
+      console.log(`List item added to control with ID ${selectedContentControl.id}: ${listItemText}`);
     });
-'Word.Body#tables:member':
+Word.ContentControl#onDataChanged:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/table-cell-access.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondatachanged-event.yaml
 
-    // Gets the content of the first cell in the first table.
 
     await Word.run(async (context) => {
-      const firstCell: Word.Body = context.document.body.tables.getFirst().getCell(0, 0).body;
-      firstCell.load("text");
-
+      const contentControls: Word.ContentControlCollection = context.document.contentControls;
+      contentControls.load("items");
       await context.sync();
-      console.log("First cell's text is: " + firstCell.text);
+
+      // Register the onDataChanged event handler on each content control.
+      if (contentControls.items.length === 0) {
+        console.log("There aren't any content controls in this document so can't register event handlers.");
+      } else {
+        for (let i = 0; i < contentControls.items.length; i++) {
+          eventContexts[i] = contentControls.items[i].onDataChanged.add(contentControlDataChanged);
+          contentControls.items[i].track();
+        }
+
+        await context.sync();
+
+        console.log("Added event handlers for when data is changed in content controls.");
+      }
     });
-'Word.Body#text:member':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondatachanged-event.yaml
 
 
-    // Gets the text content of the body.
+    async function contentControlDataChanged(event:
+    Word.ContentControlDataChangedEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.eventType} event detected. IDs of content controls where data was changed:`, event.ids);
+      });
+    }
+Word.ContentControl#onDeleted:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondeleted-event.yaml
 
-    // Run a batch operation against the Word object model.
 
     await Word.run(async (context) => {
-      // Create a proxy object for the document body.
-      const body: Word.Body = context.document.body;
+      const contentControls: Word.ContentControlCollection = context.document.contentControls;
+      contentControls.load("items");
+      await context.sync();
 
-      // Queue a command to load the text in document body.
-      body.load("text");
+      // Register the onDeleted event handler on each content control.
+      if (contentControls.items.length === 0) {
+        console.log("There aren't any content controls in this document so can't register event handlers.");
+      } else {
+        for (let i = 0; i < contentControls.items.length; i++) {
+          eventContexts[i] = contentControls.items[i].onDeleted.add(contentControlDeleted);
+          contentControls.items[i].track();
+        }
 
-      // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
-      await context.sync();
+        await context.sync();
 
-      console.log("Body contents (text): " + body.text);
+        console.log("Added event handlers for when content controls are deleted.");
+      }
     });
-'Word.Body#type:member':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondeleted-event.yaml
 
 
-    // Gets the referenced note's item type and body type, which are both
-    "Footnote".
+    async function contentControlDeleted(event:
+    Word.ContentControlDeletedEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.eventType} event detected. IDs of content controls that were deleted:`, event.ids);
+      });
+    }
+Word.ContentControl#onEntered:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onentered-event.yaml
+
 
     await Word.run(async (context) => {
-      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
-      footnotes.load("items");
+      const contentControls: Word.ContentControlCollection = context.document.contentControls;
+      contentControls.load("items");
       await context.sync();
 
-      const referenceNumber = $("#input-reference").val();
-      const mark = (referenceNumber as number) - 1;
-      const item: Word.NoteItem = footnotes.items[mark];
-      console.log(`Note type of footnote ${referenceNumber}: ${item.type}`);
+      // Register the onEntered event handler on each content control.
+      if (contentControls.items.length === 0) {
+        console.log("There aren't any content controls in this document so can't register event handlers.");
+      } else {
+        for (let i = 0; i < contentControls.items.length; i++) {
+          eventContexts[i] = contentControls.items[i].onEntered.add(contentControlEntered);
+          contentControls.items[i].track();
+        }
 
-      item.body.load("type");
-      await context.sync();
+        await context.sync();
 
-      console.log(`Body type of note: ${item.body.type}`);
+        console.log("Added event handlers for when the cursor is placed in content controls.");
+      }
     });
-'Word.BodyType:enum':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onentered-event.yaml
 
 
-    // Gets the referenced note's item type and body type, which are both
-    "Footnote".
+    async function contentControlEntered(event:
+    Word.ContentControlEnteredEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.eventType} event detected. ID of content control that was entered: ${event.ids[0]}`);
+      });
+    }
+Word.ContentControl#onExited:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onexited-event.yaml
+
 
     await Word.run(async (context) => {
-      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
-      footnotes.load("items");
+      const contentControls: Word.ContentControlCollection = context.document.contentControls;
+      contentControls.load("items");
       await context.sync();
 
-      const referenceNumber = $("#input-reference").val();
-      const mark = (referenceNumber as number) - 1;
-      const item: Word.NoteItem = footnotes.items[mark];
-      console.log(`Note type of footnote ${referenceNumber}: ${item.type}`);
+      // Register the onExited event handler on each content control.
+      if (contentControls.items.length === 0) {
+        console.log("There aren't any content controls in this document so can't register event handlers.");
+      } else {
+        for (let i = 0; i < contentControls.items.length; i++) {
+          eventContexts[i] = contentControls.items[i].onExited.add(contentControlExited);
+          contentControls.items[i].track();
+        }
 
-      item.body.load("type");
-      await context.sync();
+        await context.sync();
 
-      console.log(`Body type of note: ${item.body.type}`);
+        console.log("Added event handlers for when the cursor is removed from within content controls.");
+      }
     });
-'Word.Border:class':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onexited-event.yaml
 
 
-    // Updates border properties (e.g., type, width, color) of the specified
-    style.
+    async function contentControlExited(event:
+    Word.ContentControlExitedEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.eventType} event detected. ID of content control that was exited: ${event.ids[0]}`);
+      });
+    }
+Word.ContentControl#onSelectionChanged:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml
 
-    await Word.run(async (context) => {
-      const styleName = $("#style-name").val() as string;
-      if (styleName == "") {
-        console.warn("Enter a style name to update border properties.");
-        return;
-      }
 
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load();
+    await Word.run(async (context) => {
+      const contentControls: Word.ContentControlCollection = context.document.contentControls;
+      contentControls.load("items");
       await context.sync();
 
-      if (style.isNullObject) {
-        console.warn(`There's no existing style with the name '${styleName}'.`);
+      if (contentControls.items.length === 0) {
+        console.log("There aren't any content controls in this document so can't register event handlers.");
       } else {
-        const borders: Word.BorderCollection = style.borders;
-        borders.load("items");
+        for (let i = 0; i < contentControls.items.length; i++) {
+          eventContexts[i] = contentControls.items[i].onSelectionChanged.add(contentControlSelectionChanged);
+          contentControls.items[i].track();
+        }
+
         await context.sync();
 
-        borders.outsideBorderType = Word.BorderType.dashed;
-        borders.outsideBorderWidth = Word.BorderWidth.pt025;
-        borders.outsideBorderColor = "green";
-        console.log("Updated outside borders.");
+        console.log("Added event handlers for when selections are changed in content controls.");
       }
     });
-'Word.BorderCollection:class':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml
 
 
-    // Updates border properties (e.g., type, width, color) of the specified
-    style.
+    async function contentControlSelectionChanged(event:
+    Word.ContentControlSelectionChangedEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.eventType} event detected. IDs of content controls where selection was changed:`, event.ids);
+      });
+    }
+Word.ContentControl#tag:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-content-controls.yaml
+
+
+    // Traverses each paragraph of the document and wraps a content control on
+    each with either a even or odd tags.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name").val() as string;
-      if (styleName == "") {
-        console.warn("Enter a style name to update border properties.");
-        return;
-      }
+      let paragraphs = context.document.body.paragraphs;
+      paragraphs.load("$none"); // Don't need any properties; just wrap each paragraph with a content control.
 
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load();
       await context.sync();
 
-      if (style.isNullObject) {
-        console.warn(`There's no existing style with the name '${styleName}'.`);
-      } else {
-        const borders: Word.BorderCollection = style.borders;
-        borders.load("items");
-        await context.sync();
-
-        borders.outsideBorderType = Word.BorderType.dashed;
-        borders.outsideBorderWidth = Word.BorderWidth.pt025;
-        borders.outsideBorderColor = "green";
-        console.log("Updated outside borders.");
+      for (let i = 0; i < paragraphs.items.length; i++) {
+        let contentControl = paragraphs.items[i].insertContentControl();
+        // For even, tag "even".
+        if (i % 2 === 0) {
+          contentControl.tag = "even";
+        } else {
+          contentControl.tag = "odd";
+        }
       }
+      console.log("Content controls inserted: " + paragraphs.items.length);
+
+      await context.sync();
     });
-'Word.BorderCollection#outsideBorderColor:member':
+Word.ContentControlAddedEventArgs:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onadded-event.yaml
 
 
-    // Updates border properties (e.g., type, width, color) of the specified
-    style.
+    // Registers the onAdded event handler on the document.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name").val() as string;
-      if (styleName == "") {
-        console.warn("Enter a style name to update border properties.");
-        return;
-      }
-
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load();
+      eventContext = context.document.onContentControlAdded.add(contentControlAdded);
       await context.sync();
 
-      if (style.isNullObject) {
-        console.warn(`There's no existing style with the name '${styleName}'.`);
-      } else {
-        const borders: Word.BorderCollection = style.borders;
-        borders.load("items");
-        await context.sync();
-
-        borders.outsideBorderType = Word.BorderType.dashed;
-        borders.outsideBorderWidth = Word.BorderWidth.pt025;
-        borders.outsideBorderColor = "green";
-        console.log("Updated outside borders.");
-      }
+      console.log("Added event handler for when content controls are added.");
     });
-'Word.BorderCollection#outsideBorderType:member':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onadded-event.yaml
 
 
-    // Updates border properties (e.g., type, width, color) of the specified
-    style.
+    async function contentControlAdded(event: Word.ContentControlAddedEventArgs)
+    {
+      await Word.run(async (context) => {
+        console.log(`${event.eventType} event detected. IDs of content controls that were added:`, event.ids);
+      });
+    }
+Word.ContentControlAppearance:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-content-controls.yaml
+
+
+    // Adds title and colors to odd and even content controls and changes their
+    appearance.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name").val() as string;
-      if (styleName == "") {
-        console.warn("Enter a style name to update border properties.");
-        return;
-      }
+      // Get the complete sentence (as range) associated with the insertion point.
+      let evenContentControls = context.document.contentControls.getByTag("even");
+      let oddContentControls = context.document.contentControls.getByTag("odd");
+      evenContentControls.load("length");
+      oddContentControls.load("length");
 
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load();
       await context.sync();
 
-      if (style.isNullObject) {
-        console.warn(`There's no existing style with the name '${styleName}'.`);
-      } else {
-        const borders: Word.BorderCollection = style.borders;
-        borders.load("items");
-        await context.sync();
+      for (let i = 0; i < evenContentControls.items.length; i++) {
+        // Change a few properties and append a paragraph.
+        evenContentControls.items[i].set({
+          color: "red",
+          title: "Odd ContentControl #" + (i + 1),
+          appearance: Word.ContentControlAppearance.tags
+        });
+        evenContentControls.items[i].insertParagraph("This is an odd content control", "End");
+      }
 
-        borders.outsideBorderType = Word.BorderType.dashed;
-        borders.outsideBorderWidth = Word.BorderWidth.pt025;
-        borders.outsideBorderColor = "green";
-        console.log("Updated outside borders.");
+      for (let j = 0; j < oddContentControls.items.length; j++) {
+        // Change a few properties and append a paragraph.
+        oddContentControls.items[j].set({
+          color: "green",
+          title: "Even ContentControl #" + (j + 1),
+          appearance: "Tags"
+        });
+        oddContentControls.items[j].insertHtml("This is an <b>even</b> content control", "End");
       }
+
+      await context.sync();
     });
-'Word.BorderCollection#outsideBorderWidth:member':
+Word.ContentControlCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/doc-assembly.yaml
 
-    // Updates border properties (e.g., type, width, color) of the specified
-    style.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name").val() as string;
-      if (styleName == "") {
-        console.warn("Enter a style name to update border properties.");
-        return;
-      }
-
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load();
-      await context.sync();
+        const contentControls: Word.ContentControlCollection = context.document.contentControls.getByTag("customer");
+        contentControls.load("text");
 
-      if (style.isNullObject) {
-        console.warn(`There's no existing style with the name '${styleName}'.`);
-      } else {
-        const borders: Word.BorderCollection = style.borders;
-        borders.load("items");
         await context.sync();
 
-        borders.outsideBorderType = Word.BorderType.dashed;
-        borders.outsideBorderWidth = Word.BorderWidth.pt025;
-        borders.outsideBorderColor = "green";
-        console.log("Updated outside borders.");
-      }
+        for (let i = 0; i < contentControls.items.length; i++) {
+          contentControls.items[i].insertText("Fabrikam", "Replace");
+        }
+
+        await context.sync();
     });
-'Word.BorderLocation:enum':
+Word.ContentControlCollection#getByTag:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/doc-assembly.yaml
 
-    // Gets border details about the first table in the document.
 
     await Word.run(async (context) => {
-      const firstTable: Word.Table = context.document.body.tables.getFirst();
-      const borderLocation = Word.BorderLocation.top;
-      const border: Word.TableBorder = firstTable.getBorder(borderLocation);
-      border.load(["type", "color", "width"]);
-      await context.sync();
+        const contentControls: Word.ContentControlCollection = context.document.contentControls.getByTag("customer");
+        contentControls.load("text");
+
+        await context.sync();
 
-      console.log(`Details about the ${borderLocation} border of the first table:`, `- Color: ${border.color}`, `- Type: ${border.type}`, `- Width: ${border.width} points`);
+        for (let i = 0; i < contentControls.items.length; i++) {
+          contentControls.items[i].insertText("Fabrikam", "Replace");
+        }
+
+        await context.sync();
     });
-'Word.BorderType:enum':
+Word.ContentControlCollection#getFirstOrNullObject:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
 
 
-    // Gets border details about the first of the first table in the document.
+    // Toggles the isChecked property of the first checkbox content control
+    found in the selection.
 
     await Word.run(async (context) => {
-      const firstTable: Word.Table = context.document.body.tables.getFirst();
-      const firstCell: Word.TableCell = firstTable.getCell(0, 0);
-      const borderLocation = "Left";
-      const border: Word.TableBorder = firstCell.getBorder(borderLocation);
-      border.load(["type", "color", "width"]);
+      const selectedRange: Word.Range = context.document.getSelection();
+      let selectedContentControl = selectedRange
+        .getContentControls({
+          types: [Word.ContentControlType.checkBox]
+        })
+        .getFirstOrNullObject();
+      selectedContentControl.load("id,checkboxContentControl/isChecked");
+
       await context.sync();
 
-      console.log(`Details about the ${borderLocation} border of the first table's first cell:`, `- Color: ${border.color}`, `- Type: ${border.type}`, `- Width: ${border.width} points`);
+      if (selectedContentControl.isNullObject) {
+        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
+        parentContentControl.load("id,type,checkboxContentControl/isChecked");
+        await context.sync();
+
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.checkBox) {
+          console.warn("No checkbox content control is currently selected.");
+          return;
+        } else {
+          selectedContentControl = parentContentControl;
+        }
+      }
+
+      const isCheckedBefore = selectedContentControl.checkboxContentControl.isChecked;
+      console.log("isChecked state before:", `id: ${selectedContentControl.id} ... isChecked: ${isCheckedBefore}`);
+      selectedContentControl.checkboxContentControl.isChecked = !isCheckedBefore;
+      selectedContentControl.load("id,checkboxContentControl/isChecked");
+      await context.sync();
+
+      console.log(
+        "isChecked state after:",
+        `id: ${selectedContentControl.id} ... isChecked: ${selectedContentControl.checkboxContentControl.isChecked}`
+      );
     });
-'Word.BorderWidth:enum':
+Word.ContentControlDataChangedEventArgs:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondatachanged-event.yaml
 
-    // Updates border properties (e.g., type, width, color) of the specified
-    style.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name").val() as string;
-      if (styleName == "") {
-        console.warn("Enter a style name to update border properties.");
-        return;
-      }
-
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load();
+      const contentControls: Word.ContentControlCollection = context.document.contentControls;
+      contentControls.load("items");
       await context.sync();
 
-      if (style.isNullObject) {
-        console.warn(`There's no existing style with the name '${styleName}'.`);
+      // Register the onDataChanged event handler on each content control.
+      if (contentControls.items.length === 0) {
+        console.log("There aren't any content controls in this document so can't register event handlers.");
       } else {
-        const borders: Word.BorderCollection = style.borders;
-        borders.load("items");
+        for (let i = 0; i < contentControls.items.length; i++) {
+          eventContexts[i] = contentControls.items[i].onDataChanged.add(contentControlDataChanged);
+          contentControls.items[i].track();
+        }
+
         await context.sync();
 
-        borders.outsideBorderType = Word.BorderType.dashed;
-        borders.outsideBorderWidth = Word.BorderWidth.pt025;
-        borders.outsideBorderColor = "green";
-        console.log("Updated outside borders.");
+        console.log("Added event handlers for when data is changed in content controls.");
       }
     });
-'Word.BreakType:enum':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-line-and-page-breaks.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondatachanged-event.yaml
 
-    await Word.run(async (context) => {
-      context.document.body.paragraphs.getFirst().insertBreak(Word.BreakType.page, "After");
 
-      await context.sync();
-      console.log("success");
-    });
-'Word.BuiltInStyleName:enum':
+    async function contentControlDataChanged(event:
+    Word.ContentControlDataChangedEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.eventType} event detected. IDs of content controls where data was changed:`, event.ids);
+      });
+    }
+Word.ContentControlDeletedEventArgs:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-formatted-text.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondeleted-event.yaml
 
 
     await Word.run(async (context) => {
-      const sentence: Word.Paragraph = context.document.body.insertParagraph(
-        "To be or not to be",
-        "End"
-      );
+      const contentControls: Word.ContentControlCollection = context.document.contentControls;
+      contentControls.load("items");
+      await context.sync();
 
-      // Use styleBuiltIn to use an enumeration of existing styles. If your style is custom make sure to use: range.style = "name of your style";
-      sentence.styleBuiltIn = Word.BuiltInStyleName.intenseReference;
+      // Register the onDeleted event handler on each content control.
+      if (contentControls.items.length === 0) {
+        console.log("There aren't any content controls in this document so can't register event handlers.");
+      } else {
+        for (let i = 0; i < contentControls.items.length; i++) {
+          eventContexts[i] = contentControls.items[i].onDeleted.add(contentControlDeleted);
+          contentControls.items[i].track();
+        }
 
-      await context.sync();
+        await context.sync();
+
+        console.log("Added event handlers for when content controls are deleted.");
+      }
     });
-'Word.CellPaddingLocation:enum':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
-
-
-    // Gets cell padding details about the first table in the document.
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondeleted-event.yaml
 
-    await Word.run(async (context) => {
-      const firstTable: Word.Table = context.document.body.tables.getFirst();
-      const cellPaddingLocation = Word.CellPaddingLocation.right;
-      const cellPadding = firstTable.getCellPadding(cellPaddingLocation);
-      await context.sync();
 
-      console.log(
-        `Cell padding details about the ${cellPaddingLocation} border of the first table: ${cellPadding.value} points`
-      );
-    });
-'Word.ChangeTrackingMode:enum':
+    async function contentControlDeleted(event:
+    Word.ContentControlDeletedEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.eventType} event detected. IDs of content controls that were deleted:`, event.ids);
+      });
+    }
+Word.ContentControlEnteredEventArgs:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-change-tracking.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onentered-event.yaml
 
-    // Gets the current change tracking mode.
 
     await Word.run(async (context) => {
-      const document: Word.Document = context.document;
-      document.load("changeTrackingMode");
+      const contentControls: Word.ContentControlCollection = context.document.contentControls;
+      contentControls.load("items");
       await context.sync();
 
-      if (document.changeTrackingMode === Word.ChangeTrackingMode.trackMineOnly) {
-        console.log("Only my changes are being tracked.");
-      } else if (document.changeTrackingMode === Word.ChangeTrackingMode.trackAll) {
-        console.log("Everyone's changes are being tracked.");
+      // Register the onEntered event handler on each content control.
+      if (contentControls.items.length === 0) {
+        console.log("There aren't any content controls in this document so can't register event handlers.");
       } else {
-        console.log("No changes are being tracked.");
+        for (let i = 0; i < contentControls.items.length; i++) {
+          eventContexts[i] = contentControls.items[i].onEntered.add(contentControlEntered);
+          contentControls.items[i].track();
+        }
+
+        await context.sync();
+
+        console.log("Added event handlers for when the cursor is placed in content controls.");
       }
     });
-'Word.ChangeTrackingState:enum':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/get-change-tracking-states.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onentered-event.yaml
 
 
-    // Logs the current change tracking states of the content controls.
+    async function contentControlEntered(event:
+    Word.ContentControlEnteredEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.eventType} event detected. ID of content control that was entered: ${event.ids[0]}`);
+      });
+    }
+Word.ContentControlExitedEventArgs:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onexited-event.yaml
+
 
     await Word.run(async (context) => {
-      let trackAddedArray: Word.ChangeTrackingState[] = [Word.ChangeTrackingState.added];
-      let trackDeletedArray: Word.ChangeTrackingState[] = [Word.ChangeTrackingState.deleted];
-      let trackNormalArray: Word.ChangeTrackingState[] = [Word.ChangeTrackingState.normal];
+      const contentControls: Word.ContentControlCollection = context.document.contentControls;
+      contentControls.load("items");
+      await context.sync();
 
-      let addedContentControls = context.document.body.getContentControls().getByChangeTrackingStates(trackAddedArray);
-      let deletedContentControls = context.document.body
-        .getContentControls()
-        .getByChangeTrackingStates(trackDeletedArray);
-      let normalContentControls = context.document.body.getContentControls().getByChangeTrackingStates(trackNormalArray);
+      // Register the onExited event handler on each content control.
+      if (contentControls.items.length === 0) {
+        console.log("There aren't any content controls in this document so can't register event handlers.");
+      } else {
+        for (let i = 0; i < contentControls.items.length; i++) {
+          eventContexts[i] = contentControls.items[i].onExited.add(contentControlExited);
+          contentControls.items[i].track();
+        }
 
-      addedContentControls.load();
-      deletedContentControls.load();
-      normalContentControls.load();
-      await context.sync();
+        await context.sync();
 
-      console.log(`Number of content controls in Added state: ${addedContentControls.items.length}`);
-      console.log(`Number of content controls in Deleted state: ${deletedContentControls.items.length}`);
-      console.log(`Number of content controls in Normal state: ${normalContentControls.items.length}`);
+        console.log("Added event handlers for when the cursor is removed from within content controls.");
+      }
     });
-'Word.ChangeTrackingVersion:enum':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-change-tracking.yaml
-
-
-    // Gets the reviewed text.
-
-    await Word.run(async (context) => {
-      const range: Word.Range = context.document.getSelection();
-      const before = range.getReviewedText(Word.ChangeTrackingVersion.original);
-      const after = range.getReviewedText(Word.ChangeTrackingVersion.current);
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onexited-event.yaml
 
-      await context.sync();
 
-      console.log("Reviewed text (before):", before.value, "Reviewed text (after):", after.value);
-    });
-'Word.CheckboxContentControl:class':
+    async function contentControlExited(event:
+    Word.ContentControlExitedEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.eventType} event detected. ID of content control that was exited: ${event.ids[0]}`);
+      });
+    }
+Word.ContentControlListItem:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml
 
 
-    // Toggles the isChecked property on all checkbox content controls.
+    // Deletes the provided list item from the first dropdown list content
+    control in the selection.
 
     await Word.run(async (context) => {
-      let contentControls = context.document.getContentControls({
-        types: [Word.ContentControlType.checkBox]
-      });
-      contentControls.load("items");
-
+      const listItemText = (document.getElementById("item-to-delete") as HTMLInputElement).value.trim();
+      const selectedRange: Word.Range = context.document.getSelection();
+      let selectedContentControl = selectedRange
+        .getContentControls({
+          types: [Word.ContentControlType.dropDownList]
+        })
+        .getFirstOrNullObject();
+      selectedContentControl.load("id,dropDownListContentControl");
       await context.sync();
 
-      const length = contentControls.items.length;
-      console.log(`Number of checkbox content controls: ${length}`);
-
-      if (length <= 0) {
-        return;
-      }
+      if (selectedContentControl.isNullObject) {
+        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
+        parentContentControl.load("id,type,dropDownListContentControl");
+        await context.sync();
 
-      const checkboxContentControls = [];
-      for (let i = 0; i < length; i++) {
-        let contentControl = contentControls.items[i];
-        contentControl.load("id,checkboxContentControl/isChecked");
-        checkboxContentControls.push(contentControl);
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
+          console.warn("No dropdown list content control is currently selected.");
+          return;
+        } else {
+          selectedContentControl = parentContentControl;
+        }
       }
 
+      let selectedDropdownList: Word.DropDownListContentControl = selectedContentControl.dropDownListContentControl;
+      selectedDropdownList.listItems.load("items/*");
       await context.sync();
 
-      console.log("isChecked state before:");
-      const updatedCheckboxContentControls = [];
-      for (let i = 0; i < checkboxContentControls.length; i++) {
-        const currentCheckboxContentControl = checkboxContentControls[i];
-        const isCheckedBefore = currentCheckboxContentControl.checkboxContentControl.isChecked;
-        console.log(`id: ${currentCheckboxContentControl.id} ... isChecked: ${isCheckedBefore}`);
-
-        currentCheckboxContentControl.checkboxContentControl.isChecked = !isCheckedBefore;
-        currentCheckboxContentControl.load("id,checkboxContentControl/isChecked");
-        updatedCheckboxContentControls.push(currentCheckboxContentControl);
+      let listItems: Word.ContentControlListItemCollection = selectedContentControl.dropDownListContentControl.listItems;
+      let itemToDelete: Word.ContentControlListItem = listItems.items.find((item) => item.displayText === listItemText);
+      if (!itemToDelete) {
+        console.warn(`List item doesn't exist in control with ID ${selectedContentControl.id}: ${listItemText}`)
+        return;
       }
-
+      
+      itemToDelete.delete();
       await context.sync();
 
-      console.log("isChecked state after:");
-      for (let i = 0; i < updatedCheckboxContentControls.length; i++) {
-        const currentCheckboxContentControl = updatedCheckboxContentControls[i];
-        console.log(
-          `id: ${currentCheckboxContentControl.id} ... isChecked: ${currentCheckboxContentControl.checkboxContentControl.isChecked}`
-        );
-      }
+      console.log(`List item deleted from control with ID ${selectedContentControl.id}: ${listItemText}`);
     });
-'Word.CloseBehavior:enum':
+Word.ContentControlListItem#delete:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/save-close.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml
 
 
-    // Closes the document after saving.
+    // Deletes the provided list item from the first combo box content control
+    in the selection.
 
     await Word.run(async (context) => {
-      context.document.close(Word.CloseBehavior.save);
-    });
-'Word.ComboBoxContentControl:class':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml
+      const listItemText = (document.getElementById("item-to-delete") as HTMLInputElement).value.trim();
+      const selectedRange: Word.Range = context.document.getSelection();
+      let selectedContentControl = selectedRange
+        .getContentControls({
+          types: [Word.ContentControlType.comboBox]
+        })
+        .getFirstOrNullObject();
+      selectedContentControl.load("id,comboBoxContentControl");
+      await context.sync();
 
+      if (selectedContentControl.isNullObject) {
+        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
+        parentContentControl.load("id,type,comboBoxContentControl");
+        await context.sync();
 
-    // Places a combo box content control at the end of the selection.
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.comboBox) {
+          console.warn("No combo box content control is currently selected.");
+          return;
+        } else {
+          selectedContentControl = parentContentControl;
+        }
+      }
 
-    await Word.run(async (context) => {
-      let selection = context.document.getSelection();
-      selection.getRange(Word.RangeLocation.end).insertContentControl(Word.ContentControlType.comboBox);
+      let selectedComboBox: Word.ComboBoxContentControl = selectedContentControl.comboBoxContentControl;
+      selectedComboBox.listItems.load("items/*");
       await context.sync();
 
-      console.log("Combo box content control inserted at the end of the selection.");
+      let listItems: Word.ContentControlListItemCollection = selectedContentControl.comboBoxContentControl.listItems;
+      let itemToDelete: Word.ContentControlListItem = listItems.items.find((item) => item.displayText === listItemText);
+      if (!itemToDelete) {
+        console.warn(`List item doesn't exist in control with ID ${selectedContentControl.id}: ${listItemText}`);
+        return;
+      }
+
+      itemToDelete.delete();
+      await context.sync();
+
+      console.log(`List item deleted from control with ID ${selectedContentControl.id}: ${listItemText}`);
     });
-'Word.ComboBoxContentControl#addListItem:member(1)':
+Word.ContentControlListItem#displayText:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml
 
 
-    // Adds the provided list item to the first combo box content control in the
-    selection.
+    // Deletes the provided list item from the first dropdown list content
+    control in the selection.
 
     await Word.run(async (context) => {
-      const listItemText = $("#item-to-add")
-        .val()
-        .toString()
-        .trim();
+      const listItemText = (document.getElementById("item-to-delete") as HTMLInputElement).value.trim();
       const selectedRange: Word.Range = context.document.getSelection();
       let selectedContentControl = selectedRange
         .getContentControls({
-          types: [Word.ContentControlType.comboBox]
+          types: [Word.ContentControlType.dropDownList]
         })
         .getFirstOrNullObject();
-      selectedContentControl.load("id,comboBoxContentControl");
+      selectedContentControl.load("id,dropDownListContentControl");
       await context.sync();
 
       if (selectedContentControl.isNullObject) {
         const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type,comboBoxContentControl");
+        parentContentControl.load("id,type,dropDownListContentControl");
         await context.sync();
 
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.comboBox) {
-          console.warn("No combo box content control is currently selected.");
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
+          console.warn("No dropdown list content control is currently selected.");
           return;
         } else {
           selectedContentControl = parentContentControl;
         }
       }
 
-      selectedContentControl.comboBoxContentControl.addListItem(listItemText);
+      let selectedDropdownList: Word.DropDownListContentControl = selectedContentControl.dropDownListContentControl;
+      selectedDropdownList.listItems.load("items/*");
       await context.sync();
 
-      console.log(`List item added to control with ID ${selectedContentControl.id}: ${listItemText}`);
+      let listItems: Word.ContentControlListItemCollection = selectedContentControl.dropDownListContentControl.listItems;
+      let itemToDelete: Word.ContentControlListItem = listItems.items.find((item) => item.displayText === listItemText);
+      if (!itemToDelete) {
+        console.warn(`List item doesn't exist in control with ID ${selectedContentControl.id}: ${listItemText}`)
+        return;
+      }
+      
+      itemToDelete.delete();
+      await context.sync();
+
+      console.log(`List item deleted from control with ID ${selectedContentControl.id}: ${listItemText}`);
     });
-'Word.ComboBoxContentControl#deleteAllListItems:member(1)':
+Word.ContentControlListItemCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml
 
 
-    // Deletes the list items from first combo box content control found in the
+    // Gets the list items from the first combo box content control found in the
     selection.
 
     await Word.run(async (context) => {
@@ -17289,1896 +23102,1806 @@
         }
       }
 
-      console.log(`About to delete the list from the combo box content control with ID ${selectedContentControl.id}`);
-      selectedContentControl.comboBoxContentControl.deleteAllListItems();
+      let selectedComboBox: Word.ComboBoxContentControl = selectedContentControl.comboBoxContentControl;
+      selectedComboBox.listItems.load("items");
       await context.sync();
 
-      console.log("Deleted the list from the combo box content control.");
+      const currentItems: Word.ContentControlListItemCollection = selectedComboBox.listItems;
+      console.log(`The list from the combo box content control with ID ${selectedContentControl.id}:`, currentItems);
     });
-'Word.ComboBoxContentControl#listItems:member':
+Word.ContentControlOptions:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
 
 
-    // Deletes the provided list item from the first combo box content control
-    in the selection.
+    // Toggles the isChecked property of the first checkbox content control
+    found in the selection.
 
     await Word.run(async (context) => {
-      const listItemText = $("#item-to-delete")
-        .val()
-        .toString()
-        .trim();
       const selectedRange: Word.Range = context.document.getSelection();
       let selectedContentControl = selectedRange
         .getContentControls({
-          types: [Word.ContentControlType.comboBox]
+          types: [Word.ContentControlType.checkBox]
         })
         .getFirstOrNullObject();
-      selectedContentControl.load("id,comboBoxContentControl");
+      selectedContentControl.load("id,checkboxContentControl/isChecked");
+
       await context.sync();
 
       if (selectedContentControl.isNullObject) {
         const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type,comboBoxContentControl");
+        parentContentControl.load("id,type,checkboxContentControl/isChecked");
         await context.sync();
 
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.comboBox) {
-          console.warn("No combo box content control is currently selected.");
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.checkBox) {
+          console.warn("No checkbox content control is currently selected.");
           return;
         } else {
           selectedContentControl = parentContentControl;
         }
       }
 
-      let selectedComboBox: Word.ComboBoxContentControl = selectedContentControl.comboBoxContentControl;
-      selectedComboBox.listItems.load("items/*");
+      const isCheckedBefore = selectedContentControl.checkboxContentControl.isChecked;
+      console.log("isChecked state before:", `id: ${selectedContentControl.id} ... isChecked: ${isCheckedBefore}`);
+      selectedContentControl.checkboxContentControl.isChecked = !isCheckedBefore;
+      selectedContentControl.load("id,checkboxContentControl/isChecked");
+      await context.sync();
+
+      console.log(
+        "isChecked state after:",
+        `id: ${selectedContentControl.id} ... isChecked: ${selectedContentControl.checkboxContentControl.isChecked}`
+      );
+    });
+Word.ContentControlSelectionChangedEventArgs:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml
+
+
+    await Word.run(async (context) => {
+      const contentControls: Word.ContentControlCollection = context.document.contentControls;
+      contentControls.load("items");
+      await context.sync();
+
+      if (contentControls.items.length === 0) {
+        console.log("There aren't any content controls in this document so can't register event handlers.");
+      } else {
+        for (let i = 0; i < contentControls.items.length; i++) {
+          eventContexts[i] = contentControls.items[i].onSelectionChanged.add(contentControlSelectionChanged);
+          contentControls.items[i].track();
+        }
+
+        await context.sync();
+
+        console.log("Added event handlers for when selections are changed in content controls.");
+      }
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml
+
+
+    async function contentControlSelectionChanged(event:
+    Word.ContentControlSelectionChangedEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.eventType} event detected. IDs of content controls where selection was changed:`, event.ids);
+      });
+    }
+Word.ContentControlState:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-content-controls.yaml
+
+
+    // Sets the state of the first content control.
+
+    await Word.run(async (context) => {
+      const state = ((document.getElementById("state-to-set") as HTMLSelectElement)
+        .value as unknown) as Word.ContentControlState;
+      let firstContentControl = context.document.contentControls.getFirstOrNullObject();
+      await context.sync();
+
+      if (firstContentControl.isNullObject) {
+        console.warn("There are no content controls in this document.");
+        return;
+      }
+
+      firstContentControl.setState(state);
+      firstContentControl.load("id");
+      await context.sync();
+
+      console.log(`Set state of first content control with ID ${firstContentControl.id} to ${state}.`);
+    });
+Word.ContentControlType:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
+
+
+    // Traverses each paragraph of the document and places a checkbox content
+    control at the beginning of each.
+
+    await Word.run(async (context) => {
+      let paragraphs = context.document.body.paragraphs;
+      paragraphs.load("$none"); // Don't need any properties; just start each paragraph with a content control.
+
+      await context.sync();
+
+      for (let i = 0; i < paragraphs.items.length; i++) {
+        let contentControl = paragraphs.items[i]
+          .getRange(Word.RangeLocation.start)
+          .insertContentControl(Word.ContentControlType.checkBox);
+      }
+      console.log("Checkbox content controls inserted: " + paragraphs.items.length);
+
       await context.sync();
+    });
+Word.Critique:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+
+
+    // Adds annotations to the selected paragraph.
+
+    await Word.run(async (context) => {
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const options: Word.CritiquePopupOptions = {
+        brandingTextResourceId: "PG.TabLabel",
+        subtitleResourceId: "PG.HelpCommand.TipTitle",
+        titleResourceId: "PG.HelpCommand.Label",
+        suggestions: ["suggestion 1", "suggestion 2", "suggestion 3"]
+      };
+      const critique1: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.red,
+        start: 1,
+        length: 3,
+        popupOptions: options
+      };
+      const critique2: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.green,
+        start: 6,
+        length: 1,
+        popupOptions: options
+      };
+      const critique3: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.blue,
+        start: 10,
+        length: 3,
+        popupOptions: options
+      };
+      const critique4: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.lavender,
+        start: 14,
+        length: 3,
+        popupOptions: options
+      };
+      const critique5: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.berry,
+        start: 18,
+        length: 10,
+        popupOptions: options
+      };
+      const annotationSet: Word.AnnotationSet = {
+        critiques: [critique1, critique2, critique3, critique4, critique5]
+      };
 
-      let listItems: Word.ContentControlListItemCollection = selectedContentControl.comboBoxContentControl.listItems;
-      let itemToDelete: Word.ContentControlListItem = listItems.items.find((item) => item.displayText === listItemText);
-      if (!itemToDelete) {
-        console.warn(`List item doesn't exist in control with ID ${selectedContentControl.id}: ${listItemText}`);
-        return;
-      }
+      const annotationIds = paragraph.insertAnnotations(annotationSet);
 
-      itemToDelete.delete();
       await context.sync();
 
-      console.log(`List item deleted from control with ID ${selectedContentControl.id}: ${listItemText}`);
+      console.log("Annotations inserted:", annotationIds.value);
     });
-'Word.Comment:class':
+Word.CritiqueAnnotation:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Sets a comment on the selected content.
+    // Gets annotations found in the selected paragraph.
 
     await Word.run(async (context) => {
-      const text = $("#comment-text")
-        .val()
-        .toString();
-      const comment: Word.Comment = context.document.getSelection().insertComment(text);
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
+      annotations.load("id,state,critiqueAnnotation");
 
-      // Load object to log in the console.
-      comment.load();
       await context.sync();
 
-      console.log("Comment inserted:", comment);
-    });
-'Word.Comment#delete:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
-
-
-    // Deletes the first comment in the selected content.
+      console.log("Annotations found:");
 
-    await Word.run(async (context) => {
-      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
-      comment.delete();
-      await context.sync();
+      for (let i = 0; i < annotations.items.length; i++) {
+        const annotation: Word.Annotation = annotations.items[i];
 
-      if (comment.isNullObject) {
-        console.warn("No comments in the selection, so nothing to delete.");
-        return;
+        console.log(`ID ${annotation.id} - state '${annotation.state}':`, annotation.critiqueAnnotation.critique);
       }
-
-      console.log("Comment deleted.");
     });
-'Word.Comment#getRange:member(1)':
+Word.CritiqueAnnotation#accept:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Gets the range of the first comment in the selected content.
+    // Accepts the first annotation found in the selected paragraph.
 
     await Word.run(async (context) => {
-      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
-      comment.load("contentRange");
-      const range: Word.Range = comment.getRange();
-      range.load("text");
-      await context.sync();
-
-      if (comment.isNullObject) {
-        console.warn("No comments in the selection, so no range to get.");
-        return;
-      }
-
-      console.log(`Comment location: ${range.text}`);
-      const contentRange: Word.CommentContentRange = comment.contentRange;
-      console.log("Comment content range:", contentRange);
-    });
-'Word.Comment#reply:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
+      annotations.load("id,state,critiqueAnnotation");
 
+      await context.sync();
 
-    // Replies to the first active comment in the selected content.
+      for (let i = 0; i < annotations.items.length; i++) {
+        const annotation: Word.Annotation = annotations.items[i];
 
-    await Word.run(async (context) => {
-      const text = $("#reply-text")
-        .val()
-        .toString();
-      const comments: Word.CommentCollection = context.document.getSelection().getComments();
-      comments.load("items");
-      await context.sync();
+        if (annotation.state === Word.AnnotationState.created) {
+          console.log(`Accepting ID ${annotation.id}...`);
+          annotation.critiqueAnnotation.accept();
 
-      const firstActiveComment: Word.Comment = comments.items.find((item) => item.resolved !== true);
-      if (firstActiveComment) {
-        const reply: Word.CommentReply = firstActiveComment.reply(text);
-        console.log("Reply added.");
-      } else {
-        console.warn("No active comment was found in the selection, so couldn't reply.");
+          await context.sync();
+          break;
+        }
       }
     });
-'Word.Comment#content:member':
+Word.CritiqueAnnotation#reject:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Edits the first active comment in the selected content.
+    // Rejects the last annotation found in the selected paragraph.
 
     await Word.run(async (context) => {
-      const text = $("#edit-comment-text")
-        .val()
-        .toString();
-      const comments: Word.CommentCollection = context.document.getSelection().getComments();
-      comments.load("items");
-      await context.sync();
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
+      annotations.load("id,state,critiqueAnnotation");
 
-      const firstActiveComment: Word.Comment = comments.items.find((item) => item.resolved !== true);
-      if (!firstActiveComment) {
-        console.warn("No active comment was found in the selection, so couldn't edit.");
-        return;
-      }
+      await context.sync();
 
-      firstActiveComment.content = text;
+      for (let i = annotations.items.length - 1; i >= 0; i--) {
+        const annotation: Word.Annotation = annotations.items[i];
 
-      // Load object to log in the console.
-      firstActiveComment.load();
-      await context.sync();
+        if (annotation.state === Word.AnnotationState.created) {
+          console.log(`Rejecting ID ${annotation.id}...`);
+          annotation.critiqueAnnotation.reject();
 
-      console.log("Comment content changed:", firstActiveComment);
+          await context.sync();
+          break;
+        }
+      }
     });
-'Word.Comment#contentRange:member':
+Word.CritiqueAnnotation#critique:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Gets the range of the first comment in the selected content.
+    // Gets annotations found in the selected paragraph.
 
     await Word.run(async (context) => {
-      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
-      comment.load("contentRange");
-      const range: Word.Range = comment.getRange();
-      range.load("text");
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
+      annotations.load("id,state,critiqueAnnotation");
+
       await context.sync();
 
-      if (comment.isNullObject) {
-        console.warn("No comments in the selection, so no range to get.");
-        return;
-      }
+      console.log("Annotations found:");
 
-      console.log(`Comment location: ${range.text}`);
-      const contentRange: Word.CommentContentRange = comment.contentRange;
-      console.log("Comment content range:", contentRange);
+      for (let i = 0; i < annotations.items.length; i++) {
+        const annotation: Word.Annotation = annotations.items[i];
+
+        console.log(`ID ${annotation.id} - state '${annotation.state}':`, annotation.critiqueAnnotation.critique);
+      }
     });
-'Word.Comment#replies:member':
+Word.CritiqueColorScheme:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Gets the replies to the first comment in the selected content.
+    // Adds annotations to the selected paragraph.
 
     await Word.run(async (context) => {
-      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
-      comment.load("replies");
-      await context.sync();
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const options: Word.CritiquePopupOptions = {
+        brandingTextResourceId: "PG.TabLabel",
+        subtitleResourceId: "PG.HelpCommand.TipTitle",
+        titleResourceId: "PG.HelpCommand.Label",
+        suggestions: ["suggestion 1", "suggestion 2", "suggestion 3"]
+      };
+      const critique1: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.red,
+        start: 1,
+        length: 3,
+        popupOptions: options
+      };
+      const critique2: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.green,
+        start: 6,
+        length: 1,
+        popupOptions: options
+      };
+      const critique3: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.blue,
+        start: 10,
+        length: 3,
+        popupOptions: options
+      };
+      const critique4: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.lavender,
+        start: 14,
+        length: 3,
+        popupOptions: options
+      };
+      const critique5: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.berry,
+        start: 18,
+        length: 10,
+        popupOptions: options
+      };
+      const annotationSet: Word.AnnotationSet = {
+        critiques: [critique1, critique2, critique3, critique4, critique5]
+      };
 
-      if (comment.isNullObject) {
-        console.warn("No comments in the selection, so no replies to get.");
-        return;
-      }
+      const annotationIds = paragraph.insertAnnotations(annotationSet);
 
-      const replies: Word.CommentReplyCollection = comment.replies;
-      console.log("Replies to the first comment:", replies);
+      await context.sync();
+
+      console.log("Annotations inserted:", annotationIds.value);
     });
-'Word.Comment#resolved:member':
+Word.CritiquePopupOptions:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Toggles Resolved status of the first comment in the selected content.
+    // Adds annotations to the selected paragraph.
 
     await Word.run(async (context) => {
-      const comment: Word.Comment = context.document
-        .getSelection()
-        .getComments()
-        .getFirstOrNullObject();
-      comment.load("resolved");
-      await context.sync();
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const options: Word.CritiquePopupOptions = {
+        brandingTextResourceId: "PG.TabLabel",
+        subtitleResourceId: "PG.HelpCommand.TipTitle",
+        titleResourceId: "PG.HelpCommand.Label",
+        suggestions: ["suggestion 1", "suggestion 2", "suggestion 3"]
+      };
+      const critique1: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.red,
+        start: 1,
+        length: 3,
+        popupOptions: options
+      };
+      const critique2: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.green,
+        start: 6,
+        length: 1,
+        popupOptions: options
+      };
+      const critique3: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.blue,
+        start: 10,
+        length: 3,
+        popupOptions: options
+      };
+      const critique4: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.lavender,
+        start: 14,
+        length: 3,
+        popupOptions: options
+      };
+      const critique5: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.berry,
+        start: 18,
+        length: 10,
+        popupOptions: options
+      };
+      const annotationSet: Word.AnnotationSet = {
+        critiques: [critique1, critique2, critique3, critique4, critique5]
+      };
 
-      if (comment.isNullObject) {
-        console.warn("No comments in the selection, so nothing to toggle.");
-        return;
-      }
+      const annotationIds = paragraph.insertAnnotations(annotationSet);
 
-      // Toggle resolved status.
-      // If the comment is active, set as resolved.
-      // If it's resolved, set resolved to false.
-      const resolvedBefore = comment.resolved;
-      console.log(`Comment Resolved status (before): ${resolvedBefore}`);
-      comment.resolved = !resolvedBefore;
-      comment.load("resolved");
       await context.sync();
 
-      console.log(`Comment Resolved status (after): ${comment.resolved}`);
+      console.log("Annotations inserted:", annotationIds.value);
     });
-'Word.CommentChangeType:enum':
+Word.CustomProperty:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/30-properties/read-write-custom-document-properties.yaml
 
-    // Registers event handlers.
 
     await Word.run(async (context) => {
-      const body: Word.Body = context.document.body;
-      body.track();
-      await context.sync();
-
-      eventContexts[0] = body.onCommentAdded.add(onEventHandler);
-      eventContexts[1] = body.onCommentChanged.add(onChangedHandler);
-      eventContexts[2] = body.onCommentDeleted.add(onEventHandler);
-      eventContexts[3] = body.onCommentDeselected.add(onEventHandler);
-      eventContexts[4] = body.onCommentSelected.add(onEventHandler);
-      await context.sync();
+        const properties: Word.CustomPropertyCollection = context.document.properties.customProperties;
+        properties.load("key,type,value");
 
-      console.log("Event handlers registered.");
+        await context.sync();
+        for (let i = 0; i < properties.items.length; i++)
+            console.log("Property Name:" + properties.items[i].key + "; Type=" + properties.items[i].type + "; Property Value=" + properties.items[i].value);
     });
+Word.CustomPropertyCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
-
-
-    async function onChangedHandler(event: Word.CommentEventArgs) {
-      await Word.run(async (context) => {
-        console.log(
-          `${event.type} event detected. ${event.changeType} change made. Event source: ${event.source}. Comment info:`, event.commentDetails
-        );
-      });
-    }
-'Word.CommentCollection:class':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/30-properties/read-write-custom-document-properties.yaml
 
-    // Replies to the first active comment in the selected content.
 
     await Word.run(async (context) => {
-      const text = $("#reply-text")
-        .val()
-        .toString();
-      const comments: Word.CommentCollection = context.document.getSelection().getComments();
-      comments.load("items");
-      await context.sync();
+        const properties: Word.CustomPropertyCollection = context.document.properties.customProperties;
+        properties.load("key,type,value");
 
-      const firstActiveComment: Word.Comment = comments.items.find((item) => item.resolved !== true);
-      if (firstActiveComment) {
-        const reply: Word.CommentReply = firstActiveComment.reply(text);
-        console.log("Reply added.");
-      } else {
-        console.warn("No active comment was found in the selection, so couldn't reply.");
-      }
+        await context.sync();
+        for (let i = 0; i < properties.items.length; i++)
+            console.log("Property Name:" + properties.items[i].key + "; Type=" + properties.items[i].type + "; Property Value=" + properties.items[i].value);
     });
-'Word.CommentCollection#getFirstOrNullObject:member(1)':
+Word.CustomPropertyCollection#add:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/30-properties/read-write-custom-document-properties.yaml
 
-    // Gets the range of the first comment in the selected content.
 
     await Word.run(async (context) => {
-      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
-      comment.load("contentRange");
-      const range: Word.Range = comment.getRange();
-      range.load("text");
-      await context.sync();
-
-      if (comment.isNullObject) {
-        console.warn("No comments in the selection, so no range to get.");
-        return;
-      }
+        context.document.properties.customProperties.add("Numeric Property", 1234);
 
-      console.log(`Comment location: ${range.text}`);
-      const contentRange: Word.CommentContentRange = comment.contentRange;
-      console.log("Comment content range:", contentRange);
+        await context.sync();
+        console.log("Property added");
     });
-'Word.CommentCollection#items:member':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/30-properties/read-write-custom-document-properties.yaml
 
-    // Replies to the first active comment in the selected content.
 
     await Word.run(async (context) => {
-      const text = $("#reply-text")
-        .val()
-        .toString();
-      const comments: Word.CommentCollection = context.document.getSelection().getComments();
-      comments.load("items");
-      await context.sync();
+        context.document.properties.customProperties.add("String Property", "Hello World!");
 
-      const firstActiveComment: Word.Comment = comments.items.find((item) => item.resolved !== true);
-      if (firstActiveComment) {
-        const reply: Word.CommentReply = firstActiveComment.reply(text);
-        console.log("Reply added.");
-      } else {
-        console.warn("No active comment was found in the selection, so couldn't reply.");
-      }
+        await context.sync();
+        console.log("Property added");
     });
-'Word.CommentContentRange:class':
+Word.CustomPropertyCollection#items:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/30-properties/read-write-custom-document-properties.yaml
 
-    // Gets the range of the first comment in the selected content.
 
     await Word.run(async (context) => {
-      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
-      comment.load("contentRange");
-      const range: Word.Range = comment.getRange();
-      range.load("text");
-      await context.sync();
-
-      if (comment.isNullObject) {
-        console.warn("No comments in the selection, so no range to get.");
-        return;
-      }
+        const properties: Word.CustomPropertyCollection = context.document.properties.customProperties;
+        properties.load("key,type,value");
 
-      console.log(`Comment location: ${range.text}`);
-      const contentRange: Word.CommentContentRange = comment.contentRange;
-      console.log("Comment content range:", contentRange);
+        await context.sync();
+        for (let i = 0; i < properties.items.length; i++)
+            console.log("Property Name:" + properties.items[i].key + "; Type=" + properties.items[i].type + "; Property Value=" + properties.items[i].value);
     });
-'Word.CommentDetail:interface':
+Word.CustomXmlPart:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
 
 
-    // Registers event handlers.
+    // Adds a custom XML part.
 
     await Word.run(async (context) => {
-      const body: Word.Body = context.document.body;
-      body.track();
-      await context.sync();
+      const originalXml =
+        "<Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>";
+      const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.add(originalXml);
+      customXmlPart.load("id");
+      const xmlBlob = customXmlPart.getXml();
 
-      eventContexts[0] = body.onCommentAdded.add(onEventHandler);
-      eventContexts[1] = body.onCommentChanged.add(onChangedHandler);
-      eventContexts[2] = body.onCommentDeleted.add(onEventHandler);
-      eventContexts[3] = body.onCommentDeselected.add(onEventHandler);
-      eventContexts[4] = body.onCommentSelected.add(onEventHandler);
       await context.sync();
 
-      console.log("Event handlers registered.");
+      const readableXml = addLineBreaksToXML(xmlBlob.value);
+      console.log("Added custom XML part:", readableXml);
+
+      // Store the XML part's ID in a setting so the ID is available to other functions.
+      const settings: Word.SettingCollection = context.document.settings;
+      settings.add("ContosoReviewXmlPartId", customXmlPart.id);
+
+      await context.sync();
     });
+Word.CustomXmlPart#delete:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
 
 
-    async function onEventHandler(event: Word.CommentEventArgs) {
-      // Handler for all events except onCommentChanged.
-      await Word.run(async (context) => {
-        console.log(`${event.type} event detected. Event source: ${event.source}. Comment info:`, event.commentDetails);
-      });
-    }
-'Word.CommentEventArgs:interface':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
+    // Original XML:
+    <Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
 
 
-    // Registers event handlers.
+    // Deletes a custom XML part.
 
     await Word.run(async (context) => {
-      const body: Word.Body = context.document.body;
-      body.track();
+      const settings: Word.SettingCollection = context.document.settings;
+      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartId").load("value");
       await context.sync();
 
-      eventContexts[0] = body.onCommentAdded.add(onEventHandler);
-      eventContexts[1] = body.onCommentChanged.add(onChangedHandler);
-      eventContexts[2] = body.onCommentDeleted.add(onEventHandler);
-      eventContexts[3] = body.onCommentDeselected.add(onEventHandler);
-      eventContexts[4] = body.onCommentSelected.add(onEventHandler);
-      await context.sync();
+      if (xmlPartIDSetting.value) {
+        let customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
+        const xmlBlob = customXmlPart.getXml();
+        customXmlPart.delete();
+        customXmlPart = context.document.customXmlParts.getItemOrNullObject(xmlPartIDSetting.value);
 
-      console.log("Event handlers registered.");
+        await context.sync();
+
+        if (customXmlPart.isNullObject) {
+          console.log(`The XML part with the ID ${xmlPartIDSetting.value} has been deleted.`);
+
+          // Delete the associated setting too.
+          xmlPartIDSetting.delete();
+
+          await context.sync();
+        } else {
+          const readableXml = addLineBreaksToXML(xmlBlob.value);
+          console.error(`This is strange. The XML part with the id ${xmlPartIDSetting.value} wasn't deleted:`, readableXml);
+        }
+      } else {
+        console.warn("Didn't find custom XML part to delete.");
+      }
     });
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
 
 
-    async function onChangedHandler(event: Word.CommentEventArgs) {
-      await Word.run(async (context) => {
-        console.log(
-          `${event.type} event detected. ${event.changeType} change made. Event source: ${event.source}. Comment info:`, event.commentDetails
-        );
-      });
-    }
-'Word.CommentReply:class':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
+    // Original XML: <Reviewers
+    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
 
 
-    // Replies to the first active comment in the selected content.
+    // Deletes a custom XML part.
 
     await Word.run(async (context) => {
-      const text = $("#reply-text")
-        .val()
-        .toString();
-      const comments: Word.CommentCollection = context.document.getSelection().getComments();
-      comments.load("items");
+      const settings: Word.SettingCollection = context.document.settings;
+      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartIdNS").load("value");
       await context.sync();
 
-      const firstActiveComment: Word.Comment = comments.items.find((item) => item.resolved !== true);
-      if (firstActiveComment) {
-        const reply: Word.CommentReply = firstActiveComment.reply(text);
-        console.log("Reply added.");
-      } else {
-        console.warn("No active comment was found in the selection, so couldn't reply.");
-      }
-    });
-'Word.CommentReplyCollection:class':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
+      if (xmlPartIDSetting.value) {
+        let customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
+        const xmlBlob = customXmlPart.getXml();
+        customXmlPart.delete();
+        customXmlPart = context.document.customXmlParts.getItemOrNullObject(xmlPartIDSetting.value);
 
+        await context.sync();
 
-    // Gets the replies to the first comment in the selected content.
+        if (customXmlPart.isNullObject) {
+          console.log(`The XML part with the ID ${xmlPartIDSetting.value} has been deleted.`);
 
-    await Word.run(async (context) => {
-      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
-      comment.load("replies");
-      await context.sync();
+          // Delete the associated setting too.
+          xmlPartIDSetting.delete();
 
-      if (comment.isNullObject) {
-        console.warn("No comments in the selection, so no replies to get.");
-        return;
+          await context.sync();
+        } else {
+          const readableXml = addLineBreaksToXML(xmlBlob.value);
+          console.error(
+            `This is strange. The XML part with the id ${xmlPartIDSetting.value} wasn't deleted:`,
+            readableXml
+          );
+        }
+      } else {
+        console.warn("Didn't find custom XML part to delete.");
       }
-
-      const replies: Word.CommentReplyCollection = comment.replies;
-      console.log("Replies to the first comment:", replies);
     });
-'Word.CompareTarget:enum':
+Word.CustomXmlPart#getXml:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/compare-documents.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
 
 
-    // Compares the current document with a specified external document.
+    // Adds a custom XML part.
+
+    // If you want to populate the CustomXml.namespaceUri property, you must
+    include the xmlns attribute.
 
     await Word.run(async (context) => {
-      // Absolute path of an online or local document.
-      const filePath = $("#filePath")
-        .val()
-        .toString();
-      // Options that configure the compare operation.
-      const options: Word.DocumentCompareOptions = {
-        compareTarget: Word.CompareTarget.compareTargetCurrent,
-        detectFormatChanges: false
-        // Other options you choose...
-        };
-      context.document.compare(filePath, options);
+      const originalXml =
+        "<Reviewers xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>";
+      const customXmlPart = context.document.customXmlParts.add(originalXml);
+      customXmlPart.load(["id", "namespaceUri"]);
+      const xmlBlob = customXmlPart.getXml();
 
       await context.sync();
 
-      console.log("Differences shown in the current document.");
-    });
-'Word.ContentControl#delete:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondeleted-event.yaml
+      const readableXml = addLineBreaksToXML(xmlBlob.value);
+      console.log(`Added custom XML part with namespace URI ${customXmlPart.namespaceUri}:`, readableXml);
 
+      // Store the XML part's ID in a setting so the ID is available to other functions.
+      const settings: Word.SettingCollection = context.document.settings;
+      settings.add("ContosoReviewXmlPartIdNS", customXmlPart.id);
 
-    await Word.run(async (context) => {
-      const contentControls: Word.ContentControlCollection = context.document.contentControls.getByTag("forTesting");
-      contentControls.load("items");
       await context.sync();
-
-      if (contentControls.items.length === 0) {
-        console.log("There are no content controls in this document.");
-      } else {
-        console.log("Control to be deleted:", contentControls.items[0]);
-        contentControls.items[0].delete(false);
-        await context.sync();
-      }
     });
-'Word.ContentControl#resetState:member(1)':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-content-controls.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
 
 
-    // Resets the state of the first content control.
+    // Adds a custom XML part.
 
     await Word.run(async (context) => {
-      let firstContentControl = context.document.contentControls.getFirstOrNullObject();
-      await context.sync();
+      const originalXml =
+        "<Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>";
+      const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.add(originalXml);
+      customXmlPart.load("id");
+      const xmlBlob = customXmlPart.getXml();
 
-      if (firstContentControl.isNullObject) {
-        console.warn("There are no content controls in this document.");
-        return;
-      }
-      
-      firstContentControl.resetState();
-      firstContentControl.load("id");
       await context.sync();
 
-      console.log(`Reset state of first content control with ID: ${firstContentControl.id}`);
+      const readableXml = addLineBreaksToXML(xmlBlob.value);
+      console.log("Added custom XML part:", readableXml);
+
+      // Store the XML part's ID in a setting so the ID is available to other functions.
+      const settings: Word.SettingCollection = context.document.settings;
+      settings.add("ContosoReviewXmlPartId", customXmlPart.id);
+
+      await context.sync();
     });
-'Word.ContentControl#set:member(1)':
+Word.CustomXmlPart#insertAttribute:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-content-controls.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
 
 
-    // Adds title and colors to odd and even content controls and changes their
-    appearance.
+    // Original XML: <Reviewers
+    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
 
-    await Word.run(async (context) => {
-      // Get the complete sentence (as range) associated with the insertion point.
-      let evenContentControls = context.document.contentControls.getByTag("even");
-      let oddContentControls = context.document.contentControls.getByTag("odd");
-      evenContentControls.load("length");
-      oddContentControls.load("length");
 
+    // Inserts an attribute into a custom XML part.
+
+    await Word.run(async (context) => {
+      const settings: Word.SettingCollection = context.document.settings;
+      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartIdNS").load("value");
       await context.sync();
 
-      for (let i = 0; i < evenContentControls.items.length; i++) {
-        // Change a few properties and append a paragraph.
-        evenContentControls.items[i].set({
-          color: "red",
-          title: "Odd ContentControl #" + (i + 1),
-          appearance: Word.ContentControlAppearance.tags
-        });
-        evenContentControls.items[i].insertParagraph("This is an odd content control", "End");
-      }
+      if (xmlPartIDSetting.value) {
+        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
 
-      for (let j = 0; j < oddContentControls.items.length; j++) {
-        // Change a few properties and append a paragraph.
-        oddContentControls.items[j].set({
-          color: "green",
-          title: "Even ContentControl #" + (j + 1),
-          appearance: "Tags"
-        });
-        oddContentControls.items[j].insertHtml("This is an <b>even</b> content control", "End");
-      }
+        // The insertAttribute method inserts an attribute with the given name and value into the element identified by the xpath parameter.
+        customXmlPart.insertAttribute(
+          "/contoso:Reviewers",
+          { contoso: "http://schemas.contoso.com/review/1.0" },
+          "Nation",
+          "US"
+        );
+        const xmlBlob = customXmlPart.getXml();
+        await context.sync();
 
-      await context.sync();
+        const readableXml = addLineBreaksToXML(xmlBlob.value);
+        console.log("Successfully inserted attribute:", readableXml);
+      } else {
+        console.warn("Didn't find custom XML part to insert attribute into.");
+      }
     });
-'Word.ContentControl#setState:member(1)':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-content-controls.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
 
 
-    // Sets the state of the first content control.
+    // Original XML:
+    <Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+
+
+    // Inserts an attribute into a custom XML part.
 
     await Word.run(async (context) => {
-      const state = ($("#state-to-set").val() as unknown) as Word.ContentControlState;
-      let firstContentControl = context.document.contentControls.getFirstOrNullObject();
+      const settings: Word.SettingCollection = context.document.settings;
+      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartId").load("value");
       await context.sync();
 
-      if (firstContentControl.isNullObject) {
-        console.warn("There are no content controls in this document.");
-        return;
-      }
+      if (xmlPartIDSetting.value) {
+        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
 
-      firstContentControl.setState(state);
-      firstContentControl.load("id");
-      await context.sync();
+        // The insertAttribute method inserts an attribute with the given name and value into the element identified by the xpath parameter.
+        customXmlPart.insertAttribute("/Reviewers", { contoso: "http://schemas.contoso.com/review/1.0" }, "Nation", "US");
+        const xmlBlob = customXmlPart.getXml();
+        await context.sync();
 
-      console.log(`Set state of first content control with ID ${firstContentControl.id} to ${state}.`);
+        const readableXml = addLineBreaksToXML(xmlBlob.value);
+        console.log("Successfully inserted attribute:", readableXml);
+      } else {
+        console.warn("Didn't find custom XML part to insert attribute into.");
+      }
     });
-'Word.ContentControl#checkboxContentControl:member':
+Word.CustomXmlPart#insertElement:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
 
 
-    // Toggles the isChecked property of the first checkbox content control
-    found in the selection.
+    // Original XML: <Reviewers
+    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
 
-    await Word.run(async (context) => {
-      const selectedRange: Word.Range = context.document.getSelection();
-      let selectedContentControl = selectedRange
-        .getContentControls({
-          types: [Word.ContentControlType.checkBox]
-        })
-        .getFirstOrNullObject();
-      selectedContentControl.load("id,checkboxContentControl/isChecked");
 
+    // Inserts an element into a custom XML part.
+
+    await Word.run(async (context) => {
+      const settings: Word.SettingCollection = context.document.settings;
+      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartIdNS").load("value");
       await context.sync();
 
-      if (selectedContentControl.isNullObject) {
-        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type,checkboxContentControl/isChecked");
+      if (xmlPartIDSetting.value) {
+        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
+
+        // The insertElement method inserts the given XML under the parent element identified by the xpath parameter at the provided child position index.
+        customXmlPart.insertElement(
+          "/contoso:Reviewers",
+          "<Lead>Mark</Lead>",
+          { contoso: "http://schemas.contoso.com/review/1.0" },
+          0
+        );
+        const xmlBlob = customXmlPart.getXml();
         await context.sync();
 
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.checkBox) {
-          console.warn("No checkbox content control is currently selected.");
-          return;
-        } else {
-          selectedContentControl = parentContentControl;
-        }
+        const readableXml = addLineBreaksToXML(xmlBlob.value);
+        console.log("Successfully inserted element:", readableXml);
+      } else {
+        console.warn("Didn't find custom XML part to insert element into.");
       }
-
-      const isCheckedBefore = selectedContentControl.checkboxContentControl.isChecked;
-      console.log("isChecked state before:", `id: ${selectedContentControl.id} ... isChecked: ${isCheckedBefore}`);
-      selectedContentControl.checkboxContentControl.isChecked = !isCheckedBefore;
-      selectedContentControl.load("id,checkboxContentControl/isChecked");
-      await context.sync();
-
-      console.log(
-        "isChecked state after:",
-        `id: ${selectedContentControl.id} ... isChecked: ${selectedContentControl.checkboxContentControl.isChecked}`
-      );
     });
-'Word.ContentControl#comboBoxContentControl:member':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
 
 
-    // Adds the provided list item to the first combo box content control in the
-    selection.
+    // Original XML:
+    <Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+
+
+    // Inserts an element into a custom XML part.
 
     await Word.run(async (context) => {
-      const listItemText = $("#item-to-add")
-        .val()
-        .toString()
-        .trim();
-      const selectedRange: Word.Range = context.document.getSelection();
-      let selectedContentControl = selectedRange
-        .getContentControls({
-          types: [Word.ContentControlType.comboBox]
-        })
-        .getFirstOrNullObject();
-      selectedContentControl.load("id,comboBoxContentControl");
+      const settings: Word.SettingCollection = context.document.settings;
+      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartId").load("value");
       await context.sync();
 
-      if (selectedContentControl.isNullObject) {
-        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type,comboBoxContentControl");
-        await context.sync();
-
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.comboBox) {
-          console.warn("No combo box content control is currently selected.");
-          return;
-        } else {
-          selectedContentControl = parentContentControl;
-        }
-      }
+      if (xmlPartIDSetting.value) {
+        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
 
-      selectedContentControl.comboBoxContentControl.addListItem(listItemText);
-      await context.sync();
+        // The insertElement method inserts the given XML under the parent element identified by the xpath parameter at the provided child position index.
+        customXmlPart.insertElement(
+          "/Reviewers",
+          "<Lead>Mark</Lead>",
+          { contoso: "http://schemas.contoso.com/review/1.0" },
+          0
+        );
+        const xmlBlob = customXmlPart.getXml();
+        await context.sync();
 
-      console.log(`List item added to control with ID ${selectedContentControl.id}: ${listItemText}`);
+        const readableXml = addLineBreaksToXML(xmlBlob.value);
+        console.log("Successfully inserted element:", readableXml);
+      } else {
+        console.warn("Didn't find custom XML part to insert element into.");
+      }
     });
-'Word.ContentControl#dropDownListContentControl:member':
+Word.CustomXmlPart#query:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
 
 
-    // Adds the provided list item to the first dropdown list content control in
-    the selection.
+    // Original XML: <Reviewers
+    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+
+
+    // Queries a custom XML part for elements matching the search terms.
 
     await Word.run(async (context) => {
-      const listItemText = $("#item-to-add")
-        .val()
-        .toString()
-        .trim();
-      const selectedRange: Word.Range = context.document.getSelection();
-      let selectedContentControl = selectedRange
-        .getContentControls({
-          types: [Word.ContentControlType.dropDownList]
-        })
-        .getFirstOrNullObject();
-      selectedContentControl.load("id,dropDownListContentControl");
+      const settings: Word.SettingCollection = context.document.settings;
+      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartIdNS").load("value");
+
       await context.sync();
 
-      if (selectedContentControl.isNullObject) {
-        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type,dropDownListContentControl");
+      if (xmlPartIDSetting.value) {
+        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
+        const xpathToQueryFor = "/contoso:Reviewers";
+        const clientResult = customXmlPart.query(xpathToQueryFor, {
+          contoso: "http://schemas.contoso.com/review/1.0"
+        });
+
         await context.sync();
 
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
-          console.warn("No dropdown list content control is currently selected.");
-          return;
-        } else {
-          selectedContentControl = parentContentControl;
+        console.log(`Queried custom XML part for ${xpathToQueryFor} and found ${clientResult.value.length} matches:`);
+        for (let i = 0; i < clientResult.value.length; i++) {
+          console.log(clientResult.value[i]);
         }
+      } else {
+        console.warn("Didn't find custom XML part to query.");
       }
-
-      selectedContentControl.dropDownListContentControl.addListItem(listItemText);
-      await context.sync();
-
-      console.log(`List item added to control with ID ${selectedContentControl.id}: ${listItemText}`);
     });
-'Word.ContentControl#onDataChanged:member':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondatachanged-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
+
+
+    // Original XML:
+    <Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+
 
+    // Queries a custom XML part for elements matching the search terms.
 
     await Word.run(async (context) => {
-      const contentControls: Word.ContentControlCollection = context.document.contentControls;
-      contentControls.load("items");
+      const settings: Word.SettingCollection = context.document.settings;
+      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartId").load("value");
+
       await context.sync();
 
-      // Register the onDataChanged event handler on each content control.
-      if (contentControls.items.length === 0) {
-        console.log("There aren't any content controls in this document so can't register event handlers.");
-      } else {
-        for (let i = 0; i < contentControls.items.length; i++) {
-          eventContexts[i] = contentControls.items[i].onDataChanged.add(contentControlDataChanged);
-          contentControls.items[i].track();
-        }
+      if (xmlPartIDSetting.value) {
+        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
+        const xpathToQueryFor = "/Reviewers/Reviewer";
+        const clientResult = customXmlPart.query(xpathToQueryFor, {
+          contoso: "http://schemas.contoso.com/review/1.0"
+        });
 
         await context.sync();
 
-        console.log("Added event handlers for when data is changed in content controls.");
+        console.log(`Queried custom XML part for ${xpathToQueryFor} and found ${clientResult.value.length} matches:`);
+        for (let i = 0; i < clientResult.value.length; i++) {
+          console.log(clientResult.value[i]);
+        }
+      } else {
+        console.warn("Didn't find custom XML part to query.");
       }
     });
+Word.CustomXmlPart#setXml:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondatachanged-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
 
 
-    async function contentControlDataChanged(event:
-    Word.ContentControlDataChangedEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.eventType} event detected. IDs of content controls where data was changed:`, event.ids);
-      });
-    }
-'Word.ContentControl#onDeleted:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondeleted-event.yaml
+    // Original XML: <Reviewers
+    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
 
 
+    // Replaces a custom XML part.
+
     await Word.run(async (context) => {
-      const contentControls: Word.ContentControlCollection = context.document.contentControls;
-      contentControls.load("items");
+      const settings: Word.SettingCollection = context.document.settings;
+      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartIdNS").load("value");
       await context.sync();
 
-      // Register the onDeleted event handler on each content control.
-      if (contentControls.items.length === 0) {
-        console.log("There aren't any content controls in this document so can't register event handlers.");
-      } else {
-        for (let i = 0; i < contentControls.items.length; i++) {
-          eventContexts[i] = contentControls.items[i].onDeleted.add(contentControlDeleted);
-          contentControls.items[i].track();
-        }
+      if (xmlPartIDSetting.value) {
+        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
+        const originalXmlBlob = customXmlPart.getXml();
+        await context.sync();
 
+        let readableXml = addLineBreaksToXML(originalXmlBlob.value);
+        console.log("Original custom XML part:", readableXml);
+
+        // The setXml method replaces the entire XML part.
+        customXmlPart.setXml(
+          "<Reviewers xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>John</Reviewer><Reviewer>Hitomi</Reviewer></Reviewers>"
+        );
+        const updatedXmlBlob = customXmlPart.getXml();
         await context.sync();
 
-        console.log("Added event handlers for when content controls are deleted.");
+        readableXml = addLineBreaksToXML(updatedXmlBlob.value);
+        console.log("Replaced custom XML part:", readableXml);
+      } else {
+        console.warn("Didn't find custom XML part to replace.");
       }
     });
+Word.CustomXmlPart#id:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondeleted-event.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
 
-    async function contentControlDeleted(event:
-    Word.ContentControlDeletedEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.eventType} event detected. IDs of content controls that were deleted:`, event.ids);
-      });
-    }
-'Word.ContentControl#onEntered:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onentered-event.yaml
 
+    // Adds a custom XML part.
 
     await Word.run(async (context) => {
-      const contentControls: Word.ContentControlCollection = context.document.contentControls;
-      contentControls.load("items");
+      const originalXml =
+        "<Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>";
+      const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.add(originalXml);
+      customXmlPart.load("id");
+      const xmlBlob = customXmlPart.getXml();
+
       await context.sync();
 
-      // Register the onEntered event handler on each content control.
-      if (contentControls.items.length === 0) {
-        console.log("There aren't any content controls in this document so can't register event handlers.");
-      } else {
-        for (let i = 0; i < contentControls.items.length; i++) {
-          eventContexts[i] = contentControls.items[i].onEntered.add(contentControlEntered);
-          contentControls.items[i].track();
-        }
+      const readableXml = addLineBreaksToXML(xmlBlob.value);
+      console.log("Added custom XML part:", readableXml);
 
-        await context.sync();
+      // Store the XML part's ID in a setting so the ID is available to other functions.
+      const settings: Word.SettingCollection = context.document.settings;
+      settings.add("ContosoReviewXmlPartId", customXmlPart.id);
 
-        console.log("Added event handlers for when the cursor is placed in content controls.");
-      }
+      await context.sync();
     });
+Word.CustomXmlPart#namespaceUri:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onentered-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
 
 
-    async function contentControlEntered(event:
-    Word.ContentControlEnteredEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.eventType} event detected. ID of content control that was entered: ${event.ids[0]}`);
-      });
-    }
-'Word.ContentControl#onExited:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onexited-event.yaml
+    // Original XML: <Reviewers
+    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
 
 
+    // Gets the namespace URI from a custom XML part.
+
     await Word.run(async (context) => {
-      const contentControls: Word.ContentControlCollection = context.document.contentControls;
-      contentControls.load("items");
-      await context.sync();
+      const settings: Word.SettingCollection = context.document.settings;
+      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartIdNS").load("value");
 
-      // Register the onExited event handler on each content control.
-      if (contentControls.items.length === 0) {
-        console.log("There aren't any content controls in this document so can't register event handlers.");
-      } else {
-        for (let i = 0; i < contentControls.items.length; i++) {
-          eventContexts[i] = contentControls.items[i].onExited.add(contentControlExited);
-          contentControls.items[i].track();
-        }
+      await context.sync();
 
+      if (xmlPartIDSetting.value) {
+        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
+        customXmlPart.load("namespaceUri");
         await context.sync();
 
-        console.log("Added event handlers for when the cursor is removed from within content controls.");
+        const namespaceUri = customXmlPart.namespaceUri;
+        console.log(`Namespace URI: ${JSON.stringify(namespaceUri)}`);
+      } else {
+        console.warn("Didn't find custom XML part.");
       }
     });
+Word.CustomXmlPartCollection#add:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onexited-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
 
 
-    async function contentControlExited(event:
-    Word.ContentControlExitedEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.eventType} event detected. ID of content control that was exited: ${event.ids[0]}`);
-      });
-    }
-'Word.ContentControl#onSelectionChanged:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml
+    // Adds a custom XML part.
 
+    // If you want to populate the CustomXml.namespaceUri property, you must
+    include the xmlns attribute.
 
     await Word.run(async (context) => {
-      const contentControls: Word.ContentControlCollection = context.document.contentControls;
-      contentControls.load("items");
+      const originalXml =
+        "<Reviewers xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>";
+      const customXmlPart = context.document.customXmlParts.add(originalXml);
+      customXmlPart.load(["id", "namespaceUri"]);
+      const xmlBlob = customXmlPart.getXml();
+
       await context.sync();
 
-      if (contentControls.items.length === 0) {
-        console.log("There aren't any content controls in this document so can't register event handlers.");
-      } else {
-        for (let i = 0; i < contentControls.items.length; i++) {
-          eventContexts[i] = contentControls.items[i].onSelectionChanged.add(contentControlSelectionChanged);
-          contentControls.items[i].track();
-        }
+      const readableXml = addLineBreaksToXML(xmlBlob.value);
+      console.log(`Added custom XML part with namespace URI ${customXmlPart.namespaceUri}:`, readableXml);
 
-        await context.sync();
+      // Store the XML part's ID in a setting so the ID is available to other functions.
+      const settings: Word.SettingCollection = context.document.settings;
+      settings.add("ContosoReviewXmlPartIdNS", customXmlPart.id);
 
-        console.log("Added event handlers for when selections are changed in content controls.");
-      }
+      await context.sync();
     });
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml
-
-
-    async function contentControlSelectionChanged(event:
-    Word.ContentControlSelectionChangedEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.eventType} event detected. IDs of content controls where selection was changed:`, event.ids);
-      });
-    }
-'Word.ContentControl#tag:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-content-controls.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
 
 
-    // Traverses each paragraph of the document and wraps a content control on
-    each with either a even or odd tags.
+    // Adds a custom XML part.
 
     await Word.run(async (context) => {
-      let paragraphs = context.document.body.paragraphs;
-      paragraphs.load("$none"); // Don't need any properties; just wrap each paragraph with a content control.
+      const originalXml =
+        "<Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>";
+      const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.add(originalXml);
+      customXmlPart.load("id");
+      const xmlBlob = customXmlPart.getXml();
 
       await context.sync();
 
-      for (let i = 0; i < paragraphs.items.length; i++) {
-        let contentControl = paragraphs.items[i].insertContentControl();
-        // For even, tag "even".
-        if (i % 2 === 0) {
-          contentControl.tag = "even";
-        } else {
-          contentControl.tag = "odd";
-        }
-      }
-      console.log("Content controls inserted: " + paragraphs.items.length);
+      const readableXml = addLineBreaksToXML(xmlBlob.value);
+      console.log("Added custom XML part:", readableXml);
+
+      // Store the XML part's ID in a setting so the ID is available to other functions.
+      const settings: Word.SettingCollection = context.document.settings;
+      settings.add("ContosoReviewXmlPartId", customXmlPart.id);
 
       await context.sync();
     });
-'Word.ContentControlAddedEventArgs:interface':
+Word.CustomXmlPartCollection#getByNamespace:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onadded-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
 
 
-    // Registers the onAdded event handler on the document.
+    // Original XML: <Reviewers
+    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+
+
+    // Gets the custom XML parts with the specified namespace URI.
 
     await Word.run(async (context) => {
-      eventContext = context.document.onContentControlAdded.add(contentControlAdded);
+      const namespaceUri = "http://schemas.contoso.com/review/1.0";
+      console.log(`Specified namespace URI: ${namespaceUri}`);
+      const scopedCustomXmlParts: Word.CustomXmlPartScopedCollection =
+        context.document.customXmlParts.getByNamespace(namespaceUri);
+      scopedCustomXmlParts.load("items");
       await context.sync();
 
-      console.log("Added event handler for when content controls are added.");
+      console.log(`Number of custom XML parts found with this namespace: ${!scopedCustomXmlParts.items ? 0 : scopedCustomXmlParts.items.length}`);
     });
+Word.CustomXmlPartCollection#getItem:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onadded-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
 
 
-    async function contentControlAdded(event: Word.ContentControlAddedEventArgs)
-    {
-      await Word.run(async (context) => {
-        console.log(`${event.eventType} event detected. IDs of content controls that were added:`, event.ids);
-      });
-    }
-'Word.ContentControlAppearance:enum':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-content-controls.yaml
+    // Original XML: <Reviewers
+    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
 
 
-    // Adds title and colors to odd and even content controls and changes their
-    appearance.
+    // Queries a custom XML part for elements matching the search terms.
 
     await Word.run(async (context) => {
-      // Get the complete sentence (as range) associated with the insertion point.
-      let evenContentControls = context.document.contentControls.getByTag("even");
-      let oddContentControls = context.document.contentControls.getByTag("odd");
-      evenContentControls.load("length");
-      oddContentControls.load("length");
+      const settings: Word.SettingCollection = context.document.settings;
+      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartIdNS").load("value");
 
       await context.sync();
 
-      for (let i = 0; i < evenContentControls.items.length; i++) {
-        // Change a few properties and append a paragraph.
-        evenContentControls.items[i].set({
-          color: "red",
-          title: "Odd ContentControl #" + (i + 1),
-          appearance: Word.ContentControlAppearance.tags
+      if (xmlPartIDSetting.value) {
+        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
+        const xpathToQueryFor = "/contoso:Reviewers";
+        const clientResult = customXmlPart.query(xpathToQueryFor, {
+          contoso: "http://schemas.contoso.com/review/1.0"
         });
-        evenContentControls.items[i].insertParagraph("This is an odd content control", "End");
-      }
 
-      for (let j = 0; j < oddContentControls.items.length; j++) {
-        // Change a few properties and append a paragraph.
-        oddContentControls.items[j].set({
-          color: "green",
-          title: "Even ContentControl #" + (j + 1),
-          appearance: "Tags"
-        });
-        oddContentControls.items[j].insertHtml("This is an <b>even</b> content control", "End");
-      }
+        await context.sync();
 
-      await context.sync();
+        console.log(`Queried custom XML part for ${xpathToQueryFor} and found ${clientResult.value.length} matches:`);
+        for (let i = 0; i < clientResult.value.length; i++) {
+          console.log(clientResult.value[i]);
+        }
+      } else {
+        console.warn("Didn't find custom XML part to query.");
+      }
     });
-'Word.ContentControlCollection:class':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/doc-assembly.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
+
+
+    // Original XML:
+    <Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+
 
+    // Queries a custom XML part for elements matching the search terms.
 
     await Word.run(async (context) => {
-        const contentControls: Word.ContentControlCollection = context.document.contentControls.getByTag("customer");
-        contentControls.load("text");
+      const settings: Word.SettingCollection = context.document.settings;
+      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartId").load("value");
 
-        await context.sync();
+      await context.sync();
 
-        for (let i = 0; i < contentControls.items.length; i++) {
-          contentControls.items[i].insertText("Fabrikam", "Replace");
-        }
+      if (xmlPartIDSetting.value) {
+        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
+        const xpathToQueryFor = "/Reviewers/Reviewer";
+        const clientResult = customXmlPart.query(xpathToQueryFor, {
+          contoso: "http://schemas.contoso.com/review/1.0"
+        });
 
         await context.sync();
+
+        console.log(`Queried custom XML part for ${xpathToQueryFor} and found ${clientResult.value.length} matches:`);
+        for (let i = 0; i < clientResult.value.length; i++) {
+          console.log(clientResult.value[i]);
+        }
+      } else {
+        console.warn("Didn't find custom XML part to query.");
+      }
     });
-'Word.ContentControlCollection#getByTag:member(1)':
+Word.CustomXmlPartScopedCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/doc-assembly.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
 
 
-    await Word.run(async (context) => {
-        const contentControls: Word.ContentControlCollection = context.document.contentControls.getByTag("customer");
-        contentControls.load("text");
+    // Original XML: <Reviewers
+    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
 
-        await context.sync();
 
-        for (let i = 0; i < contentControls.items.length; i++) {
-          contentControls.items[i].insertText("Fabrikam", "Replace");
-        }
+    // Gets the custom XML parts with the specified namespace URI.
 
-        await context.sync();
+    await Word.run(async (context) => {
+      const namespaceUri = "http://schemas.contoso.com/review/1.0";
+      console.log(`Specified namespace URI: ${namespaceUri}`);
+      const scopedCustomXmlParts: Word.CustomXmlPartScopedCollection =
+        context.document.customXmlParts.getByNamespace(namespaceUri);
+      scopedCustomXmlParts.load("items");
+      await context.sync();
+
+      console.log(`Number of custom XML parts found with this namespace: ${!scopedCustomXmlParts.items ? 0 : scopedCustomXmlParts.items.length}`);
     });
-'Word.ContentControlCollection#getFirstOrNullObject:member(1)':
+Word.Document:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-change-tracking.yaml
 
 
-    // Toggles the isChecked property of the first checkbox content control
-    found in the selection.
+    // Gets the current change tracking mode.
 
     await Word.run(async (context) => {
-      const selectedRange: Word.Range = context.document.getSelection();
-      let selectedContentControl = selectedRange
-        .getContentControls({
-          types: [Word.ContentControlType.checkBox]
-        })
-        .getFirstOrNullObject();
-      selectedContentControl.load("id,checkboxContentControl/isChecked");
-
+      const document: Word.Document = context.document;
+      document.load("changeTrackingMode");
       await context.sync();
 
-      if (selectedContentControl.isNullObject) {
-        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type,checkboxContentControl/isChecked");
-        await context.sync();
-
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.checkBox) {
-          console.warn("No checkbox content control is currently selected.");
-          return;
-        } else {
-          selectedContentControl = parentContentControl;
-        }
+      if (document.changeTrackingMode === Word.ChangeTrackingMode.trackMineOnly) {
+        console.log("Only my changes are being tracked.");
+      } else if (document.changeTrackingMode === Word.ChangeTrackingMode.trackAll) {
+        console.log("Everyone's changes are being tracked.");
+      } else {
+        console.log("No changes are being tracked.");
       }
-
-      const isCheckedBefore = selectedContentControl.checkboxContentControl.isChecked;
-      console.log("isChecked state before:", `id: ${selectedContentControl.id} ... isChecked: ${isCheckedBefore}`);
-      selectedContentControl.checkboxContentControl.isChecked = !isCheckedBefore;
-      selectedContentControl.load("id,checkboxContentControl/isChecked");
-      await context.sync();
-
-      console.log(
-        "isChecked state after:",
-        `id: ${selectedContentControl.id} ... isChecked: ${selectedContentControl.checkboxContentControl.isChecked}`
-      );
     });
-'Word.ContentControlDataChangedEventArgs:interface':
+Word.Document#addStyle:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondatachanged-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
+
 
+    // Adds a new style.
 
     await Word.run(async (context) => {
-      const contentControls: Word.ContentControlCollection = context.document.contentControls;
-      contentControls.load("items");
+      const newStyleName = (document.getElementById("new-style-name") as HTMLInputElement).value;
+      if (newStyleName == "") {
+        console.warn("Enter a style name to add.");
+        return;
+      }
+
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(newStyleName);
+      style.load();
       await context.sync();
 
-      // Register the onDataChanged event handler on each content control.
-      if (contentControls.items.length === 0) {
-        console.log("There aren't any content controls in this document so can't register event handlers.");
-      } else {
-        for (let i = 0; i < contentControls.items.length; i++) {
-          eventContexts[i] = contentControls.items[i].onDataChanged.add(contentControlDataChanged);
-          contentControls.items[i].track();
-        }
+      if (!style.isNullObject) {
+        console.warn(
+          `There's an existing style with the same name '${newStyleName}'! Please provide another style name.`
+        );
+        return;
+      }
 
-        await context.sync();
+      const newStyleType = ((document.getElementById("new-style-type") as HTMLSelectElement).value as unknown) as Word.StyleType;
+      context.document.addStyle(newStyleName, newStyleType);
+      await context.sync();
 
-        console.log("Added event handlers for when data is changed in content controls.");
-      }
+      console.log(newStyleName + " has been added to the style list.");
     });
+Word.Document#close:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondatachanged-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/save-close.yaml
 
 
-    async function contentControlDataChanged(event:
-    Word.ContentControlDataChangedEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.eventType} event detected. IDs of content controls where data was changed:`, event.ids);
-      });
-    }
-'Word.ContentControlDeletedEventArgs:interface':
+    // Closes the document with default behavior
+
+    // for current state of the document.
+
+    await Word.run(async (context) => {
+      context.document.close();
+    });
+Word.Document#compare:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondeleted-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/compare-documents.yaml
 
 
-    await Word.run(async (context) => {
-      const contentControls: Word.ContentControlCollection = context.document.contentControls;
-      contentControls.load("items");
-      await context.sync();
+    // Compares the current document with a specified external document.
 
-      // Register the onDeleted event handler on each content control.
-      if (contentControls.items.length === 0) {
-        console.log("There aren't any content controls in this document so can't register event handlers.");
-      } else {
-        for (let i = 0; i < contentControls.items.length; i++) {
-          eventContexts[i] = contentControls.items[i].onDeleted.add(contentControlDeleted);
-          contentControls.items[i].track();
-        }
+    await Word.run(async (context) => {
+      // Absolute path of an online or local document.
+      const filePath = (document.getElementById("filePath") as HTMLInputElement).value;
+      // Options that configure the compare operation.
+      const options: Word.DocumentCompareOptions = {
+        compareTarget: Word.CompareTarget.compareTargetCurrent,
+        detectFormatChanges: false
+        // Other options you choose...
+        };
+      context.document.compare(filePath, options);
 
-        await context.sync();
+      await context.sync();
 
-        console.log("Added event handlers for when content controls are deleted.");
-      }
+      console.log("Differences shown in the current document.");
     });
+Word.Document#getContentControls:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondeleted-event.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
 
-    async function contentControlDeleted(event:
-    Word.ContentControlDeletedEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.eventType} event detected. IDs of content controls that were deleted:`, event.ids);
-      });
-    }
-'Word.ContentControlEnteredEventArgs:interface':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onentered-event.yaml
 
+    // Toggles the isChecked property on all checkbox content controls.
 
     await Word.run(async (context) => {
-      const contentControls: Word.ContentControlCollection = context.document.contentControls;
+      let contentControls = context.document.getContentControls({
+        types: [Word.ContentControlType.checkBox]
+      });
       contentControls.load("items");
+
       await context.sync();
 
-      // Register the onEntered event handler on each content control.
-      if (contentControls.items.length === 0) {
-        console.log("There aren't any content controls in this document so can't register event handlers.");
-      } else {
-        for (let i = 0; i < contentControls.items.length; i++) {
-          eventContexts[i] = contentControls.items[i].onEntered.add(contentControlEntered);
-          contentControls.items[i].track();
-        }
+      const length = contentControls.items.length;
+      console.log(`Number of checkbox content controls: ${length}`);
 
-        await context.sync();
+      if (length <= 0) {
+        return;
+      }
 
-        console.log("Added event handlers for when the cursor is placed in content controls.");
+      const checkboxContentControls = [];
+      for (let i = 0; i < length; i++) {
+        let contentControl = contentControls.items[i];
+        contentControl.load("id,checkboxContentControl/isChecked");
+        checkboxContentControls.push(contentControl);
       }
-    });
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onentered-event.yaml
 
+      await context.sync();
 
-    async function contentControlEntered(event:
-    Word.ContentControlEnteredEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.eventType} event detected. ID of content control that was entered: ${event.ids[0]}`);
-      });
-    }
-'Word.ContentControlExitedEventArgs:interface':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onexited-event.yaml
+      console.log("isChecked state before:");
+      const updatedCheckboxContentControls = [];
+      for (let i = 0; i < checkboxContentControls.length; i++) {
+        const currentCheckboxContentControl = checkboxContentControls[i];
+        const isCheckedBefore = currentCheckboxContentControl.checkboxContentControl.isChecked;
+        console.log(`id: ${currentCheckboxContentControl.id} ... isChecked: ${isCheckedBefore}`);
 
+        currentCheckboxContentControl.checkboxContentControl.isChecked = !isCheckedBefore;
+        currentCheckboxContentControl.load("id,checkboxContentControl/isChecked");
+        updatedCheckboxContentControls.push(currentCheckboxContentControl);
+      }
 
-    await Word.run(async (context) => {
-      const contentControls: Word.ContentControlCollection = context.document.contentControls;
-      contentControls.load("items");
       await context.sync();
 
-      // Register the onExited event handler on each content control.
-      if (contentControls.items.length === 0) {
-        console.log("There aren't any content controls in this document so can't register event handlers.");
-      } else {
-        for (let i = 0; i < contentControls.items.length; i++) {
-          eventContexts[i] = contentControls.items[i].onExited.add(contentControlExited);
-          contentControls.items[i].track();
-        }
-
-        await context.sync();
-
-        console.log("Added event handlers for when the cursor is removed from within content controls.");
+      console.log("isChecked state after:");
+      for (let i = 0; i < updatedCheckboxContentControls.length; i++) {
+        const currentCheckboxContentControl = updatedCheckboxContentControls[i];
+        console.log(
+          `id: ${currentCheckboxContentControl.id} ... isChecked: ${currentCheckboxContentControl.checkboxContentControl.isChecked}`
+        );
       }
     });
+Word.Document#getParagraphByUniqueLocalId:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onexited-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onadded-event.yaml
 
 
-    async function contentControlExited(event:
-    Word.ContentControlExitedEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.eventType} event detected. ID of content control that was exited: ${event.ids[0]}`);
-      });
-    }
-'Word.ContentControlListItem:class':
+    await Word.run(async (context) => {
+      const paragraphId = (document.getElementById("paragraph-id") as HTMLInputElement).value;
+      const paragraph: Word.Paragraph = context.document.getParagraphByUniqueLocalId(paragraphId);
+      paragraph.load();
+      await paragraph.context.sync();
+
+      console.log(paragraph);
+    });
+Word.Document#getStyles:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
 
 
-    // Deletes the provided list item from the first dropdown list content
-    control in the selection.
+    // Gets the number of available styles stored with the document.
 
     await Word.run(async (context) => {
-      const listItemText = $("#item-to-delete")
-        .val()
-        .toString()
-        .trim();
-      const selectedRange: Word.Range = context.document.getSelection();
-      let selectedContentControl = selectedRange
-        .getContentControls({
-          types: [Word.ContentControlType.dropDownList]
-        })
-        .getFirstOrNullObject();
-      selectedContentControl.load("id,dropDownListContentControl");
+      const styles: Word.StyleCollection = context.document.getStyles();
+      const count = styles.getCount();
       await context.sync();
 
-      if (selectedContentControl.isNullObject) {
-        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type,dropDownListContentControl");
-        await context.sync();
+      console.log(`Number of styles: ${count.value}`);
+    });
+Word.Document#importStylesFromJson:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-custom-style.yaml
 
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
-          console.warn("No dropdown list content control is currently selected.");
-          return;
-        } else {
-          selectedContentControl = parentContentControl;
-        }
-      }
 
-      let selectedDropdownList: Word.DropDownListContentControl = selectedContentControl.dropDownListContentControl;
-      selectedDropdownList.listItems.load("items/*");
-      await context.sync();
+    // Imports styles from JSON.
 
-      let listItems: Word.ContentControlListItemCollection = selectedContentControl.dropDownListContentControl.listItems;
-      let itemToDelete: Word.ContentControlListItem = listItems.items.find((item) => item.displayText === listItemText);
-      if (!itemToDelete) {
-        console.warn(`List item doesn't exist in control with ID ${selectedContentControl.id}: ${listItemText}`)
-        return;
-      }
-      
-      itemToDelete.delete();
-      await context.sync();
+    await Word.run(async (context) => {
+      const str =
+        '{"styles":[{"baseStyle":"Default Paragraph Font","builtIn":false,"inUse":true,"linked":false,"nameLocal":"NewCharStyle","priority":2,"quickStyle":true,"type":"Character","unhideWhenUsed":false,"visibility":false,"paragraphFormat":null,"font":{"name":"DengXian Light","size":16.0,"bold":true,"italic":false,"color":"#F1A983","underline":"None","subscript":false,"superscript":true,"strikeThrough":true,"doubleStrikeThrough":false,"highlightColor":null,"hidden":false},"shading":{"backgroundPatternColor":"#FF0000"}},{"baseStyle":"Normal","builtIn":false,"inUse":true,"linked":false,"nextParagraphStyle":"NewParaStyle","nameLocal":"NewParaStyle","priority":1,"quickStyle":true,"type":"Paragraph","unhideWhenUsed":false,"visibility":false,"paragraphFormat":{"alignment":"Centered","firstLineIndent":0.0,"keepTogether":false,"keepWithNext":false,"leftIndent":72.0,"lineSpacing":18.0,"lineUnitAfter":0.0,"lineUnitBefore":0.0,"mirrorIndents":false,"outlineLevel":"OutlineLevelBodyText","rightIndent":72.0,"spaceAfter":30.0,"spaceBefore":30.0,"widowControl":true},"font":{"name":"DengXian","size":14.0,"bold":true,"italic":true,"color":"#8DD873","underline":"Single","subscript":false,"superscript":false,"strikeThrough":false,"doubleStrikeThrough":true,"highlightColor":null,"hidden":false},"shading":{"backgroundPatternColor":"#00FF00"}},{"baseStyle":"Table Normal","builtIn":false,"inUse":true,"linked":false,"nextParagraphStyle":"NewTableStyle","nameLocal":"NewTableStyle","priority":100,"type":"Table","unhideWhenUsed":false,"visibility":false,"paragraphFormat":{"alignment":"Left","firstLineIndent":0.0,"keepTogether":false,"keepWithNext":false,"leftIndent":0.0,"lineSpacing":12.0,"lineUnitAfter":0.0,"lineUnitBefore":0.0,"mirrorIndents":false,"outlineLevel":"OutlineLevelBodyText","rightIndent":0.0,"spaceAfter":0.0,"spaceBefore":0.0,"widowControl":true},"font":{"name":"DengXian","size":20.0,"bold":false,"italic":true,"color":"#D86DCB","underline":"None","subscript":false,"superscript":false,"strikeThrough":false,"doubleStrikeThrough":false,"highlightColor":null,"hidden":false},"tableStyle":{"allowBreakAcrossPage":true,"alignment":"Left","bottomCellMargin":0.0,"leftCellMargin":0.08,"rightCellMargin":0.08,"topCellMargin":0.0,"cellSpacing":0.0},"shading":{"backgroundPatternColor":"#60CAF3"}}]}';
+      const styles = context.document.importStylesFromJson(str);
 
-      console.log(`List item deleted from control with ID ${selectedContentControl.id}: ${listItemText}`);
+      // If you'd like to set how conflicting styles are handled, use the importedStylesConflictBehavior parameter that was introduced in the Desktop 1.1 requirement set. "Ignore" is the default.
+      ////const styles = context.document.importStylesFromJson(str, Word.ImportedStylesConflictBehavior.Ignore);
+
+      await context.sync();
+      console.log("Styles imported from JSON:", styles);
     });
-'Word.ContentControlListItem#delete:member(1)':
+Word.Document#insertFileFromBase64:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-external-document.yaml
 
 
-    // Deletes the provided list item from the first combo box content control
-    in the selection.
+    // Inserts content (applying selected settings) from another document passed
+    in as a Base64-encoded string.
 
     await Word.run(async (context) => {
-      const listItemText = $("#item-to-delete")
-        .val()
-        .toString()
-        .trim();
-      const selectedRange: Word.Range = context.document.getSelection();
-      let selectedContentControl = selectedRange
-        .getContentControls({
-          types: [Word.ContentControlType.comboBox]
-        })
-        .getFirstOrNullObject();
-      selectedContentControl.load("id,comboBoxContentControl");
+      // Use the Base64-encoded string representation of the selected .docx file.
+      context.document.insertFileFromBase64(externalDocument, "Replace", {
+        importTheme: true,
+        importStyles: true,
+        importParagraphSpacing: true,
+        importPageColor: true,
+        importChangeTrackingMode: true,
+        importCustomProperties: true,
+        importCustomXmlParts: true,
+        importDifferentOddEvenPages: true
+      });
       await context.sync();
+    });
+Word.Document#save:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/save-close.yaml
 
-      if (selectedContentControl.isNullObject) {
-        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type,comboBoxContentControl");
-        await context.sync();
-
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.comboBox) {
-          console.warn("No combo box content control is currently selected.");
-          return;
-        } else {
-          selectedContentControl = parentContentControl;
-        }
-      }
 
-      let selectedComboBox: Word.ComboBoxContentControl = selectedContentControl.comboBoxContentControl;
-      selectedComboBox.listItems.load("items/*");
-      await context.sync();
+    // Saves the document with default behavior
 
-      let listItems: Word.ContentControlListItemCollection = selectedContentControl.comboBoxContentControl.listItems;
-      let itemToDelete: Word.ContentControlListItem = listItems.items.find((item) => item.displayText === listItemText);
-      if (!itemToDelete) {
-        console.warn(`List item doesn't exist in control with ID ${selectedContentControl.id}: ${listItemText}`);
-        return;
-      }
+    // for current state of the document.
 
-      itemToDelete.delete();
+    await Word.run(async (context) => {
+      context.document.save();
       await context.sync();
-
-      console.log(`List item deleted from control with ID ${selectedContentControl.id}: ${listItemText}`);
     });
-'Word.ContentControlListItem#displayText:member':
+Word.Document#activeWindow:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
 
-    // Deletes the provided list item from the first dropdown list content
-    control in the selection.
 
     await Word.run(async (context) => {
-      const listItemText = $("#item-to-delete")
-        .val()
-        .toString()
-        .trim();
-      const selectedRange: Word.Range = context.document.getSelection();
-      let selectedContentControl = selectedRange
-        .getContentControls({
-          types: [Word.ContentControlType.dropDownList]
-        })
-        .getFirstOrNullObject();
-      selectedContentControl.load("id,dropDownListContentControl");
+      // Gets the first paragraph of each page.
+      console.log("Getting first paragraph of each page...");
+
+      // Get the active window.
+      const activeWindow: Word.Window = context.document.activeWindow;
+      activeWindow.load();
+
+      // Get the active pane.
+      const activePane: Word.Pane = activeWindow.activePane;
+      activePane.load();
+
+      // Get all pages.
+      const pages: Word.PageCollection = activePane.pages;
+      pages.load();
+
       await context.sync();
 
-      if (selectedContentControl.isNullObject) {
-        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type,dropDownListContentControl");
-        await context.sync();
+      // Get page index and paragraphs of each page.
+      const pagesIndexes = [];
+      const pagesNumberOfParagraphs = [];
+      const pagesFirstParagraphText = [];
+      for (let i = 0; i < pages.items.length; i++) {
+        const page = pages.items[i];
+        page.load("index");
+        pagesIndexes.push(page);
 
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
-          console.warn("No dropdown list content control is currently selected.");
-          return;
-        } else {
-          selectedContentControl = parentContentControl;
-        }
+        const paragraphs = page.getRange().paragraphs;
+        paragraphs.load("items/length");
+        pagesNumberOfParagraphs.push(paragraphs);
+
+        const firstParagraph = paragraphs.getFirst();
+        firstParagraph.load("text");
+        pagesFirstParagraphText.push(firstParagraph);
       }
 
-      let selectedDropdownList: Word.DropDownListContentControl = selectedContentControl.dropDownListContentControl;
-      selectedDropdownList.listItems.load("items/*");
       await context.sync();
 
-      let listItems: Word.ContentControlListItemCollection = selectedContentControl.dropDownListContentControl.listItems;
-      let itemToDelete: Word.ContentControlListItem = listItems.items.find((item) => item.displayText === listItemText);
-      if (!itemToDelete) {
-        console.warn(`List item doesn't exist in control with ID ${selectedContentControl.id}: ${listItemText}`)
-        return;
+      for (let i = 0; i < pagesIndexes.length; i++) {
+        console.log(`Page index: ${pagesIndexes[i].index}`);
+        console.log(`Number of paragraphs: ${pagesNumberOfParagraphs[i].items.length}`);
+        console.log("First paragraph's text:", pagesFirstParagraphText[i].text);
       }
-      
-      itemToDelete.delete();
+    });
+Word.Document#changeTrackingMode:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-change-tracking.yaml
+
+
+    // Gets the current change tracking mode.
+
+    await Word.run(async (context) => {
+      const document: Word.Document = context.document;
+      document.load("changeTrackingMode");
       await context.sync();
 
-      console.log(`List item deleted from control with ID ${selectedContentControl.id}: ${listItemText}`);
+      if (document.changeTrackingMode === Word.ChangeTrackingMode.trackMineOnly) {
+        console.log("Only my changes are being tracked.");
+      } else if (document.changeTrackingMode === Word.ChangeTrackingMode.trackAll) {
+        console.log("Everyone's changes are being tracked.");
+      } else {
+        console.log("No changes are being tracked.");
+      }
     });
-'Word.ContentControlListItemCollection:class':
+Word.Document#onAnnotationClicked:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Gets the list items from the first combo box content control found in the
-    selection.
+    // Registers event handlers.
 
     await Word.run(async (context) => {
-      const selectedRange: Word.Range = context.document.getSelection();
-      let selectedContentControl = selectedRange
-        .getContentControls({
-          types: [Word.ContentControlType.comboBox]
-        })
-        .getFirstOrNullObject();
-      selectedContentControl.load("id,comboBoxContentControl");
-      await context.sync();
-
-      if (selectedContentControl.isNullObject) {
-        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type,comboBoxContentControl");
-        await context.sync();
+      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
+      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
 
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.comboBox) {
-          console.warn("No combo box content control is currently selected.");
-          return;
-        } else {
-          selectedContentControl = parentContentControl;
-        }
-      }
+      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
+      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
+      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
+      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
+      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
 
-      let selectedComboBox: Word.ComboBoxContentControl = selectedContentControl.comboBoxContentControl;
-      selectedComboBox.listItems.load("items");
       await context.sync();
 
-      const currentItems: Word.ContentControlListItemCollection = selectedComboBox.listItems;
-      console.log(`The list from the combo box content control with ID ${selectedContentControl.id}:`, currentItems);
+      console.log("Event handlers registered.");
     });
-'Word.ContentControlOptions:interface':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
-
-
-    // Toggles the isChecked property of the first checkbox content control
-    found in the selection.
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
-    await Word.run(async (context) => {
-      const selectedRange: Word.Range = context.document.getSelection();
-      let selectedContentControl = selectedRange
-        .getContentControls({
-          types: [Word.ContentControlType.checkBox]
-        })
-        .getFirstOrNullObject();
-      selectedContentControl.load("id,checkboxContentControl/isChecked");
 
-      await context.sync();
+    async function onClickedHandler(args: Word.AnnotationClickedEventArgs) {
+      await Word.run(async (context) => {
+        const annotation: Word.Annotation = context.document.getAnnotationById(args.id);
+        annotation.load("critiqueAnnotation");
 
-      if (selectedContentControl.isNullObject) {
-        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type,checkboxContentControl/isChecked");
         await context.sync();
 
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.checkBox) {
-          console.warn("No checkbox content control is currently selected.");
-          return;
-        } else {
-          selectedContentControl = parentContentControl;
-        }
-      }
-
-      const isCheckedBefore = selectedContentControl.checkboxContentControl.isChecked;
-      console.log("isChecked state before:", `id: ${selectedContentControl.id} ... isChecked: ${isCheckedBefore}`);
-      selectedContentControl.checkboxContentControl.isChecked = !isCheckedBefore;
-      selectedContentControl.load("id,checkboxContentControl/isChecked");
-      await context.sync();
-
-      console.log(
-        "isChecked state after:",
-        `id: ${selectedContentControl.id} ... isChecked: ${selectedContentControl.checkboxContentControl.isChecked}`
-      );
-    });
-'Word.ContentControlSelectionChangedEventArgs:interface':
+        console.log(`AnnotationClicked: ID ${args.id}:`, annotation.critiqueAnnotation.critique);
+      });
+    }
+Word.Document#onAnnotationHovered:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
+    // Registers event handlers.
+
     await Word.run(async (context) => {
-      const contentControls: Word.ContentControlCollection = context.document.contentControls;
-      contentControls.load("items");
-      await context.sync();
+      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
+      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
 
-      if (contentControls.items.length === 0) {
-        console.log("There aren't any content controls in this document so can't register event handlers.");
-      } else {
-        for (let i = 0; i < contentControls.items.length; i++) {
-          eventContexts[i] = contentControls.items[i].onSelectionChanged.add(contentControlSelectionChanged);
-          contentControls.items[i].track();
-        }
+      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
+      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
+      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
+      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
+      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
 
-        await context.sync();
+      await context.sync();
 
-        console.log("Added event handlers for when selections are changed in content controls.");
-      }
+      console.log("Event handlers registered.");
     });
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    async function contentControlSelectionChanged(event:
-    Word.ContentControlSelectionChangedEventArgs) {
+    async function onHoveredHandler(args: Word.AnnotationHoveredEventArgs) {
       await Word.run(async (context) => {
-        console.log(`${event.eventType} event detected. IDs of content controls where selection was changed:`, event.ids);
+        const annotation: Word.Annotation = context.document.getAnnotationById(args.id);
+        annotation.load("critiqueAnnotation");
+
+        await context.sync();
+
+        console.log(`AnnotationHovered: ID ${args.id}:`, annotation.critiqueAnnotation.critique);
       });
     }
-'Word.ContentControlState:enum':
+Word.Document#onAnnotationInserted:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-content-controls.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Sets the state of the first content control.
+    // Registers event handlers.
 
     await Word.run(async (context) => {
-      const state = ($("#state-to-set").val() as unknown) as Word.ContentControlState;
-      let firstContentControl = context.document.contentControls.getFirstOrNullObject();
-      await context.sync();
+      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
+      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
 
-      if (firstContentControl.isNullObject) {
-        console.warn("There are no content controls in this document.");
-        return;
-      }
+      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
+      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
+      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
+      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
+      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
 
-      firstContentControl.setState(state);
-      firstContentControl.load("id");
       await context.sync();
 
-      console.log(`Set state of first content control with ID ${firstContentControl.id} to ${state}.`);
+      console.log("Event handlers registered.");
     });
-'Word.ContentControlType:enum':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Traverses each paragraph of the document and places a checkbox content
-    control at the beginning of each.
+    async function onInsertedHandler(args: Word.AnnotationInsertedEventArgs) {
+      await Word.run(async (context) => {
+        const annotations = [];
+        for (let i = 0; i < args.ids.length; i++) {
+          let annotation: Word.Annotation = context.document.getAnnotationById(args.ids[i]);
+          annotation.load("id,critiqueAnnotation");
 
-    await Word.run(async (context) => {
-      let paragraphs = context.document.body.paragraphs;
-      paragraphs.load("$none"); // Don't need any properties; just start each paragraph with a content control.
+          annotations.push(annotation);
+        }
 
-      await context.sync();
+        await context.sync();
 
-      for (let i = 0; i < paragraphs.items.length; i++) {
-        let contentControl = paragraphs.items[i]
-          .getRange(Word.RangeLocation.start)
-          .insertContentControl(Word.ContentControlType.checkBox);
-      }
-      console.log("Checkbox content controls inserted: " + paragraphs.items.length);
+        for (let annotation of annotations) {
+          console.log(`AnnotationInserted: ID ${annotation.id}:`, annotation.critiqueAnnotation.critique);
+        }
+      });
+    }
+Word.Document#onAnnotationPopupAction:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+
+
+    // Registers event handlers.
+
+    await Word.run(async (context) => {
+      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
+      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
+
+      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
+      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
+      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
+      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
+      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
 
       await context.sync();
+
+      console.log("Event handlers registered.");
     });
-'Word.Critique:interface':
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Adds annotations to the selected paragraph.
+    async function onPopupActionHandler(args:
+    Word.AnnotationPopupActionEventArgs) {
+      await Word.run(async (context) => {
+        let message = `AnnotationPopupAction: ID ${args.id} = `;
+        if (args.action === "Accept") {
+          message += `Accepted: ${args.critiqueSuggestion}`;
+        } else {
+          message += "Rejected";
+        }
+
+        console.log(message);
+      });
+    }
+Word.Document#onAnnotationRemoved:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+
+
+    // Registers event handlers.
 
     await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const options: Word.CritiquePopupOptions = {
-        brandingTextResourceId: "PG.TabLabel",
-        subtitleResourceId: "PG.HelpCommand.TipTitle",
-        titleResourceId: "PG.HelpCommand.Label",
-        suggestions: ["suggestion 1", "suggestion 2", "suggestion 3"]
-      };
-      const critique1: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.red,
-        start: 1,
-        length: 3,
-        popupOptions: options
-      };
-      const critique2: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.green,
-        start: 6,
-        length: 1,
-        popupOptions: options
-      };
-      const critique3: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.blue,
-        start: 10,
-        length: 3,
-        popupOptions: options
-      };
-      const critique4: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.lavender,
-        start: 14,
-        length: 3,
-        popupOptions: options
-      };
-      const critique5: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.berry,
-        start: 18,
-        length: 10,
-        popupOptions: options
-      };
-      const annotationSet: Word.AnnotationSet = {
-        critiques: [critique1, critique2, critique3, critique4, critique5]
-      };
+      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
+      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
 
-      const annotationIds = paragraph.insertAnnotations(annotationSet);
+      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
+      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
+      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
+      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
+      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
 
       await context.sync();
 
-      console.log("Annotations inserted:", annotationIds.value);
+      console.log("Event handlers registered.");
     });
-'Word.CritiqueAnnotation:class':
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Gets annotations found in the selected paragraph.
+    async function onRemovedHandler(args: Word.AnnotationRemovedEventArgs) {
+      await Word.run(async (context) => {
+        for (let id of args.ids) {
+          console.log(`AnnotationRemoved: ID ${id}`);
+        }
+      });
+    }
+Word.Document#onContentControlAdded:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onadded-event.yaml
 
-    await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
-      annotations.load("id,state,critiqueAnnotation");
 
+    // Registers the onAdded event handler on the document.
+
+    await Word.run(async (context) => {
+      eventContext = context.document.onContentControlAdded.add(contentControlAdded);
       await context.sync();
 
-      console.log("Annotations found:");
+      console.log("Added event handler for when content controls are added.");
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onadded-event.yaml
 
-      for (let i = 0; i < annotations.items.length; i++) {
-        const annotation: Word.Annotation = annotations.items[i];
 
-        console.log(`ID ${annotation.id} - state '${annotation.state}':`, annotation.critiqueAnnotation.critique);
-      }
-    });
-'Word.CritiqueAnnotation#accept:member(1)':
+    async function contentControlAdded(event: Word.ContentControlAddedEventArgs)
+    {
+      await Word.run(async (context) => {
+        console.log(`${event.eventType} event detected. IDs of content controls that were added:`, event.ids);
+      });
+    }
+Word.Document#onParagraphAdded:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onadded-event.yaml
 
 
-    // Accepts the first annotation found in the selected paragraph.
+    // Registers the onParagraphAdded event handler on the document.
 
     await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
-      annotations.load("id,state,critiqueAnnotation");
-
+      eventContext = context.document.onParagraphAdded.add(paragraphAdded);
       await context.sync();
 
-      for (let i = 0; i < annotations.items.length; i++) {
-        const annotation: Word.Annotation = annotations.items[i];
+      console.log("Added event handler for when paragraphs are added.");
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onadded-event.yaml
 
-        if (annotation.state === Word.AnnotationState.created) {
-          console.log(`Accepting ID ${annotation.id}...`);
-          annotation.critiqueAnnotation.accept();
 
-          await context.sync();
-          break;
-        }
-      }
-    });
-'Word.CritiqueAnnotation#reject:member(1)':
+    async function paragraphAdded(event: Word.ParagraphAddedEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.type} event detected. IDs of paragraphs that were added:`, event.uniqueLocalIds);
+      });
+    }
+Word.Document#onParagraphChanged:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onchanged-event.yaml
 
 
-    // Rejects the last annotation found in the selected paragraph.
+    // Registers the onParagraphChanged event handler on the document.
 
     await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
-      annotations.load("id,state,critiqueAnnotation");
-
+      eventContext = context.document.onParagraphChanged.add(paragraphChanged);
       await context.sync();
 
-      for (let i = annotations.items.length - 1; i >= 0; i--) {
-        const annotation: Word.Annotation = annotations.items[i];
+      console.log("Added event handler for when content is changed in paragraphs.");
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onchanged-event.yaml
 
-        if (annotation.state === Word.AnnotationState.created) {
-          console.log(`Rejecting ID ${annotation.id}...`);
-          annotation.critiqueAnnotation.reject();
 
-          await context.sync();
-          break;
-        }
-      }
-    });
-'Word.CritiqueAnnotation#critique:member':
+    async function paragraphChanged(event: Word.ParagraphChangedEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.type} event detected. IDs of paragraphs where content was changed:`, event.uniqueLocalIds);
+      });
+    }
+Word.Document#onParagraphDeleted:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/ondeleted-event.yaml
 
 
-    // Gets annotations found in the selected paragraph.
+    // Registers the onParagraphDeleted event handler on the document.
 
     await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
-      annotations.load("id,state,critiqueAnnotation");
-
+      eventContext = context.document.onParagraphDeleted.add(paragraphDeleted);
       await context.sync();
 
-      console.log("Annotations found:");
-
-      for (let i = 0; i < annotations.items.length; i++) {
-        const annotation: Word.Annotation = annotations.items[i];
-
-        console.log(`ID ${annotation.id} - state '${annotation.state}':`, annotation.critiqueAnnotation.critique);
-      }
+      console.log("Added event handlers for when paragraphs are deleted.");
     });
-'Word.CritiqueColorScheme:enum':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/ondeleted-event.yaml
 
-    // Adds annotations to the selected paragraph.
 
-    await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const options: Word.CritiquePopupOptions = {
-        brandingTextResourceId: "PG.TabLabel",
-        subtitleResourceId: "PG.HelpCommand.TipTitle",
-        titleResourceId: "PG.HelpCommand.Label",
-        suggestions: ["suggestion 1", "suggestion 2", "suggestion 3"]
-      };
-      const critique1: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.red,
-        start: 1,
-        length: 3,
-        popupOptions: options
-      };
-      const critique2: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.green,
-        start: 6,
-        length: 1,
-        popupOptions: options
-      };
-      const critique3: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.blue,
-        start: 10,
-        length: 3,
-        popupOptions: options
-      };
-      const critique4: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.lavender,
-        start: 14,
-        length: 3,
-        popupOptions: options
-      };
-      const critique5: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.berry,
-        start: 18,
-        length: 10,
-        popupOptions: options
-      };
-      const annotationSet: Word.AnnotationSet = {
-        critiques: [critique1, critique2, critique3, critique4, critique5]
-      };
+    async function paragraphDeleted(event: Word.ParagraphDeletedEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.type} event detected. IDs of paragraphs that were deleted:`, event.uniqueLocalIds);
+      });
+    }
+Word.Document#properties:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/30-properties/get-built-in-properties.yaml
 
-      const annotationIds = paragraph.insertAnnotations(annotationSet);
 
-      await context.sync();
+    await Word.run(async (context) => {
+        const builtInProperties: Word.DocumentProperties = context.document.properties;
+        builtInProperties.load("*"); // Let's get all!
 
-      console.log("Annotations inserted:", annotationIds.value);
+        await context.sync();
+        console.log(JSON.stringify(builtInProperties, null, 4));
     });
-'Word.CritiquePopupOptions:interface':
+Word.Document#settings:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-settings.yaml
 
 
-    // Adds annotations to the selected paragraph.
+    // Gets all custom settings this add-in set on this document.
 
     await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const options: Word.CritiquePopupOptions = {
-        brandingTextResourceId: "PG.TabLabel",
-        subtitleResourceId: "PG.HelpCommand.TipTitle",
-        titleResourceId: "PG.HelpCommand.Label",
-        suggestions: ["suggestion 1", "suggestion 2", "suggestion 3"]
-      };
-      const critique1: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.red,
-        start: 1,
-        length: 3,
-        popupOptions: options
-      };
-      const critique2: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.green,
-        start: 6,
-        length: 1,
-        popupOptions: options
-      };
-      const critique3: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.blue,
-        start: 10,
-        length: 3,
-        popupOptions: options
-      };
-      const critique4: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.lavender,
-        start: 14,
-        length: 3,
-        popupOptions: options
-      };
-      const critique5: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.berry,
-        start: 18,
-        length: 10,
-        popupOptions: options
-      };
-      const annotationSet: Word.AnnotationSet = {
-        critiques: [critique1, critique2, critique3, critique4, critique5]
-      };
-
-      const annotationIds = paragraph.insertAnnotations(annotationSet);
-
+      const settings: Word.SettingCollection = context.document.settings;
+      settings.load("items");
       await context.sync();
 
-      console.log("Annotations inserted:", annotationIds.value);
+      if (settings.items.length == 0) {
+        console.log("There are no settings.");
+      } else {
+        console.log("All settings:");
+        for (let i = 0; i < settings.items.length; i++) {
+          console.log(settings.items[i]);
+        }
+      }
     });
-'Word.CustomProperty:class':
+Word.Document#windows:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/30-properties/read-write-custom-document-properties.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
 
 
     await Word.run(async (context) => {
-        const properties: Word.CustomPropertyCollection = context.document.properties.customProperties;
-        properties.load("key,type,value");
+      // Gets the document windows.
+      const windows: Word.WindowCollection = context.document.windows;
+      windows.load("windows/items/length");
 
-        await context.sync();
-        for (let i = 0; i < properties.items.length; i++)
-            console.log("Property Name:" + properties.items[i].key + "; Type=" + properties.items[i].type + "; Property Value=" + properties.items[i].value);
+      await context.sync();
+
+      console.log(`Number of windows for this document: ${windows.items.length}`);
     });
-'Word.CustomPropertyCollection:class':
+Word.DocumentCompareOptions:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/30-properties/read-write-custom-document-properties.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/compare-documents.yaml
+
 
+    // Compares the current document with a specified external document.
+
+    await Word.run(async (context) => {
+      // Absolute path of an online or local document.
+      const filePath = (document.getElementById("filePath") as HTMLInputElement).value;
+      // Options that configure the compare operation.
+      const options: Word.DocumentCompareOptions = {
+        compareTarget: Word.CompareTarget.compareTargetCurrent,
+        detectFormatChanges: false
+        // Other options you choose...
+        };
+      context.document.compare(filePath, options);
 
-    await Word.run(async (context) => {
-        const properties: Word.CustomPropertyCollection = context.document.properties.customProperties;
-        properties.load("key,type,value");
+      await context.sync();
 
-        await context.sync();
-        for (let i = 0; i < properties.items.length; i++)
-            console.log("Property Name:" + properties.items[i].key + "; Type=" + properties.items[i].type + "; Property Value=" + properties.items[i].value);
+      console.log("Differences shown in the current document.");
     });
-'Word.CustomPropertyCollection#add:member(1)':
+Word.DocumentCreated:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/30-properties/read-write-custom-document-properties.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-external-document.yaml
+
 
+    // Updates the text of the current document with the text from another
+    document passed in as a Base64-encoded string.
 
     await Word.run(async (context) => {
-        context.document.properties.customProperties.add("Numeric Property", 1234);
+      // Use the Base64-encoded string representation of the selected .docx file.
+      const externalDoc: Word.DocumentCreated = context.application.createDocument(externalDocument);
+      await context.sync();
 
-        await context.sync();
-        console.log("Property added");
+      if (!Office.context.requirements.isSetSupported("WordApiHiddenDocument", "1.3")) {
+        console.warn("The WordApiHiddenDocument 1.3 requirement set isn't supported on this client so can't proceed. Try this action on a platform that supports this requirement set.");
+        return;
+      }
+
+      const externalDocBody: Word.Body = externalDoc.body;
+      externalDocBody.load("text");
+      await context.sync();
+
+      // Insert the external document's text at the beginning of the current document's body.
+      const externalDocBodyText = externalDocBody.text;
+      const currentDocBody: Word.Body = context.document.body;
+      currentDocBody.insertText(externalDocBodyText, Word.InsertLocation.start);
+      await context.sync();
     });
+Word.DocumentProperties:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/30-properties/read-write-custom-document-properties.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/30-properties/get-built-in-properties.yaml
 
 
     await Word.run(async (context) => {
-        context.document.properties.customProperties.add("String Property", "Hello World!");
+        const builtInProperties: Word.DocumentProperties = context.document.properties;
+        builtInProperties.load("*"); // Let's get all!
 
         await context.sync();
-        console.log("Property added");
+        console.log(JSON.stringify(builtInProperties, null, 4));
     });
-'Word.CustomPropertyCollection#items:member':
+Word.DocumentPropertyType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/30-properties/read-write-custom-document-properties.yaml
@@ -19192,824 +24915,712 @@
         for (let i = 0; i < properties.items.length; i++)
             console.log("Property Name:" + properties.items[i].key + "; Type=" + properties.items[i].type + "; Property Value=" + properties.items[i].value);
     });
-'Word.CustomXmlPart:class':
+Word.DropDownListContentControl:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml
 
 
-    // Adds a custom XML part.
+    // Places a dropdown list content control at the end of the selection.
 
     await Word.run(async (context) => {
-      const originalXml =
-        "<Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>";
-      const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.add(originalXml);
-      customXmlPart.load("id");
-      const xmlBlob = customXmlPart.getXml();
-
+      let selection = context.document.getSelection();
+      selection.getRange(Word.RangeLocation.end).insertContentControl(Word.ContentControlType.dropDownList);
       await context.sync();
 
-      const readableXml = addLineBreaksToXML(xmlBlob.value);
-      console.log("Added custom XML part:", readableXml);
-
-      // Store the XML part's ID in a setting so the ID is available to other functions.
-      const settings: Word.SettingCollection = context.document.settings;
-      settings.add("ContosoReviewXmlPartId", customXmlPart.id);
-
-      await context.sync();
+      console.log("Dropdown list content control inserted at the end of the selection.");
     });
-'Word.CustomXmlPart#delete:member(1)':
+Word.DropDownListContentControl#addListItem:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
-
-
-    // Original XML:
-    <Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml
 
 
-    // Deletes a custom XML part.
+    // Adds the provided list item to the first dropdown list content control in
+    the selection.
 
     await Word.run(async (context) => {
-      const settings: Word.SettingCollection = context.document.settings;
-      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartId").load("value");
+      const listItemText = (document.getElementById("item-to-add") as HTMLInputElement).value.trim();
+      const selectedRange: Word.Range = context.document.getSelection();
+      let selectedContentControl = selectedRange
+        .getContentControls({
+          types: [Word.ContentControlType.dropDownList]
+        })
+        .getFirstOrNullObject();
+      selectedContentControl.load("id,dropDownListContentControl");
       await context.sync();
 
-      if (xmlPartIDSetting.value) {
-        let customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
-        const xmlBlob = customXmlPart.getXml();
-        customXmlPart.delete();
-        customXmlPart = context.document.customXmlParts.getItemOrNullObject(xmlPartIDSetting.value);
-
+      if (selectedContentControl.isNullObject) {
+        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
+        parentContentControl.load("id,type,dropDownListContentControl");
         await context.sync();
 
-        if (customXmlPart.isNullObject) {
-          console.log(`The XML part with the ID ${xmlPartIDSetting.value} has been deleted.`);
-
-          // Delete the associated setting too.
-          xmlPartIDSetting.delete();
-
-          await context.sync();
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
+          console.warn("No dropdown list content control is currently selected.");
+          return;
         } else {
-          const readableXml = addLineBreaksToXML(xmlBlob.value);
-          console.error(`This is strange. The XML part with the id ${xmlPartIDSetting.value} wasn't deleted:`, readableXml);
+          selectedContentControl = parentContentControl;
         }
-      } else {
-        console.warn("Didn't find custom XML part to delete.");
       }
+
+      selectedContentControl.dropDownListContentControl.addListItem(listItemText);
+      await context.sync();
+
+      console.log(`List item added to control with ID ${selectedContentControl.id}: ${listItemText}`);
     });
+Word.DropDownListContentControl#deleteAllListItems:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
-
-
-    // Original XML: <Reviewers
-    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml
 
 
-    // Deletes a custom XML part.
+    // Deletes the list items from first dropdown list content control found in
+    the selection.
 
     await Word.run(async (context) => {
-      const settings: Word.SettingCollection = context.document.settings;
-      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartIdNS").load("value");
+      const selectedRange: Word.Range = context.document.getSelection();
+      let selectedContentControl = selectedRange
+        .getContentControls({
+          types: [Word.ContentControlType.dropDownList]
+        })
+        .getFirstOrNullObject();
+      selectedContentControl.load("id,dropDownListContentControl");
       await context.sync();
 
-      if (xmlPartIDSetting.value) {
-        let customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
-        const xmlBlob = customXmlPart.getXml();
-        customXmlPart.delete();
-        customXmlPart = context.document.customXmlParts.getItemOrNullObject(xmlPartIDSetting.value);
-
+      if (selectedContentControl.isNullObject) {
+        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
+        parentContentControl.load("id,type,dropDownListContentControl");
         await context.sync();
 
-        if (customXmlPart.isNullObject) {
-          console.log(`The XML part with the ID ${xmlPartIDSetting.value} has been deleted.`);
-
-          // Delete the associated setting too.
-          xmlPartIDSetting.delete();
-
-          await context.sync();
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
+          console.warn("No dropdown list content control is currently selected.");
+          return;
         } else {
-          const readableXml = addLineBreaksToXML(xmlBlob.value);
-          console.error(
-            `This is strange. The XML part with the id ${xmlPartIDSetting.value} wasn't deleted:`,
-            readableXml
-          );
+          selectedContentControl = parentContentControl;
         }
-      } else {
-        console.warn("Didn't find custom XML part to delete.");
       }
+
+      console.log(
+        `About to delete the list from the dropdown list content control with ID ${selectedContentControl.id}`
+      );
+      selectedContentControl.dropDownListContentControl.deleteAllListItems();
+      await context.sync();
+
+      console.log("Deleted the list from the dropdown list content control.");
     });
-'Word.CustomXmlPart#getXml:member(1)':
+Word.DropDownListContentControl#listItems:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml
 
 
-    // Adds a custom XML part.
-
-    // If you want to populate the CustomXml.namespaceUri property, you must
-    include the xmlns attribute.
+    // Deletes the provided list item from the first dropdown list content
+    control in the selection.
 
     await Word.run(async (context) => {
-      const originalXml =
-        "<Reviewers xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>";
-      const customXmlPart = context.document.customXmlParts.add(originalXml);
-      customXmlPart.load(["id", "namespaceUri"]);
-      const xmlBlob = customXmlPart.getXml();
-
+      const listItemText = (document.getElementById("item-to-delete") as HTMLInputElement).value.trim();
+      const selectedRange: Word.Range = context.document.getSelection();
+      let selectedContentControl = selectedRange
+        .getContentControls({
+          types: [Word.ContentControlType.dropDownList]
+        })
+        .getFirstOrNullObject();
+      selectedContentControl.load("id,dropDownListContentControl");
       await context.sync();
 
-      const readableXml = addLineBreaksToXML(xmlBlob.value);
-      console.log(`Added custom XML part with namespace URI ${customXmlPart.namespaceUri}:`, readableXml);
+      if (selectedContentControl.isNullObject) {
+        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
+        parentContentControl.load("id,type,dropDownListContentControl");
+        await context.sync();
 
-      // Store the XML part's ID in a setting so the ID is available to other functions.
-      const settings: Word.SettingCollection = context.document.settings;
-      settings.add("ContosoReviewXmlPartIdNS", customXmlPart.id);
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
+          console.warn("No dropdown list content control is currently selected.");
+          return;
+        } else {
+          selectedContentControl = parentContentControl;
+        }
+      }
+
+      let selectedDropdownList: Word.DropDownListContentControl = selectedContentControl.dropDownListContentControl;
+      selectedDropdownList.listItems.load("items/*");
+      await context.sync();
 
+      let listItems: Word.ContentControlListItemCollection = selectedContentControl.dropDownListContentControl.listItems;
+      let itemToDelete: Word.ContentControlListItem = listItems.items.find((item) => item.displayText === listItemText);
+      if (!itemToDelete) {
+        console.warn(`List item doesn't exist in control with ID ${selectedContentControl.id}: ${listItemText}`)
+        return;
+      }
+      
+      itemToDelete.delete();
       await context.sync();
+
+      console.log(`List item deleted from control with ID ${selectedContentControl.id}: ${listItemText}`);
     });
+Word.ErrorCodes:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
 
 
-    // Adds a custom XML part.
+    async function tryCatch(callback) {
+      try {
+        await callback();
+      } catch (error) {
+        // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+        if (error.code === Word.ErrorCodes.itemNotFound) {
+          console.warn("No checkbox content control is currently selected.");
+        } else {
+          console.error(error);
+        }
+      }
+    }
+Word.EventSource:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
+
+
+    // Registers event handlers.
 
     await Word.run(async (context) => {
-      const originalXml =
-        "<Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>";
-      const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.add(originalXml);
-      customXmlPart.load("id");
-      const xmlBlob = customXmlPart.getXml();
+      const body: Word.Body = context.document.body;
+      body.track();
+      await context.sync();
 
+      eventContexts[0] = body.onCommentAdded.add(onEventHandler);
+      eventContexts[1] = body.onCommentChanged.add(onChangedHandler);
+      eventContexts[2] = body.onCommentDeleted.add(onEventHandler);
+      eventContexts[3] = body.onCommentDeselected.add(onEventHandler);
+      eventContexts[4] = body.onCommentSelected.add(onEventHandler);
       await context.sync();
 
-      const readableXml = addLineBreaksToXML(xmlBlob.value);
-      console.log("Added custom XML part:", readableXml);
+      console.log("Event handlers registered.");
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
 
-      // Store the XML part's ID in a setting so the ID is available to other functions.
-      const settings: Word.SettingCollection = context.document.settings;
-      settings.add("ContosoReviewXmlPartId", customXmlPart.id);
 
-      await context.sync();
-    });
-'Word.CustomXmlPart#insertAttribute:member(1)':
+    async function onEventHandler(event: Word.CommentEventArgs) {
+      // Handler for all events except onCommentChanged.
+      await Word.run(async (context) => {
+        console.log(`${event.type} event detected. Event source: ${event.source}. Comment info:`, event.commentDetails);
+      });
+    }
+Word.EventType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondeleted-event.yaml
 
 
-    // Original XML: <Reviewers
-    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+    async function contentControlDeleted(event:
+    Word.ContentControlDeletedEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.eventType} event detected. IDs of content controls that were deleted:`, event.ids);
+      });
+    }
+Word.Field:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
 
-    // Inserts an attribute into a custom XML part.
+    // Gets the first field in the document.
 
     await Word.run(async (context) => {
-      const settings: Word.SettingCollection = context.document.settings;
-      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartIdNS").load("value");
-      await context.sync();
-
-      if (xmlPartIDSetting.value) {
-        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
+      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
+      field.load(["code", "result", "locked", "type", "data", "kind"]);
 
-        // The insertAttribute method inserts an attribute with the given name and value into the element identified by the xpath parameter.
-        customXmlPart.insertAttribute(
-          "/contoso:Reviewers",
-          { contoso: "http://schemas.contoso.com/review/1.0" },
-          "Nation",
-          "US"
-        );
-        const xmlBlob = customXmlPart.getXml();
-        await context.sync();
+      await context.sync();
 
-        const readableXml = addLineBreaksToXML(xmlBlob.value);
-        console.log("Successfully inserted attribute:", readableXml);
+      if (field.isNullObject) {
+        console.log("This document has no fields.");
       } else {
-        console.warn("Didn't find custom XML part to insert attribute into.");
+        console.log("Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result), "Type of first field: " + field.type, "Is the first field locked? " + field.locked, "Kind of the first field: " + field.kind);
       }
     });
+Word.Field#delete:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
-
-
-    // Original XML:
-    <Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
 
-    // Inserts an attribute into a custom XML part.
+    // Deletes the first field in the document.
 
     await Word.run(async (context) => {
-      const settings: Word.SettingCollection = context.document.settings;
-      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartId").load("value");
-      await context.sync();
+      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
+      field.load();
 
-      if (xmlPartIDSetting.value) {
-        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
+      await context.sync();
 
-        // The insertAttribute method inserts an attribute with the given name and value into the element identified by the xpath parameter.
-        customXmlPart.insertAttribute("/Reviewers", { contoso: "http://schemas.contoso.com/review/1.0" }, "Nation", "US");
-        const xmlBlob = customXmlPart.getXml();
+      if (field.isNullObject) {
+        console.log("This document has no fields.");
+      } else {
+        field.delete();
         await context.sync();
 
-        const readableXml = addLineBreaksToXML(xmlBlob.value);
-        console.log("Successfully inserted attribute:", readableXml);
-      } else {
-        console.warn("Didn't find custom XML part to insert attribute into.");
+        console.log("The first field in the document was deleted.");
       }
     });
-'Word.CustomXmlPart#insertElement:member(1)':
+Word.Field#select:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
-
-
-    // Original XML: <Reviewers
-    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
 
-    // Inserts an element into a custom XML part.
+    // Gets and updates the first field in the selection.
 
     await Word.run(async (context) => {
-      const settings: Word.SettingCollection = context.document.settings;
-      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartIdNS").load("value");
+      let field = context.document.getSelection().fields.getFirstOrNullObject();
+      field.load(["code", "result", "type", "locked"]);
+
       await context.sync();
 
-      if (xmlPartIDSetting.value) {
-        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
+      if (field.isNullObject) {
+        console.log("No field in selection.");
+      } else {
+        console.log("Before updating:", "Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result));
 
-        // The insertElement method inserts the given XML under the parent element identified by the xpath parameter at the provided child position index.
-        customXmlPart.insertElement(
-          "/contoso:Reviewers",
-          "<Lead>Mark</Lead>",
-          { contoso: "http://schemas.contoso.com/review/1.0" },
-          0
-        );
-        const xmlBlob = customXmlPart.getXml();
+        field.updateResult();
+        field.select();
         await context.sync();
 
-        const readableXml = addLineBreaksToXML(xmlBlob.value);
-        console.log("Successfully inserted element:", readableXml);
-      } else {
-        console.warn("Didn't find custom XML part to insert element into.");
+        field.load(["code", "result"]);
+        await context.sync();
+
+        console.log("After updating:", "Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result));
       }
     });
+Word.Field#updateResult:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
-
-
-    // Original XML:
-    <Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
 
-    // Inserts an element into a custom XML part.
+    // Gets and updates the first field in the selection.
 
     await Word.run(async (context) => {
-      const settings: Word.SettingCollection = context.document.settings;
-      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartId").load("value");
+      let field = context.document.getSelection().fields.getFirstOrNullObject();
+      field.load(["code", "result", "type", "locked"]);
+
       await context.sync();
 
-      if (xmlPartIDSetting.value) {
-        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
+      if (field.isNullObject) {
+        console.log("No field in selection.");
+      } else {
+        console.log("Before updating:", "Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result));
 
-        // The insertElement method inserts the given XML under the parent element identified by the xpath parameter at the provided child position index.
-        customXmlPart.insertElement(
-          "/Reviewers",
-          "<Lead>Mark</Lead>",
-          { contoso: "http://schemas.contoso.com/review/1.0" },
-          0
-        );
-        const xmlBlob = customXmlPart.getXml();
+        field.updateResult();
+        field.select();
         await context.sync();
 
-        const readableXml = addLineBreaksToXML(xmlBlob.value);
-        console.log("Successfully inserted element:", readableXml);
-      } else {
-        console.warn("Didn't find custom XML part to insert element into.");
+        field.load(["code", "result"]);
+        await context.sync();
+
+        console.log("After updating:", "Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result));
       }
     });
-'Word.CustomXmlPart#query:member(1)':
+Word.Field#code:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
-
-
-    // Original XML: <Reviewers
-    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
 
-    // Queries a custom XML part for elements matching the search terms.
+    // Gets the first field in the document.
 
     await Word.run(async (context) => {
-      const settings: Word.SettingCollection = context.document.settings;
-      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartIdNS").load("value");
+      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
+      field.load(["code", "result", "locked", "type", "data", "kind"]);
 
       await context.sync();
 
-      if (xmlPartIDSetting.value) {
-        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
-        const xpathToQueryFor = "/contoso:Reviewers";
-        const clientResult = customXmlPart.query(xpathToQueryFor, {
-          contoso: "http://schemas.contoso.com/review/1.0"
-        });
-
-        await context.sync();
-
-        console.log(`Queried custom XML part for ${xpathToQueryFor} and found ${clientResult.value.length} matches:`);
-        for (let i = 0; i < clientResult.value.length; i++) {
-          console.log(clientResult.value[i]);
-        }
+      if (field.isNullObject) {
+        console.log("This document has no fields.");
       } else {
-        console.warn("Didn't find custom XML part to query.");
+        console.log("Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result), "Type of first field: " + field.type, "Is the first field locked? " + field.locked, "Kind of the first field: " + field.kind);
       }
     });
+Word.Field#kind:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
-
-
-    // Original XML:
-    <Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
 
-    // Queries a custom XML part for elements matching the search terms.
+    // Gets the first field in the document.
 
     await Word.run(async (context) => {
-      const settings: Word.SettingCollection = context.document.settings;
-      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartId").load("value");
+      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
+      field.load(["code", "result", "locked", "type", "data", "kind"]);
 
       await context.sync();
 
-      if (xmlPartIDSetting.value) {
-        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
-        const xpathToQueryFor = "/Reviewers/Reviewer";
-        const clientResult = customXmlPart.query(xpathToQueryFor, {
-          contoso: "http://schemas.contoso.com/review/1.0"
-        });
-
-        await context.sync();
-
-        console.log(`Queried custom XML part for ${xpathToQueryFor} and found ${clientResult.value.length} matches:`);
-        for (let i = 0; i < clientResult.value.length; i++) {
-          console.log(clientResult.value[i]);
-        }
+      if (field.isNullObject) {
+        console.log("This document has no fields.");
       } else {
-        console.warn("Didn't find custom XML part to query.");
+        console.log("Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result), "Type of first field: " + field.type, "Is the first field locked? " + field.locked, "Kind of the first field: " + field.kind);
       }
     });
-'Word.CustomXmlPart#setXml:member(1)':
+Word.Field#locked:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
-
-
-    // Original XML: <Reviewers
-    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
 
-    // Replaces a custom XML part.
+    // Gets the first field in the selection and toggles between setting it to
+    locked or unlocked.
 
     await Word.run(async (context) => {
-      const settings: Word.SettingCollection = context.document.settings;
-      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartIdNS").load("value");
+      let field = context.document.getSelection().fields.getFirstOrNullObject();
+      field.load(["code", "result", "type", "locked"]);
       await context.sync();
 
-      if (xmlPartIDSetting.value) {
-        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
-        const originalXmlBlob = customXmlPart.getXml();
-        await context.sync();
-
-        let readableXml = addLineBreaksToXML(originalXmlBlob.value);
-        console.log("Original custom XML part:", readableXml);
-
-        // The setXml method replaces the entire XML part.
-        customXmlPart.setXml(
-          "<Reviewers xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>John</Reviewer><Reviewer>Hitomi</Reviewer></Reviewers>"
-        );
-        const updatedXmlBlob = customXmlPart.getXml();
+      if (field.isNullObject) {
+        console.log("The selection has no fields.");
+      } else {
+        console.log(`The first field in the selection is currently ${field.locked ? "locked" : "unlocked"}.`);
+        field.locked = !field.locked;
         await context.sync();
 
-        readableXml = addLineBreaksToXML(updatedXmlBlob.value);
-        console.log("Replaced custom XML part:", readableXml);
-      } else {
-        console.warn("Didn't find custom XML part to replace.");
+        console.log(`The first field in the selection is now ${field.locked ? "locked" : "unlocked"}.`);
       }
     });
-'Word.CustomXmlPart#id:member':
+Word.Field#parentBody:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
-
-
-    // Adds a custom XML part.
-
-    await Word.run(async (context) => {
-      const originalXml =
-        "<Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>";
-      const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.add(originalXml);
-      customXmlPart.load("id");
-      const xmlBlob = customXmlPart.getXml();
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
-      await context.sync();
 
-      const readableXml = addLineBreaksToXML(xmlBlob.value);
-      console.log("Added custom XML part:", readableXml);
+    // Gets the parent body of the first field in the document.
 
-      // Store the XML part's ID in a setting so the ID is available to other functions.
-      const settings: Word.SettingCollection = context.document.settings;
-      settings.add("ContosoReviewXmlPartId", customXmlPart.id);
+    await Word.run(async (context) => {
+      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
+      field.load("parentBody/text");
 
       await context.sync();
+
+      if (field.isNullObject) {
+        console.log("This document has no fields.");
+      } else {
+        const parentBody: Word.Body = field.parentBody;
+        console.log("Text of first field's parent body: " + JSON.stringify(parentBody.text));
+      }
     });
-'Word.CustomXmlPart#namespaceUri:member':
+Word.Field#result:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
-
-
-    // Original XML: <Reviewers
-    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
 
-    // Gets the namespace URI from a custom XML part.
+    // Gets the first field in the document.
 
     await Word.run(async (context) => {
-      const settings: Word.SettingCollection = context.document.settings;
-      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartIdNS").load("value");
+      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
+      field.load(["code", "result", "locked", "type", "data", "kind"]);
 
       await context.sync();
 
-      if (xmlPartIDSetting.value) {
-        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
-        customXmlPart.load("namespaceUri");
-        await context.sync();
-
-        const namespaceUri = customXmlPart.namespaceUri;
-        console.log(`Namespace URI: ${JSON.stringify(namespaceUri)}`);
+      if (field.isNullObject) {
+        console.log("This document has no fields.");
       } else {
-        console.warn("Didn't find custom XML part.");
+        console.log("Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result), "Type of first field: " + field.type, "Is the first field locked? " + field.locked, "Kind of the first field: " + field.kind);
       }
     });
-'Word.CustomXmlPartCollection#add:member(1)':
+Word.Field#type:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
-    // Adds a custom XML part.
 
-    // If you want to populate the CustomXml.namespaceUri property, you must
-    include the xmlns attribute.
+    // Gets the first field in the document.
 
     await Word.run(async (context) => {
-      const originalXml =
-        "<Reviewers xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>";
-      const customXmlPart = context.document.customXmlParts.add(originalXml);
-      customXmlPart.load(["id", "namespaceUri"]);
-      const xmlBlob = customXmlPart.getXml();
+      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
+      field.load(["code", "result", "locked", "type", "data", "kind"]);
 
       await context.sync();
 
-      const readableXml = addLineBreaksToXML(xmlBlob.value);
-      console.log(`Added custom XML part with namespace URI ${customXmlPart.namespaceUri}:`, readableXml);
-
-      // Store the XML part's ID in a setting so the ID is available to other functions.
-      const settings: Word.SettingCollection = context.document.settings;
-      settings.add("ContosoReviewXmlPartIdNS", customXmlPart.id);
-
-      await context.sync();
+      if (field.isNullObject) {
+        console.log("This document has no fields.");
+      } else {
+        console.log("Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result), "Type of first field: " + field.type, "Is the first field locked? " + field.locked, "Kind of the first field: " + field.kind);
+      }
     });
+Word.FieldCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
 
-    // Adds a custom XML part.
+    // Gets all fields in the document body.
 
     await Word.run(async (context) => {
-      const originalXml =
-        "<Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>";
-      const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.add(originalXml);
-      customXmlPart.load("id");
-      const xmlBlob = customXmlPart.getXml();
+      const fields: Word.FieldCollection = context.document.body.fields.load("items");
 
       await context.sync();
 
-      const readableXml = addLineBreaksToXML(xmlBlob.value);
-      console.log("Added custom XML part:", readableXml);
-
-      // Store the XML part's ID in a setting so the ID is available to other functions.
-      const settings: Word.SettingCollection = context.document.settings;
-      settings.add("ContosoReviewXmlPartId", customXmlPart.id);
+      if (fields.items.length === 0) {
+        console.log("No fields in this document.");
+      } else {
+        fields.load(["code", "result"]);
+        await context.sync();
 
-      await context.sync();
+        for (let i = 0; i < fields.items.length; i++) {
+          console.log(`Field ${i + 1}'s code: ${fields.items[i].code}`, `Field ${i + 1}'s result: ${JSON.stringify(fields.items[i].result)}`);
+        }
+      }
     });
-'Word.CustomXmlPartCollection#getByNamespace:member(1)':
+Word.FieldCollection#getFirstOrNullObject:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
-
-
-    // Original XML: <Reviewers
-    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
 
-    // Gets the custom XML parts with the specified namespace URI.
+    // Gets the first field in the document.
 
     await Word.run(async (context) => {
-      const namespaceUri = "http://schemas.contoso.com/review/1.0";
-      console.log(`Specified namespace URI: ${namespaceUri}`);
-      const scopedCustomXmlParts: Word.CustomXmlPartScopedCollection =
-        context.document.customXmlParts.getByNamespace(namespaceUri);
-      scopedCustomXmlParts.load("items");
+      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
+      field.load(["code", "result", "locked", "type", "data", "kind"]);
+
       await context.sync();
 
-      console.log(`Number of custom XML parts found with this namespace: ${!scopedCustomXmlParts.items ? 0 : scopedCustomXmlParts.items.length}`);
+      if (field.isNullObject) {
+        console.log("This document has no fields.");
+      } else {
+        console.log("Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result), "Type of first field: " + field.type, "Is the first field locked? " + field.locked, "Kind of the first field: " + field.kind);
+      }
     });
-'Word.CustomXmlPartCollection#getItem:member(1)':
+Word.FieldCollection#items:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
-
-
-    // Original XML: <Reviewers
-    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
 
-    // Queries a custom XML part for elements matching the search terms.
+    // Gets all fields in the document body.
 
     await Word.run(async (context) => {
-      const settings: Word.SettingCollection = context.document.settings;
-      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartIdNS").load("value");
+      const fields: Word.FieldCollection = context.document.body.fields.load("items");
 
       await context.sync();
 
-      if (xmlPartIDSetting.value) {
-        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
-        const xpathToQueryFor = "/contoso:Reviewers";
-        const clientResult = customXmlPart.query(xpathToQueryFor, {
-          contoso: "http://schemas.contoso.com/review/1.0"
-        });
-
+      if (fields.items.length === 0) {
+        console.log("No fields in this document.");
+      } else {
+        fields.load(["code", "result"]);
         await context.sync();
 
-        console.log(`Queried custom XML part for ${xpathToQueryFor} and found ${clientResult.value.length} matches:`);
-        for (let i = 0; i < clientResult.value.length; i++) {
-          console.log(clientResult.value[i]);
+        for (let i = 0; i < fields.items.length; i++) {
+          console.log(`Field ${i + 1}'s code: ${fields.items[i].code}`, `Field ${i + 1}'s result: ${JSON.stringify(fields.items[i].result)}`);
         }
-      } else {
-        console.warn("Didn't find custom XML part to query.");
       }
     });
+Word.FieldKind:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part.yaml
-
-
-    // Original XML:
-    <Reviewers><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
 
-    // Queries a custom XML part for elements matching the search terms.
+    // Gets the first field in the document.
 
     await Word.run(async (context) => {
-      const settings: Word.SettingCollection = context.document.settings;
-      const xmlPartIDSetting: Word.Setting = settings.getItemOrNullObject("ContosoReviewXmlPartId").load("value");
+      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
+      field.load(["code", "result", "locked", "type", "data", "kind"]);
 
       await context.sync();
 
-      if (xmlPartIDSetting.value) {
-        const customXmlPart: Word.CustomXmlPart = context.document.customXmlParts.getItem(xmlPartIDSetting.value);
-        const xpathToQueryFor = "/Reviewers/Reviewer";
-        const clientResult = customXmlPart.query(xpathToQueryFor, {
-          contoso: "http://schemas.contoso.com/review/1.0"
-        });
-
-        await context.sync();
-
-        console.log(`Queried custom XML part for ${xpathToQueryFor} and found ${clientResult.value.length} matches:`);
-        for (let i = 0; i < clientResult.value.length; i++) {
-          console.log(clientResult.value[i]);
-        }
+      if (field.isNullObject) {
+        console.log("This document has no fields.");
       } else {
-        console.warn("Didn't find custom XML part to query.");
+        console.log("Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result), "Type of first field: " + field.type, "Is the first field locked? " + field.locked, "Kind of the first field: " + field.kind);
       }
     });
-'Word.CustomXmlPartScopedCollection:class':
+Word.FieldType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-custom-xml-part-ns.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
 
 
-    // Original XML: <Reviewers
-    xmlns='http://schemas.contoso.com/review/1.0'><Reviewer>Juan</Reviewer><Reviewer>Hong</Reviewer><Reviewer>Sally</Reviewer></Reviewers>
+    // Inserts a Date field before selection.
 
+    await Word.run(async (context) => {
+      const range: Word.Range = context.document.getSelection().getRange();
 
-    // Gets the custom XML parts with the specified namespace URI.
+      const field: Word.Field = range.insertField(Word.InsertLocation.before, Word.FieldType.date, '\\@ "M/d/yyyy h:mm am/pm"', true);
 
-    await Word.run(async (context) => {
-      const namespaceUri = "http://schemas.contoso.com/review/1.0";
-      console.log(`Specified namespace URI: ${namespaceUri}`);
-      const scopedCustomXmlParts: Word.CustomXmlPartScopedCollection =
-        context.document.customXmlParts.getByNamespace(namespaceUri);
-      scopedCustomXmlParts.load("items");
+      field.load("result,code");
       await context.sync();
 
-      console.log(`Number of custom XML parts found with this namespace: ${!scopedCustomXmlParts.items ? 0 : scopedCustomXmlParts.items.length}`);
+      if (field.isNullObject) {
+        console.log("There are no fields in this document.");
+      } else {
+        console.log("Code of the field: " + field.code, "Result of the field: " + JSON.stringify(field.result));
+      }
     });
-'Word.Document:class':
+Word.GeometricShapeType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-change-tracking.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-geometric-shapes.yaml
 
 
-    // Gets the current change tracking mode.
-
     await Word.run(async (context) => {
-      const document: Word.Document = context.document;
-      document.load("changeTrackingMode");
+      // Inserts a heptagon geometric shape at the beginning of the selection.
+      const selection: Word.Range = context.document.getSelection();
+      const shapeOptions: Word.InsertShapeOptions = {
+        height: 120,
+        width: 120,
+      };
+      selection.insertGeometricShape(Word.GeometricShapeType.heptagon, shapeOptions);
       await context.sync();
 
-      if (document.changeTrackingMode === Word.ChangeTrackingMode.trackMineOnly) {
-        console.log("Only my changes are being tracked.");
-      } else if (document.changeTrackingMode === Word.ChangeTrackingMode.trackAll) {
-        console.log("Everyone's changes are being tracked.");
-      } else {
-        console.log("No changes are being tracked.");
-      }
+      console.log("Inserted a heptagon.");
     });
-'Word.Document#addStyle:member(1)':
+Word.GetTextOptions:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/get-text.yaml
 
-    // Adds a new style.
 
     await Word.run(async (context) => {
-      const newStyleName = $("#new-style-name").val() as string;
-      if (newStyleName == "") {
-        console.warn("Enter a style name to add.");
-        return;
-      }
-
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(newStyleName);
-      style.load();
-      await context.sync();
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
 
-      if (!style.isNullObject) {
-        console.warn(
-          `There's an existing style with the same name '${newStyleName}'! Please provide another style name.`
-        );
-        return;
-      }
+      const text = paragraph.getText();
+      const textIncludingHidden = paragraph.getText({ IncludeHiddenText: true });
+      const textIncludingDeleted = paragraph.getText({ IncludeTextMarkedAsDeleted: true });
 
-      const newStyleType = ($("#new-style-type").val() as unknown) as Word.StyleType;
-      context.document.addStyle(newStyleName, newStyleType);
       await context.sync();
 
-      console.log(newStyleName + " has been added to the style list.");
+      console.log("Text:- " + text.value, "Including hidden text:- " + textIncludingHidden.value, "Including text marked as deleted:- " + textIncludingDeleted.value);
     });
-'Word.Document#close:member(1)':
+Word.HeaderFooterType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/save-close.yaml
-
-
-    // Closes the document with default behavior
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-header-and-footer.yaml
 
-    // for current state of the document.
 
     await Word.run(async (context) => {
-      context.document.close();
+      context.document.sections
+        .getFirst()
+        .getHeader(Word.HeaderFooterType.primary)
+        .insertParagraph("This is a primary header.", "End");
+
+      await context.sync();
     });
-'Word.Document#compare:member(1)':
+Word.ImageFormat:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/compare-documents.yaml
-
-
-    // Compares the current document with a specified external document.
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
 
-    await Word.run(async (context) => {
-      // Absolute path of an online or local document.
-      const filePath = $("#filePath")
-        .val()
-        .toString();
-      // Options that configure the compare operation.
-      const options: Word.DocumentCompareOptions = {
-        compareTarget: Word.CompareTarget.compareTargetCurrent,
-        detectFormatChanges: false
-        // Other options you choose...
-        };
-      context.document.compare(filePath, options);
+
+    // Gets the first image in the document.
+
+    await Word.run(async (context) => {
+      const firstPicture: Word.InlinePicture = context.document.body.inlinePictures.getFirst();
+      firstPicture.load("width, height, imageFormat");
 
       await context.sync();
+      console.log(`Image dimensions: ${firstPicture.width} x ${firstPicture.height}`, `Image format: ${firstPicture.imageFormat}`);
+      // Get the image encoded as Base64.
+      const base64 = firstPicture.getBase64ImageSrc();
 
-      console.log("Differences shown in the current document.");
+      await context.sync();
+      console.log(base64.value);
     });
-'Word.Document#getContentControls:member(1)':
+Word.ImportedStylesConflictBehavior:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-custom-style.yaml
 
 
-    // Toggles the isChecked property on all checkbox content controls.
+    // Imports styles from JSON.
 
     await Word.run(async (context) => {
-      let contentControls = context.document.getContentControls({
-        types: [Word.ContentControlType.checkBox]
-      });
-      contentControls.load("items");
+      const str =
+        '{"styles":[{"baseStyle":"Default Paragraph Font","builtIn":false,"inUse":true,"linked":false,"nameLocal":"NewCharStyle","priority":2,"quickStyle":true,"type":"Character","unhideWhenUsed":false,"visibility":false,"paragraphFormat":null,"font":{"name":"DengXian Light","size":16.0,"bold":true,"italic":false,"color":"#F1A983","underline":"None","subscript":false,"superscript":true,"strikeThrough":true,"doubleStrikeThrough":false,"highlightColor":null,"hidden":false},"shading":{"backgroundPatternColor":"#FF0000"}},{"baseStyle":"Normal","builtIn":false,"inUse":true,"linked":false,"nextParagraphStyle":"NewParaStyle","nameLocal":"NewParaStyle","priority":1,"quickStyle":true,"type":"Paragraph","unhideWhenUsed":false,"visibility":false,"paragraphFormat":{"alignment":"Centered","firstLineIndent":0.0,"keepTogether":false,"keepWithNext":false,"leftIndent":72.0,"lineSpacing":18.0,"lineUnitAfter":0.0,"lineUnitBefore":0.0,"mirrorIndents":false,"outlineLevel":"OutlineLevelBodyText","rightIndent":72.0,"spaceAfter":30.0,"spaceBefore":30.0,"widowControl":true},"font":{"name":"DengXian","size":14.0,"bold":true,"italic":true,"color":"#8DD873","underline":"Single","subscript":false,"superscript":false,"strikeThrough":false,"doubleStrikeThrough":true,"highlightColor":null,"hidden":false},"shading":{"backgroundPatternColor":"#00FF00"}},{"baseStyle":"Table Normal","builtIn":false,"inUse":true,"linked":false,"nextParagraphStyle":"NewTableStyle","nameLocal":"NewTableStyle","priority":100,"type":"Table","unhideWhenUsed":false,"visibility":false,"paragraphFormat":{"alignment":"Left","firstLineIndent":0.0,"keepTogether":false,"keepWithNext":false,"leftIndent":0.0,"lineSpacing":12.0,"lineUnitAfter":0.0,"lineUnitBefore":0.0,"mirrorIndents":false,"outlineLevel":"OutlineLevelBodyText","rightIndent":0.0,"spaceAfter":0.0,"spaceBefore":0.0,"widowControl":true},"font":{"name":"DengXian","size":20.0,"bold":false,"italic":true,"color":"#D86DCB","underline":"None","subscript":false,"superscript":false,"strikeThrough":false,"doubleStrikeThrough":false,"highlightColor":null,"hidden":false},"tableStyle":{"allowBreakAcrossPage":true,"alignment":"Left","bottomCellMargin":0.0,"leftCellMargin":0.08,"rightCellMargin":0.08,"topCellMargin":0.0,"cellSpacing":0.0},"shading":{"backgroundPatternColor":"#60CAF3"}}]}';
+      const styles = context.document.importStylesFromJson(str);
+
+      // If you'd like to set how conflicting styles are handled, use the importedStylesConflictBehavior parameter that was introduced in the Desktop 1.1 requirement set. "Ignore" is the default.
+      ////const styles = context.document.importStylesFromJson(str, Word.ImportedStylesConflictBehavior.Ignore);
 
       await context.sync();
+      console.log("Styles imported from JSON:", styles);
+    });
+Word.InlinePicture#getBase64ImageSrc:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
 
-      const length = contentControls.items.length;
-      console.log(`Number of checkbox content controls: ${length}`);
 
-      if (length <= 0) {
-        return;
-      }
+    // Gets the first image in the document.
 
-      const checkboxContentControls = [];
-      for (let i = 0; i < length; i++) {
-        let contentControl = contentControls.items[i];
-        contentControl.load("id,checkboxContentControl/isChecked");
-        checkboxContentControls.push(contentControl);
-      }
+    await Word.run(async (context) => {
+      const firstPicture: Word.InlinePicture = context.document.body.inlinePictures.getFirst();
+      firstPicture.load("width, height, imageFormat");
 
       await context.sync();
-
-      console.log("isChecked state before:");
-      const updatedCheckboxContentControls = [];
-      for (let i = 0; i < checkboxContentControls.length; i++) {
-        const currentCheckboxContentControl = checkboxContentControls[i];
-        const isCheckedBefore = currentCheckboxContentControl.checkboxContentControl.isChecked;
-        console.log(`id: ${currentCheckboxContentControl.id} ... isChecked: ${isCheckedBefore}`);
-
-        currentCheckboxContentControl.checkboxContentControl.isChecked = !isCheckedBefore;
-        currentCheckboxContentControl.load("id,checkboxContentControl/isChecked");
-        updatedCheckboxContentControls.push(currentCheckboxContentControl);
-      }
+      console.log(`Image dimensions: ${firstPicture.width} x ${firstPicture.height}`, `Image format: ${firstPicture.imageFormat}`);
+      // Get the image encoded as Base64.
+      const base64 = firstPicture.getBase64ImageSrc();
 
       await context.sync();
-
-      console.log("isChecked state after:");
-      for (let i = 0; i < updatedCheckboxContentControls.length; i++) {
-        const currentCheckboxContentControl = updatedCheckboxContentControls[i];
-        console.log(
-          `id: ${currentCheckboxContentControl.id} ... isChecked: ${currentCheckboxContentControl.checkboxContentControl.isChecked}`
-        );
-      }
+      console.log(base64.value);
     });
-'Word.Document#getParagraphByUniqueLocalId:member(1)':
+Word.InlinePicture:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onadded-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
 
 
+    // Inserts an image anchored to the last paragraph.
+
     await Word.run(async (context) => {
-      const paragraphId = $("#paragraph-id").val() as string;
-      const paragraph: Word.Paragraph = context.document.getParagraphByUniqueLocalId(paragraphId);
-      paragraph.load();
-      await paragraph.context.sync();
+      context.document.body.paragraphs
+        .getLast()
+        .insertParagraph("", "After")
+        .insertInlinePictureFromBase64(base64Image, "End");
 
-      console.log(paragraph);
+      await context.sync();
     });
-'Word.Document#getStyles:member(1)':
+Word.InlinePicture#imageFormat:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
 
 
-    // Gets the number of available styles stored with the document.
+    // Gets the first image in the document.
 
     await Word.run(async (context) => {
-      const styles: Word.StyleCollection = context.document.getStyles();
-      const count = styles.getCount();
+      const firstPicture: Word.InlinePicture = context.document.body.inlinePictures.getFirst();
+      firstPicture.load("width, height, imageFormat");
+
       await context.sync();
+      console.log(`Image dimensions: ${firstPicture.width} x ${firstPicture.height}`, `Image format: ${firstPicture.imageFormat}`);
+      // Get the image encoded as Base64.
+      const base64 = firstPicture.getBase64ImageSrc();
 
-      console.log(`Number of styles: ${count.value}`);
+      await context.sync();
+      console.log(base64.value);
     });
-'Word.Document#importStylesFromJson:member(1)':
+Word.InlinePictureCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-custom-style.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
 
 
-    // Imports styles from JSON.
+    // Gets the first image in the document.
 
     await Word.run(async (context) => {
-      const str =
-        '{"styles":[{"baseStyle":"Default Paragraph Font","builtIn":false,"inUse":true,"linked":false,"nameLocal":"NewCharStyle","priority":2,"quickStyle":true,"type":"Character","unhideWhenUsed":false,"visibility":false,"paragraphFormat":null,"font":{"name":"DengXian Light","size":16.0,"bold":true,"italic":false,"color":"#F1A983","underline":"None","subscript":false,"superscript":true,"strikeThrough":true,"doubleStrikeThrough":false,"highlightColor":null,"hidden":false},"shading":{"backgroundPatternColor":"#FF0000"}},{"baseStyle":"Normal","builtIn":false,"inUse":true,"linked":false,"nextParagraphStyle":"NewParaStyle","nameLocal":"NewParaStyle","priority":1,"quickStyle":true,"type":"Paragraph","unhideWhenUsed":false,"visibility":false,"paragraphFormat":{"alignment":"Centered","firstLineIndent":0.0,"keepTogether":false,"keepWithNext":false,"leftIndent":72.0,"lineSpacing":18.0,"lineUnitAfter":0.0,"lineUnitBefore":0.0,"mirrorIndents":false,"outlineLevel":"OutlineLevelBodyText","rightIndent":72.0,"spaceAfter":30.0,"spaceBefore":30.0,"widowControl":true},"font":{"name":"DengXian","size":14.0,"bold":true,"italic":true,"color":"#8DD873","underline":"Single","subscript":false,"superscript":false,"strikeThrough":false,"doubleStrikeThrough":true,"highlightColor":null,"hidden":false},"shading":{"backgroundPatternColor":"#00FF00"}},{"baseStyle":"Table Normal","builtIn":false,"inUse":true,"linked":false,"nextParagraphStyle":"NewTableStyle","nameLocal":"NewTableStyle","priority":100,"type":"Table","unhideWhenUsed":false,"visibility":false,"paragraphFormat":{"alignment":"Left","firstLineIndent":0.0,"keepTogether":false,"keepWithNext":false,"leftIndent":0.0,"lineSpacing":12.0,"lineUnitAfter":0.0,"lineUnitBefore":0.0,"mirrorIndents":false,"outlineLevel":"OutlineLevelBodyText","rightIndent":0.0,"spaceAfter":0.0,"spaceBefore":0.0,"widowControl":true},"font":{"name":"DengXian","size":20.0,"bold":false,"italic":true,"color":"#D86DCB","underline":"None","subscript":false,"superscript":false,"strikeThrough":false,"doubleStrikeThrough":false,"highlightColor":null,"hidden":false},"tableStyle":{"allowBreakAcrossPage":true,"alignment":"Left","bottomCellMargin":0.0,"leftCellMargin":0.08,"rightCellMargin":0.08,"topCellMargin":0.0,"cellSpacing":0.0},"shading":{"backgroundPatternColor":"#60CAF3"}}]}';
-      const styles = context.document.importStylesFromJson(str);
+      const firstPicture: Word.InlinePicture = context.document.body.inlinePictures.getFirst();
+      firstPicture.load("width, height, imageFormat");
+
       await context.sync();
-      console.log("Styles imported from JSON:", styles);
+      console.log(`Image dimensions: ${firstPicture.width} x ${firstPicture.height}`, `Image format: ${firstPicture.imageFormat}`);
+      // Get the image encoded as Base64.
+      const base64 = firstPicture.getBase64ImageSrc();
+
+      await context.sync();
+      console.log(base64.value);
     });
-'Word.Document#insertFileFromBase64:member(1)':
+Word.InsertFileOptions:interface:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-external-document.yaml
@@ -20032,1187 +25643,1432 @@
       });
       await context.sync();
     });
-'Word.Document#save:member(1)':
+Word.InsertLocation:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/save-close.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-section-breaks.yaml
 
 
-    // Saves the document with default behavior
+    // Inserts a section without an associated page break.
+
+    await Word.run(async (context) => {
+      const body: Word.Body = context.document.body;
+      body.insertBreak(Word.BreakType.sectionContinuous, Word.InsertLocation.end);
+
+      await context.sync();
+
+      console.log("Inserted section without an associated page break.");
+    });
+Word.InsertShapeOptions:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
-    // for current state of the document.
 
     await Word.run(async (context) => {
-      context.document.save();
+      // Inserts a text box at the beginning of the selection.
+      const range: Word.Range = context.document.getSelection();
+      const insertShapeOptions: Word.InsertShapeOptions = {
+        top: 0,
+        left: 0,
+        height: 100,
+        width: 100
+      };
+
+      const newTextBox: Word.Shape = range.insertTextBox("placeholder text", insertShapeOptions);
       await context.sync();
+
+      console.log("Inserted a text box at the beginning of the current selection.");
     });
-'Word.Document#changeTrackingMode:member':
+Word.List:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-change-tracking.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/insert-list.yaml
 
 
-    // Gets the current change tracking mode.
+    // This example starts a new list with the second paragraph.
 
     await Word.run(async (context) => {
-      const document: Word.Document = context.document;
-      document.load("changeTrackingMode");
+      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
+      paragraphs.load("$none");
+
       await context.sync();
 
-      if (document.changeTrackingMode === Word.ChangeTrackingMode.trackMineOnly) {
-        console.log("Only my changes are being tracked.");
-      } else if (document.changeTrackingMode === Word.ChangeTrackingMode.trackAll) {
-        console.log("Everyone's changes are being tracked.");
-      } else {
-        console.log("No changes are being tracked.");
-      }
+      // Start new list using the second paragraph.
+      const list: Word.List = paragraphs.items[1].startNewList();
+      list.load("$none");
+
+      await context.sync();
+
+      // To add new items to the list, use Start or End on the insertLocation parameter.
+      list.insertParagraph("New list item at the start of the list", "Start");
+      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
+
+      // Set up list level for the list item.
+      paragraph.listItem.level = 4;
+
+      // To add paragraphs outside the list, use Before or After.
+      list.insertParagraph("New paragraph goes after (not part of the list)", "After");
+
+      await context.sync();
     });
-'Word.Document#onAnnotationClicked:member':
+Word.List#insertParagraph:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/insert-list.yaml
 
 
-    // Registers event handlers.
+    // This example starts a new list with the second paragraph.
 
     await Word.run(async (context) => {
-      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
-      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
+      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
+      paragraphs.load("$none");
 
-      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
-      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
-      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
-      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
-      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
+      await context.sync();
+
+      // Start new list using the second paragraph.
+      const list: Word.List = paragraphs.items[1].startNewList();
+      list.load("$none");
 
       await context.sync();
 
-      console.log("Event handlers registered.");
+      // To add new items to the list, use Start or End on the insertLocation parameter.
+      list.insertParagraph("New list item at the start of the list", "Start");
+      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
+
+      // Set up list level for the list item.
+      paragraph.listItem.level = 4;
+
+      // To add paragraphs outside the list, use Before or After.
+      list.insertParagraph("New paragraph goes after (not part of the list)", "After");
+
+      await context.sync();
     });
+Word.List#setLevelBullet:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
 
 
-    async function onClickedHandler(args: Word.AnnotationClickedEventArgs) {
-      await Word.run(async (context) => {
-        const annotation: Word.Annotation = context.document.getAnnotationById(args.id);
-        annotation.load("critiqueAnnotation");
+    // Inserts a list starting with the first paragraph then set numbering and
+    bullet types of the list items.
 
-        await context.sync();
+    await Word.run(async (context) => {
+      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
+      paragraphs.load("$none");
 
-        console.log(`AnnotationClicked: ID ${args.id}:`, annotation.critiqueAnnotation.critique);
-      });
-    }
-'Word.Document#onAnnotationHovered:member':
+      await context.sync();
+
+      // Use the first paragraph to start a new list.
+      const list: Word.List = paragraphs.items[0].startNewList();
+      list.load("$none");
+
+      await context.sync();
+
+      // To add new items to the list, use Start or End on the insertLocation parameter.
+      list.insertParagraph("New list item at the start of the list", "Start");
+      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
+
+      // Set numbering for list level 1.
+      list.setLevelNumbering(0, Word.ListNumbering.arabic);
+
+      // Set bullet type for list level 5.
+      list.setLevelBullet(4, Word.ListBullet.arrow);
+
+      // Set list level for the last item in this list.
+      paragraph.listItem.level = 4;
+
+      list.load("levelTypes");
+
+      await context.sync();
+    });
+Word.List#setLevelNumbering:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
 
 
-    // Registers event handlers.
+    // Inserts a list starting with the first paragraph then set numbering and
+    bullet types of the list items.
 
     await Word.run(async (context) => {
-      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
-      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
+      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
+      paragraphs.load("$none");
 
-      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
-      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
-      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
-      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
-      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
+      await context.sync();
+
+      // Use the first paragraph to start a new list.
+      const list: Word.List = paragraphs.items[0].startNewList();
+      list.load("$none");
 
       await context.sync();
 
-      console.log("Event handlers registered.");
-    });
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+      // To add new items to the list, use Start or End on the insertLocation parameter.
+      list.insertParagraph("New list item at the start of the list", "Start");
+      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
 
+      // Set numbering for list level 1.
+      list.setLevelNumbering(0, Word.ListNumbering.arabic);
 
-    async function onHoveredHandler(args: Word.AnnotationHoveredEventArgs) {
-      await Word.run(async (context) => {
-        const annotation: Word.Annotation = context.document.getAnnotationById(args.id);
-        annotation.load("critiqueAnnotation");
+      // Set bullet type for list level 5.
+      list.setLevelBullet(4, Word.ListBullet.arrow);
 
-        await context.sync();
+      // Set list level for the last item in this list.
+      paragraph.listItem.level = 4;
 
-        console.log(`AnnotationHovered: ID ${args.id}:`, annotation.critiqueAnnotation.critique);
-      });
-    }
-'Word.Document#onAnnotationInserted:member':
+      list.load("levelTypes");
+
+      await context.sync();
+    });
+Word.List#levelExistences:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
 
 
-    // Registers event handlers.
+    // Gets information about the first list in the document.
 
     await Word.run(async (context) => {
-      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
-      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
+      const lists: Word.ListCollection = context.document.body.lists;
+      lists.load("items");
 
-      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
-      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
-      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
-      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
-      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
+      await context.sync();
+
+      if (lists.items.length === 0) {
+        console.warn("There are no lists in this document.");
+        return;
+      }
+      
+      // Get the first list.
+      const list: Word.List = lists.getFirst();
+      list.load("levelTypes,levelExistences");
 
       await context.sync();
 
-      console.log("Event handlers registered.");
+      const levelTypes  = list.levelTypes;
+      console.log("Level types of the first list:");
+      for (let i = 0; i < levelTypes.length; i++) {
+        console.log(`- Level ${i + 1} (index ${i}): ${levelTypes[i]}`);
+      }
+
+      const levelExistences = list.levelExistences;
+      console.log("Level existences of the first list:");
+      for (let i = 0; i < levelExistences.length; i++) {
+        console.log(`- Level ${i + 1} (index ${i}): ${levelExistences[i]}`);
+      }
     });
+Word.List#levelTypes:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
 
 
-    async function onInsertedHandler(args: Word.AnnotationInsertedEventArgs) {
-      await Word.run(async (context) => {
-        const annotations = [];
-        for (let i = 0; i < args.ids.length; i++) {
-          let annotation: Word.Annotation = context.document.getAnnotationById(args.ids[i]);
-          annotation.load("id,critiqueAnnotation");
+    // Gets information about the first list in the document.
 
-          annotations.push(annotation);
-        }
+    await Word.run(async (context) => {
+      const lists: Word.ListCollection = context.document.body.lists;
+      lists.load("items");
 
-        await context.sync();
+      await context.sync();
 
-        for (let annotation of annotations) {
-          console.log(`AnnotationInserted: ID ${annotation.id}:`, annotation.critiqueAnnotation.critique);
-        }
-      });
-    }
-'Word.Document#onAnnotationPopupAction:member':
+      if (lists.items.length === 0) {
+        console.warn("There are no lists in this document.");
+        return;
+      }
+      
+      // Get the first list.
+      const list: Word.List = lists.getFirst();
+      list.load("levelTypes,levelExistences");
+
+      await context.sync();
+
+      const levelTypes  = list.levelTypes;
+      console.log("Level types of the first list:");
+      for (let i = 0; i < levelTypes.length; i++) {
+        console.log(`- Level ${i + 1} (index ${i}): ${levelTypes[i]}`);
+      }
+
+      const levelExistences = list.levelExistences;
+      console.log("Level existences of the first list:");
+      for (let i = 0; i < levelExistences.length; i++) {
+        console.log(`- Level ${i + 1} (index ${i}): ${levelExistences[i]}`);
+      }
+    });
+Word.ListBuiltInNumberStyle:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/manage-list-styles.yaml
 
 
-    // Registers event handlers.
+    // Gets the properties of the specified style.
 
     await Word.run(async (context) => {
-      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
-      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
-
-      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
-      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
-      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
-      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
-      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
+      const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value;
+      if (styleName == "") {
+        console.warn("Enter a style name to get properties.");
+        return;
+      }
 
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
+      style.load("type");
       await context.sync();
 
-      console.log("Event handlers registered.");
-    });
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+      if (style.isNullObject || style.type != Word.StyleType.list) {
+        console.warn(`There's no existing style with the name '${styleName}'. Or this isn't a list style.`);
+      } else {
+        // Load objects to log properties and their values in the console.
+        style.load();
+        style.listTemplate.load();
+        await context.sync();
 
+        console.log(`Properties of the '${styleName}' style:`, style);
 
-    async function onPopupActionHandler(args:
-    Word.AnnotationPopupActionEventArgs) {
-      await Word.run(async (context) => {
-        let message = `AnnotationPopupAction: ID ${args.id} = `;
-        if (args.action === "Accept") {
-          message += `Accepted: ${args.critiqueSuggestion}`;
-        } else {
-          message += "Rejected";
-        }
+        const listLevels = style.listTemplate.listLevels;
+        listLevels.load("items");
+        await context.sync();
 
-        console.log(message);
-      });
-    }
-'Word.Document#onAnnotationRemoved:member':
+        console.log(`List levels of the '${styleName}' style:`, listLevels);
+      }
+    });
+Word.ListBullet:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
 
 
-    // Registers event handlers.
+    // Inserts a list starting with the first paragraph then set numbering and
+    bullet types of the list items.
 
     await Word.run(async (context) => {
-      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
-      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
+      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
+      paragraphs.load("$none");
 
-      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
-      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
-      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
-      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
-      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
+      await context.sync();
+
+      // Use the first paragraph to start a new list.
+      const list: Word.List = paragraphs.items[0].startNewList();
+      list.load("$none");
 
       await context.sync();
 
-      console.log("Event handlers registered.");
-    });
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+      // To add new items to the list, use Start or End on the insertLocation parameter.
+      list.insertParagraph("New list item at the start of the list", "Start");
+      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
 
+      // Set numbering for list level 1.
+      list.setLevelNumbering(0, Word.ListNumbering.arabic);
 
-    async function onRemovedHandler(args: Word.AnnotationRemovedEventArgs) {
-      await Word.run(async (context) => {
-        for (let id of args.ids) {
-          console.log(`AnnotationRemoved: ID ${id}`);
-        }
-      });
-    }
-'Word.Document#onContentControlAdded:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onadded-event.yaml
+      // Set bullet type for list level 5.
+      list.setLevelBullet(4, Word.ListBullet.arrow);
 
+      // Set list level for the last item in this list.
+      paragraph.listItem.level = 4;
 
-    // Registers the onAdded event handler on the document.
+      list.load("levelTypes");
 
-    await Word.run(async (context) => {
-      eventContext = context.document.onContentControlAdded.add(contentControlAdded);
       await context.sync();
-
-      console.log("Added event handler for when content controls are added.");
     });
+Word.ListCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onadded-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
 
 
-    async function contentControlAdded(event: Word.ContentControlAddedEventArgs)
-    {
-      await Word.run(async (context) => {
-        console.log(`${event.eventType} event detected. IDs of content controls that were added:`, event.ids);
-      });
-    }
-'Word.Document#onParagraphAdded:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onadded-event.yaml
+    // Gets information about the first list in the document.
 
+    await Word.run(async (context) => {
+      const lists: Word.ListCollection = context.document.body.lists;
+      lists.load("items");
 
-    // Registers the onParagraphAdded event handler on the document.
+      await context.sync();
+
+      if (lists.items.length === 0) {
+        console.warn("There are no lists in this document.");
+        return;
+      }
+      
+      // Get the first list.
+      const list: Word.List = lists.getFirst();
+      list.load("levelTypes,levelExistences");
 
-    await Word.run(async (context) => {
-      eventContext = context.document.onParagraphAdded.add(paragraphAdded);
       await context.sync();
 
-      console.log("Added event handler for when paragraphs are added.");
+      const levelTypes  = list.levelTypes;
+      console.log("Level types of the first list:");
+      for (let i = 0; i < levelTypes.length; i++) {
+        console.log(`- Level ${i + 1} (index ${i}): ${levelTypes[i]}`);
+      }
+
+      const levelExistences = list.levelExistences;
+      console.log("Level existences of the first list:");
+      for (let i = 0; i < levelExistences.length; i++) {
+        console.log(`- Level ${i + 1} (index ${i}): ${levelExistences[i]}`);
+      }
     });
+Word.ListItem:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onadded-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/insert-list.yaml
 
 
-    async function paragraphAdded(event: Word.ParagraphAddedEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.type} event detected. IDs of paragraphs that were added:`, event.uniqueLocalIds);
-      });
-    }
-'Word.Document#onParagraphChanged:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onchanged-event.yaml
+    // This example starts a new list with the second paragraph.
+
+    await Word.run(async (context) => {
+      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
+      paragraphs.load("$none");
 
+      await context.sync();
 
-    // Registers the onParagraphChanged event handler on the document.
+      // Start new list using the second paragraph.
+      const list: Word.List = paragraphs.items[1].startNewList();
+      list.load("$none");
 
-    await Word.run(async (context) => {
-      eventContext = context.document.onParagraphChanged.add(paragraphChanged);
       await context.sync();
 
-      console.log("Added event handler for when content is changed in paragraphs.");
-    });
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onchanged-event.yaml
+      // To add new items to the list, use Start or End on the insertLocation parameter.
+      list.insertParagraph("New list item at the start of the list", "Start");
+      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
 
+      // Set up list level for the list item.
+      paragraph.listItem.level = 4;
 
-    async function paragraphChanged(event: Word.ParagraphChangedEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.type} event detected. IDs of paragraphs where content was changed:`, event.uniqueLocalIds);
-      });
-    }
-'Word.Document#onParagraphDeleted:member':
+      // To add paragraphs outside the list, use Before or After.
+      list.insertParagraph("New paragraph goes after (not part of the list)", "After");
+
+      await context.sync();
+    });
+Word.ListItem#level:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/ondeleted-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/insert-list.yaml
 
 
-    // Registers the onParagraphDeleted event handler on the document.
+    // This example starts a new list with the second paragraph.
 
     await Word.run(async (context) => {
-      eventContext = context.document.onParagraphDeleted.add(paragraphDeleted);
+      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
+      paragraphs.load("$none");
+
       await context.sync();
 
-      console.log("Added event handlers for when paragraphs are deleted.");
-    });
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/ondeleted-event.yaml
+      // Start new list using the second paragraph.
+      const list: Word.List = paragraphs.items[1].startNewList();
+      list.load("$none");
 
+      await context.sync();
 
-    async function paragraphDeleted(event: Word.ParagraphDeletedEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.type} event detected. IDs of paragraphs that were deleted:`, event.uniqueLocalIds);
-      });
-    }
-'Word.Document#properties:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/30-properties/get-built-in-properties.yaml
+      // To add new items to the list, use Start or End on the insertLocation parameter.
+      list.insertParagraph("New list item at the start of the list", "Start");
+      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
 
+      // Set up list level for the list item.
+      paragraph.listItem.level = 4;
 
-    await Word.run(async (context) => {
-        const builtInProperties: Word.DocumentProperties = context.document.properties;
-        builtInProperties.load("*"); // Let's get all!
+      // To add paragraphs outside the list, use Before or After.
+      list.insertParagraph("New paragraph goes after (not part of the list)", "After");
 
-        await context.sync();
-        console.log(JSON.stringify(builtInProperties, null, 4));
+      await context.sync();
     });
-'Word.Document#settings:member':
+Word.ListLevel:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-settings.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/manage-list-styles.yaml
 
 
-    // Gets all custom settings this add-in set on this document.
+    // Gets the properties of the specified style.
 
     await Word.run(async (context) => {
-      const settings: Word.SettingCollection = context.document.settings;
-      settings.load("items");
+      const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value;
+      if (styleName == "") {
+        console.warn("Enter a style name to get properties.");
+        return;
+      }
+
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
+      style.load("type");
       await context.sync();
 
-      if (settings.items.length == 0) {
-        console.log("There are no settings.");
+      if (style.isNullObject || style.type != Word.StyleType.list) {
+        console.warn(`There's no existing style with the name '${styleName}'. Or this isn't a list style.`);
       } else {
-        console.log("All settings:");
-        for (let i = 0; i < settings.items.length; i++) {
-          console.log(settings.items[i]);
-        }
+        // Load objects to log properties and their values in the console.
+        style.load();
+        style.listTemplate.load();
+        await context.sync();
+
+        console.log(`Properties of the '${styleName}' style:`, style);
+
+        const listLevels = style.listTemplate.listLevels;
+        listLevels.load("items");
+        await context.sync();
+
+        console.log(`List levels of the '${styleName}' style:`, listLevels);
       }
     });
-'Word.DocumentCompareOptions:interface':
+Word.ListLevelCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/compare-documents.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/manage-list-styles.yaml
 
 
-    // Compares the current document with a specified external document.
+    // Gets the properties of the specified style.
 
     await Word.run(async (context) => {
-      // Absolute path of an online or local document.
-      const filePath = $("#filePath")
-        .val()
-        .toString();
-      // Options that configure the compare operation.
-      const options: Word.DocumentCompareOptions = {
-        compareTarget: Word.CompareTarget.compareTargetCurrent,
-        detectFormatChanges: false
-        // Other options you choose...
-        };
-      context.document.compare(filePath, options);
+      const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value;
+      if (styleName == "") {
+        console.warn("Enter a style name to get properties.");
+        return;
+      }
 
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
+      style.load("type");
       await context.sync();
 
-      console.log("Differences shown in the current document.");
+      if (style.isNullObject || style.type != Word.StyleType.list) {
+        console.warn(`There's no existing style with the name '${styleName}'. Or this isn't a list style.`);
+      } else {
+        // Load objects to log properties and their values in the console.
+        style.load();
+        style.listTemplate.load();
+        await context.sync();
+
+        console.log(`Properties of the '${styleName}' style:`, style);
+
+        const listLevels = style.listTemplate.listLevels;
+        listLevels.load("items");
+        await context.sync();
+
+        console.log(`List levels of the '${styleName}' style:`, listLevels);
+      }
     });
-'Word.DocumentCreated:class':
+Word.ListLevelType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-external-document.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
 
 
-    // Updates the text of the current document with the text from another
-    document passed in as a Base64-encoded string.
+    // Gets information about the first list in the document.
 
     await Word.run(async (context) => {
-      // Use the Base64-encoded string representation of the selected .docx file.
-      const externalDoc: Word.DocumentCreated = context.application.createDocument(externalDocument);
-      await context.sync();
+      const lists: Word.ListCollection = context.document.body.lists;
+      lists.load("items");
 
-      const externalDocBody: Word.Body = externalDoc.body;
-      externalDocBody.load("text");
       await context.sync();
 
-      // Insert the external document's text at the beginning of the current document's body.
-      const externalDocBodyText = externalDocBody.text;
-      const currentDocBody: Word.Body = context.document.body;
-      currentDocBody.insertText(externalDocBodyText, Word.InsertLocation.start);
+      if (lists.items.length === 0) {
+        console.warn("There are no lists in this document.");
+        return;
+      }
+      
+      // Get the first list.
+      const list: Word.List = lists.getFirst();
+      list.load("levelTypes,levelExistences");
+
       await context.sync();
+
+      const levelTypes  = list.levelTypes;
+      console.log("Level types of the first list:");
+      for (let i = 0; i < levelTypes.length; i++) {
+        console.log(`- Level ${i + 1} (index ${i}): ${levelTypes[i]}`);
+      }
+
+      const levelExistences = list.levelExistences;
+      console.log("Level existences of the first list:");
+      for (let i = 0; i < levelExistences.length; i++) {
+        console.log(`- Level ${i + 1} (index ${i}): ${levelExistences[i]}`);
+      }
     });
-'Word.DocumentProperties:class':
+Word.ListNumbering:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/30-properties/get-built-in-properties.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
 
 
+    // Inserts a list starting with the first paragraph then set numbering and
+    bullet types of the list items.
+
     await Word.run(async (context) => {
-        const builtInProperties: Word.DocumentProperties = context.document.properties;
-        builtInProperties.load("*"); // Let's get all!
+      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
+      paragraphs.load("$none");
 
-        await context.sync();
-        console.log(JSON.stringify(builtInProperties, null, 4));
-    });
-'Word.DocumentPropertyType:enum':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/30-properties/read-write-custom-document-properties.yaml
+      await context.sync();
 
+      // Use the first paragraph to start a new list.
+      const list: Word.List = paragraphs.items[0].startNewList();
+      list.load("$none");
 
-    await Word.run(async (context) => {
-        const properties: Word.CustomPropertyCollection = context.document.properties.customProperties;
-        properties.load("key,type,value");
+      await context.sync();
 
-        await context.sync();
-        for (let i = 0; i < properties.items.length; i++)
-            console.log("Property Name:" + properties.items[i].key + "; Type=" + properties.items[i].type + "; Property Value=" + properties.items[i].value);
-    });
-'Word.DropDownListContentControl:class':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml
+      // To add new items to the list, use Start or End on the insertLocation parameter.
+      list.insertParagraph("New list item at the start of the list", "Start");
+      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
 
+      // Set numbering for list level 1.
+      list.setLevelNumbering(0, Word.ListNumbering.arabic);
 
-    // Places a dropdown list content control at the end of the selection.
+      // Set bullet type for list level 5.
+      list.setLevelBullet(4, Word.ListBullet.arrow);
 
-    await Word.run(async (context) => {
-      let selection = context.document.getSelection();
-      selection.getRange(Word.RangeLocation.end).insertContentControl(Word.ContentControlType.dropDownList);
-      await context.sync();
+      // Set list level for the last item in this list.
+      paragraph.listItem.level = 4;
 
-      console.log("Dropdown list content control inserted at the end of the selection.");
+      list.load("levelTypes");
+
+      await context.sync();
     });
-'Word.DropDownListContentControl#addListItem:member(1)':
+Word.ListTemplate:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/manage-list-styles.yaml
 
 
-    // Adds the provided list item to the first dropdown list content control in
-    the selection.
+    // Gets the properties of the specified style.
 
     await Word.run(async (context) => {
-      const listItemText = $("#item-to-add")
-        .val()
-        .toString()
-        .trim();
-      const selectedRange: Word.Range = context.document.getSelection();
-      let selectedContentControl = selectedRange
-        .getContentControls({
-          types: [Word.ContentControlType.dropDownList]
-        })
-        .getFirstOrNullObject();
-      selectedContentControl.load("id,dropDownListContentControl");
+      const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value;
+      if (styleName == "") {
+        console.warn("Enter a style name to get properties.");
+        return;
+      }
+
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
+      style.load("type");
       await context.sync();
 
-      if (selectedContentControl.isNullObject) {
-        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type,dropDownListContentControl");
+      if (style.isNullObject || style.type != Word.StyleType.list) {
+        console.warn(`There's no existing style with the name '${styleName}'. Or this isn't a list style.`);
+      } else {
+        // Load objects to log properties and their values in the console.
+        style.load();
+        style.listTemplate.load();
         await context.sync();
 
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
-          console.warn("No dropdown list content control is currently selected.");
-          return;
-        } else {
-          selectedContentControl = parentContentControl;
-        }
-      }
+        console.log(`Properties of the '${styleName}' style:`, style);
 
-      selectedContentControl.dropDownListContentControl.addListItem(listItemText);
-      await context.sync();
+        const listLevels = style.listTemplate.listLevels;
+        listLevels.load("items");
+        await context.sync();
 
-      console.log(`List item added to control with ID ${selectedContentControl.id}: ${listItemText}`);
+        console.log(`List levels of the '${styleName}' style:`, listLevels);
+      }
     });
-'Word.DropDownListContentControl#deleteAllListItems:member(1)':
+Word.LocationRelation:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/compare-location.yaml
 
 
-    // Deletes the list items from first dropdown list content control found in
-    the selection.
+    // Compares the location of one paragraph in relation to another paragraph.
 
     await Word.run(async (context) => {
-      const selectedRange: Word.Range = context.document.getSelection();
-      let selectedContentControl = selectedRange
-        .getContentControls({
-          types: [Word.ContentControlType.dropDownList]
-        })
-        .getFirstOrNullObject();
-      selectedContentControl.load("id,dropDownListContentControl");
+      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
+      paragraphs.load("items");
+
       await context.sync();
 
-      if (selectedContentControl.isNullObject) {
-        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type,dropDownListContentControl");
-        await context.sync();
+      const firstParagraphAsRange: Word.Range = paragraphs.items[0].getRange();
+      const secondParagraphAsRange: Word.Range = paragraphs.items[1].getRange();
 
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
-          console.warn("No dropdown list content control is currently selected.");
-          return;
-        } else {
-          selectedContentControl = parentContentControl;
-        }
-      }
+      const comparedLocation = firstParagraphAsRange.compareLocationWith(secondParagraphAsRange);
 
-      console.log(
-        `About to delete the list from the dropdown list content control with ID ${selectedContentControl.id}`
-      );
-      selectedContentControl.dropDownListContentControl.deleteAllListItems();
       await context.sync();
 
-      console.log("Deleted the list from the dropdown list content control.");
+      const locationValue: Word.LocationRelation = comparedLocation.value;
+      console.log(`Location of the first paragraph in relation to the second paragraph: ${locationValue}`);
     });
-'Word.DropDownListContentControl#listItems:member':
+Word.NoteItem:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
 
 
-    // Deletes the provided list item from the first dropdown list content
-    control in the selection.
+    // Gets the text of the referenced footnote.
 
     await Word.run(async (context) => {
-      const listItemText = $("#item-to-delete")
-        .val()
-        .toString()
-        .trim();
-      const selectedRange: Word.Range = context.document.getSelection();
-      let selectedContentControl = selectedRange
-        .getContentControls({
-          types: [Word.ContentControlType.dropDownList]
-        })
-        .getFirstOrNullObject();
-      selectedContentControl.load("id,dropDownListContentControl");
-      await context.sync();
-
-      if (selectedContentControl.isNullObject) {
-        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type,dropDownListContentControl");
-        await context.sync();
-
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.dropDownList) {
-          console.warn("No dropdown list content control is currently selected.");
-          return;
-        } else {
-          selectedContentControl = parentContentControl;
-        }
-      }
-
-      let selectedDropdownList: Word.DropDownListContentControl = selectedContentControl.dropDownListContentControl;
-      selectedDropdownList.listItems.load("items/*");
+      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
+      footnotes.load("items/body");
       await context.sync();
 
-      let listItems: Word.ContentControlListItemCollection = selectedContentControl.dropDownListContentControl.listItems;
-      let itemToDelete: Word.ContentControlListItem = listItems.items.find((item) => item.displayText === listItemText);
-      if (!itemToDelete) {
-        console.warn(`List item doesn't exist in control with ID ${selectedContentControl.id}: ${listItemText}`)
-        return;
-      }
-      
-      itemToDelete.delete();
+      const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value;
+      const mark = (referenceNumber as number) - 1;
+      const footnoteBody: Word.Range = footnotes.items[mark].body.getRange();
+      footnoteBody.load("text");
       await context.sync();
 
-      console.log(`List item deleted from control with ID ${selectedContentControl.id}: ${listItemText}`);
+      console.log(`Text of footnote ${referenceNumber}: ${footnoteBody.text}`);
     });
-'Word.ErrorCodes:enum':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
-
-
-    async function tryCatch(callback) {
-      try {
-        await callback();
-      } catch (error) {
-        // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
-        if (error.code === Word.ErrorCodes.itemNotFound) {
-          console.warn("No checkbox content control is currently selected.");
-        } else {
-          console.error(error);
-        }
-      }
-    }
-'Word.EventSource:enum':
+Word.NoteItem#delete:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
 
 
-    // Registers event handlers.
+    // Deletes this referenced footnote.
 
     await Word.run(async (context) => {
-      const body: Word.Body = context.document.body;
-      body.track();
+      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
+      footnotes.load("items");
       await context.sync();
 
-      eventContexts[0] = body.onCommentAdded.add(onEventHandler);
-      eventContexts[1] = body.onCommentChanged.add(onChangedHandler);
-      eventContexts[2] = body.onCommentDeleted.add(onEventHandler);
-      eventContexts[3] = body.onCommentDeselected.add(onEventHandler);
-      eventContexts[4] = body.onCommentSelected.add(onEventHandler);
+      const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value;
+      const mark = (referenceNumber as number) - 1;
+      footnotes.items[mark].delete();
       await context.sync();
 
-      console.log("Event handlers registered.");
+      console.log("Footnote deleted.");
     });
+Word.NoteItem#getNext:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
 
 
-    async function onEventHandler(event: Word.CommentEventArgs) {
-      // Handler for all events except onCommentChanged.
-      await Word.run(async (context) => {
-        console.log(`${event.type} event detected. Event source: ${event.source}. Comment info:`, event.commentDetails);
-      });
-    }
-'Word.EventType:enum':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondeleted-event.yaml
+    // Selects the next footnote in the document body.
 
+    await Word.run(async (context) => {
+      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
+      footnotes.load("items/reference");
+      await context.sync();
 
-    async function contentControlDeleted(event:
-    Word.ContentControlDeletedEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.eventType} event detected. IDs of content controls that were deleted:`, event.ids);
-      });
-    }
-'Word.Field:class':
+      const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value;
+      const mark = (referenceNumber as number) - 1;
+      const reference: Word.Range = footnotes.items[mark].getNext().reference;
+      reference.select();
+      console.log("Selected is the next footnote: " + (mark + 2));
+    });
+Word.NoteItem#body:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
 
 
-    // Gets the first field in the document.
+    // Gets the text of the referenced footnote.
 
     await Word.run(async (context) => {
-      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
-      field.load(["code", "result", "locked", "type", "data", "kind"]);
+      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
+      footnotes.load("items/body");
+      await context.sync();
 
+      const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value;
+      const mark = (referenceNumber as number) - 1;
+      const footnoteBody: Word.Range = footnotes.items[mark].body.getRange();
+      footnoteBody.load("text");
       await context.sync();
 
-      if (field.isNullObject) {
-        console.log("This document has no fields.");
-      } else {
-        console.log("Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result), "Type of first field: " + field.type, "Is the first field locked? " + field.locked, "Kind of the first field: " + field.kind);
-      }
+      console.log(`Text of footnote ${referenceNumber}: ${footnoteBody.text}`);
     });
-'Word.Field#delete:member(1)':
+Word.NoteItem#reference:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
 
 
-    // Deletes the first field in the document.
+    // Selects the footnote's reference mark in the document body.
 
     await Word.run(async (context) => {
-      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
-      field.load();
-
+      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
+      footnotes.load("items/reference");
       await context.sync();
 
-      if (field.isNullObject) {
-        console.log("This document has no fields.");
-      } else {
-        field.delete();
-        await context.sync();
+      const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value;
+      const mark = (referenceNumber as number) - 1;
+      const item: Word.NoteItem = footnotes.items[mark];
+      const reference: Word.Range = item.reference;
+      reference.select();
+      await context.sync();
 
-        console.log("The first field in the document was deleted.");
-      }
+      console.log(`Reference ${referenceNumber} is selected.`);
     });
-'Word.Field#select:member(1)':
+Word.NoteItem#type:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
 
 
-    // Gets and updates the first field in the selection.
+    // Gets the referenced note's item type and body type, which are both
+    "Footnote".
 
     await Word.run(async (context) => {
-      let field = context.document.getSelection().fields.getFirstOrNullObject();
-      field.load(["code", "result", "type", "locked"]);
+      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
+      footnotes.load("items");
+      await context.sync();
+
+      const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value;
+      const mark = (referenceNumber as number) - 1;
+      const item: Word.NoteItem = footnotes.items[mark];
+      console.log(`Note type of footnote ${referenceNumber}: ${item.type}`);
 
+      item.body.load("type");
       await context.sync();
 
-      if (field.isNullObject) {
-        console.log("No field in selection.");
-      } else {
-        console.log("Before updating:", "Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result));
+      console.log(`Body type of note: ${item.body.type}`);
+    });
+Word.NoteItemCollection:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
 
-        field.updateResult();
-        field.select();
-        await context.sync();
 
-        field.load(["code", "result"]);
-        await context.sync();
+    // Gets the first footnote in the document body and select its reference
+    mark.
 
-        console.log("After updating:", "Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result));
-      }
+    await Word.run(async (context) => {
+      const reference: Word.Range = context.document.body.footnotes.getFirst().reference;
+      reference.select();
+      console.log("The first footnote is selected.");
     });
-'Word.Field#updateResult:member(1)':
+Word.NoteItemCollection#getFirst:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
 
 
-    // Gets and updates the first field in the selection.
+    // Gets the first footnote in the document body and select its reference
+    mark.
 
     await Word.run(async (context) => {
-      let field = context.document.getSelection().fields.getFirstOrNullObject();
-      field.load(["code", "result", "type", "locked"]);
+      const reference: Word.Range = context.document.body.footnotes.getFirst().reference;
+      reference.select();
+      console.log("The first footnote is selected.");
+    });
+Word.NoteItemType:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
 
-      await context.sync();
 
-      if (field.isNullObject) {
-        console.log("No field in selection.");
-      } else {
-        console.log("Before updating:", "Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result));
+    // Gets the referenced note's item type and body type, which are both
+    "Footnote".
 
-        field.updateResult();
-        field.select();
-        await context.sync();
+    await Word.run(async (context) => {
+      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
+      footnotes.load("items");
+      await context.sync();
 
-        field.load(["code", "result"]);
-        await context.sync();
+      const referenceNumber = (document.getElementById("input-reference") as HTMLInputElement).value;
+      const mark = (referenceNumber as number) - 1;
+      const item: Word.NoteItem = footnotes.items[mark];
+      console.log(`Note type of footnote ${referenceNumber}: ${item.type}`);
+
+      item.body.load("type");
+      await context.sync();
 
-        console.log("After updating:", "Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result));
-      }
+      console.log(`Body type of note: ${item.body.type}`);
     });
-'Word.Field#code:member':
+Word.OutlineLevel:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-custom-style.yaml
 
 
-    // Gets the first field in the document.
+    // Imports styles from JSON.
 
     await Word.run(async (context) => {
-      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
-      field.load(["code", "result", "locked", "type", "data", "kind"]);
+      const str =
+        '{"styles":[{"baseStyle":"Default Paragraph Font","builtIn":false,"inUse":true,"linked":false,"nameLocal":"NewCharStyle","priority":2,"quickStyle":true,"type":"Character","unhideWhenUsed":false,"visibility":false,"paragraphFormat":null,"font":{"name":"DengXian Light","size":16.0,"bold":true,"italic":false,"color":"#F1A983","underline":"None","subscript":false,"superscript":true,"strikeThrough":true,"doubleStrikeThrough":false,"highlightColor":null,"hidden":false},"shading":{"backgroundPatternColor":"#FF0000"}},{"baseStyle":"Normal","builtIn":false,"inUse":true,"linked":false,"nextParagraphStyle":"NewParaStyle","nameLocal":"NewParaStyle","priority":1,"quickStyle":true,"type":"Paragraph","unhideWhenUsed":false,"visibility":false,"paragraphFormat":{"alignment":"Centered","firstLineIndent":0.0,"keepTogether":false,"keepWithNext":false,"leftIndent":72.0,"lineSpacing":18.0,"lineUnitAfter":0.0,"lineUnitBefore":0.0,"mirrorIndents":false,"outlineLevel":"OutlineLevelBodyText","rightIndent":72.0,"spaceAfter":30.0,"spaceBefore":30.0,"widowControl":true},"font":{"name":"DengXian","size":14.0,"bold":true,"italic":true,"color":"#8DD873","underline":"Single","subscript":false,"superscript":false,"strikeThrough":false,"doubleStrikeThrough":true,"highlightColor":null,"hidden":false},"shading":{"backgroundPatternColor":"#00FF00"}},{"baseStyle":"Table Normal","builtIn":false,"inUse":true,"linked":false,"nextParagraphStyle":"NewTableStyle","nameLocal":"NewTableStyle","priority":100,"type":"Table","unhideWhenUsed":false,"visibility":false,"paragraphFormat":{"alignment":"Left","firstLineIndent":0.0,"keepTogether":false,"keepWithNext":false,"leftIndent":0.0,"lineSpacing":12.0,"lineUnitAfter":0.0,"lineUnitBefore":0.0,"mirrorIndents":false,"outlineLevel":"OutlineLevelBodyText","rightIndent":0.0,"spaceAfter":0.0,"spaceBefore":0.0,"widowControl":true},"font":{"name":"DengXian","size":20.0,"bold":false,"italic":true,"color":"#D86DCB","underline":"None","subscript":false,"superscript":false,"strikeThrough":false,"doubleStrikeThrough":false,"highlightColor":null,"hidden":false},"tableStyle":{"allowBreakAcrossPage":true,"alignment":"Left","bottomCellMargin":0.0,"leftCellMargin":0.08,"rightCellMargin":0.08,"topCellMargin":0.0,"cellSpacing":0.0},"shading":{"backgroundPatternColor":"#60CAF3"}}]}';
+      const styles = context.document.importStylesFromJson(str);
 
-      await context.sync();
+      // If you'd like to set how conflicting styles are handled, use the importedStylesConflictBehavior parameter that was introduced in the Desktop 1.1 requirement set. "Ignore" is the default.
+      ////const styles = context.document.importStylesFromJson(str, Word.ImportedStylesConflictBehavior.Ignore);
 
-      if (field.isNullObject) {
-        console.log("This document has no fields.");
-      } else {
-        console.log("Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result), "Type of first field: " + field.type, "Is the first field locked? " + field.locked, "Kind of the first field: " + field.kind);
-      }
+      await context.sync();
+      console.log("Styles imported from JSON:", styles);
     });
-'Word.Field#kind:member':
+Word.Page:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
 
-    // Gets the first field in the document.
 
     await Word.run(async (context) => {
-      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
-      field.load(["code", "result", "locked", "type", "data", "kind"]);
+      // Gets pages of the selection.
+      const pages: Word.PageCollection = context.document.getSelection().pages;
+      pages.load();
+      await context.sync();
+
+      // Log info for pages included in selection.
+      console.log(pages);
+      const pagesIndexes = [];
+      const pagesText = [];
+      for (let i = 0; i < pages.items.length; i++) {
+        const page = pages.items[i];
+        page.load("index");
+        pagesIndexes.push(page);
+
+        const range = page.getRange();
+        range.load("text");
+        pagesText.push(range);
+      }
 
       await context.sync();
 
-      if (field.isNullObject) {
-        console.log("This document has no fields.");
-      } else {
-        console.log("Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result), "Type of first field: " + field.type, "Is the first field locked? " + field.locked, "Kind of the first field: " + field.kind);
+      for (let i = 0; i < pagesIndexes.length; i++) {
+        console.log(`Index info for page ${i + 1} in the selection: ${pagesIndexes[i].index}`);
+        console.log("Text of that page in the selection:", pagesText[i].text);
       }
     });
-'Word.Field#locked:member':
+Word.Page#getRange:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
 
 
-    // Gets the first field in the selection and toggles between setting it to
-    locked or unlocked.
-
     await Word.run(async (context) => {
-      let field = context.document.getSelection().fields.getFirstOrNullObject();
-      field.load(["code", "result", "type", "locked"]);
+      // Gets pages of the selection.
+      const pages: Word.PageCollection = context.document.getSelection().pages;
+      pages.load();
       await context.sync();
 
-      if (field.isNullObject) {
-        console.log("The selection has no fields.");
-      } else {
-        console.log(`The first field in the selection is currently ${field.locked ? "locked" : "unlocked"}.`);
-        field.locked = !field.locked;
-        await context.sync();
+      // Log info for pages included in selection.
+      console.log(pages);
+      const pagesIndexes = [];
+      const pagesText = [];
+      for (let i = 0; i < pages.items.length; i++) {
+        const page = pages.items[i];
+        page.load("index");
+        pagesIndexes.push(page);
 
-        console.log(`The first field in the selection is now ${field.locked ? "locked" : "unlocked"}.`);
+        const range = page.getRange();
+        range.load("text");
+        pagesText.push(range);
+      }
+
+      await context.sync();
+
+      for (let i = 0; i < pagesIndexes.length; i++) {
+        console.log(`Index info for page ${i + 1} in the selection: ${pagesIndexes[i].index}`);
+        console.log("Text of that page in the selection:", pagesText[i].text);
       }
     });
-'Word.Field#parentBody:member':
+Word.Page#index:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
 
-    // Gets the parent body of the first field in the document.
 
     await Word.run(async (context) => {
-      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
-      field.load("parentBody/text");
+      // Gets the pages that contain the third paragraph.
+      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
+      paragraphs.load();
+      await context.sync();
 
+      const paraThree = paragraphs.items[2];
+      const rangeOfParagraph = paraThree.getRange();
+      const pages: Word.PageCollection = rangeOfParagraph.pages;
+      pages.load();
       await context.sync();
 
-      if (field.isNullObject) {
-        console.log("This document has no fields.");
-      } else {
-        const parentBody: Word.Body = field.parentBody;
-        console.log("Text of first field's parent body: " + JSON.stringify(parentBody.text));
+      // Log info for pages in range.
+      console.log(pages);
+      const pagesIndexes = [];
+      const pagesText = [];
+      for (let i = 0; i < pages.items.length; i++) {
+        const page = pages.items[i];
+        page.load("index");
+        pagesIndexes.push(page);
+
+        const range = page.getRange();
+        range.load("text");
+        pagesText.push(range);
+      }
+
+      await context.sync();
+
+      for (let i = 0; i < pagesIndexes.length; i++) {
+        console.log(`Index of page ${i + 1} that contains the third paragraph: ${pagesIndexes[i].index}`);
+        console.log("Text of that page:", pagesText[i].text);
       }
     });
-'Word.Field#result:member':
+Word.PageCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
 
 
-    // Gets the first field in the document.
-
     await Word.run(async (context) => {
-      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
-      field.load(["code", "result", "locked", "type", "data", "kind"]);
+      // Gets pages of the selection.
+      const pages: Word.PageCollection = context.document.getSelection().pages;
+      pages.load();
+      await context.sync();
+
+      // Log info for pages included in selection.
+      console.log(pages);
+      const pagesIndexes = [];
+      const pagesText = [];
+      for (let i = 0; i < pages.items.length; i++) {
+        const page = pages.items[i];
+        page.load("index");
+        pagesIndexes.push(page);
+
+        const range = page.getRange();
+        range.load("text");
+        pagesText.push(range);
+      }
 
       await context.sync();
 
-      if (field.isNullObject) {
-        console.log("This document has no fields.");
-      } else {
-        console.log("Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result), "Type of first field: " + field.type, "Is the first field locked? " + field.locked, "Kind of the first field: " + field.kind);
+      for (let i = 0; i < pagesIndexes.length; i++) {
+        console.log(`Index info for page ${i + 1} in the selection: ${pagesIndexes[i].index}`);
+        console.log("Text of that page in the selection:", pagesText[i].text);
       }
     });
-'Word.Field#type:member':
+Word.Pane:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
 
-    // Gets the first field in the document.
 
     await Word.run(async (context) => {
-      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
-      field.load(["code", "result", "locked", "type", "data", "kind"]);
+      // Gets the first paragraph of each page.
+      console.log("Getting first paragraph of each page...");
+
+      // Get the active window.
+      const activeWindow: Word.Window = context.document.activeWindow;
+      activeWindow.load();
+
+      // Get the active pane.
+      const activePane: Word.Pane = activeWindow.activePane;
+      activePane.load();
+
+      // Get all pages.
+      const pages: Word.PageCollection = activePane.pages;
+      pages.load();
 
       await context.sync();
 
-      if (field.isNullObject) {
-        console.log("This document has no fields.");
-      } else {
-        console.log("Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result), "Type of first field: " + field.type, "Is the first field locked? " + field.locked, "Kind of the first field: " + field.kind);
+      // Get page index and paragraphs of each page.
+      const pagesIndexes = [];
+      const pagesNumberOfParagraphs = [];
+      const pagesFirstParagraphText = [];
+      for (let i = 0; i < pages.items.length; i++) {
+        const page = pages.items[i];
+        page.load("index");
+        pagesIndexes.push(page);
+
+        const paragraphs = page.getRange().paragraphs;
+        paragraphs.load("items/length");
+        pagesNumberOfParagraphs.push(paragraphs);
+
+        const firstParagraph = paragraphs.getFirst();
+        firstParagraph.load("text");
+        pagesFirstParagraphText.push(firstParagraph);
+      }
+
+      await context.sync();
+
+      for (let i = 0; i < pagesIndexes.length; i++) {
+        console.log(`Page index: ${pagesIndexes[i].index}`);
+        console.log(`Number of paragraphs: ${pagesNumberOfParagraphs[i].items.length}`);
+        console.log("First paragraph's text:", pagesFirstParagraphText[i].text);
       }
     });
-'Word.FieldCollection:class':
+Word.Pane#pages:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
 
-    // Gets all fields in the document body.
 
     await Word.run(async (context) => {
-      const fields: Word.FieldCollection = context.document.body.fields.load("items");
+      // Gets the first paragraph of each page.
+      console.log("Getting first paragraph of each page...");
+
+      // Get the active window.
+      const activeWindow: Word.Window = context.document.activeWindow;
+      activeWindow.load();
+
+      // Get the active pane.
+      const activePane: Word.Pane = activeWindow.activePane;
+      activePane.load();
+
+      // Get all pages.
+      const pages: Word.PageCollection = activePane.pages;
+      pages.load();
 
       await context.sync();
 
-      if (fields.items.length === 0) {
-        console.log("No fields in this document.");
-      } else {
-        fields.load(["code", "result"]);
-        await context.sync();
+      // Get page index and paragraphs of each page.
+      const pagesIndexes = [];
+      const pagesNumberOfParagraphs = [];
+      const pagesFirstParagraphText = [];
+      for (let i = 0; i < pages.items.length; i++) {
+        const page = pages.items[i];
+        page.load("index");
+        pagesIndexes.push(page);
 
-        for (let i = 0; i < fields.items.length; i++) {
-          console.log(`Field ${i + 1}'s code: ${fields.items[i].code}`, `Field ${i + 1}'s result: ${JSON.stringify(fields.items[i].result)}`);
-        }
+        const paragraphs = page.getRange().paragraphs;
+        paragraphs.load("items/length");
+        pagesNumberOfParagraphs.push(paragraphs);
+
+        const firstParagraph = paragraphs.getFirst();
+        firstParagraph.load("text");
+        pagesFirstParagraphText.push(firstParagraph);
+      }
+
+      await context.sync();
+
+      for (let i = 0; i < pagesIndexes.length; i++) {
+        console.log(`Page index: ${pagesIndexes[i].index}`);
+        console.log(`Number of paragraphs: ${pagesNumberOfParagraphs[i].items.length}`);
+        console.log("First paragraph's text:", pagesFirstParagraphText[i].text);
       }
     });
-'Word.FieldCollection#getFirstOrNullObject:member(1)':
+Word.Pane#pagesEnclosingViewport:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
 
-    // Gets the first field in the document.
 
     await Word.run(async (context) => {
-      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
-      field.load(["code", "result", "locked", "type", "data", "kind"]);
+      // Gets the pages enclosing the viewport.
+
+      // Get the active window.
+      const activeWindow: Word.Window = context.document.activeWindow;
+      activeWindow.load();
+
+      // Get the active pane.
+      const activePane: Word.Pane = activeWindow.activePane;
+      activePane.load();
+
+      // Get pages enclosing the viewport.
+      const pages: Word.PageCollection = activePane.pagesEnclosingViewport;
+      pages.load();
 
       await context.sync();
 
-      if (field.isNullObject) {
-        console.log("This document has no fields.");
-      } else {
-        console.log("Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result), "Type of first field: " + field.type, "Is the first field locked? " + field.locked, "Kind of the first field: " + field.kind);
+      // Log the number of pages.
+      const pageCount = pages.items.length;
+      console.log(`Number of pages enclosing the viewport: ${pageCount}`);
+
+      // Log index info of these pages.
+      const pagesIndexes = [];
+      for (let i = 0; i < pageCount; i++) {
+        const page = pages.items[i];
+        page.load("index");
+        pagesIndexes.push(page);
+      }
+
+      await context.sync();
+
+      for (let i = 0; i < pagesIndexes.length; i++) {
+        console.log(`Page index: ${pagesIndexes[i].index}`);
       }
     });
-'Word.FieldCollection#items:member':
+Word.PaneCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
 
 
-    // Gets all fields in the document body.
-
     await Word.run(async (context) => {
-      const fields: Word.FieldCollection = context.document.body.fields.load("items");
+      // Gets all the panes in the active document window.
 
-      await context.sync();
+      // Get the active window.
+      const activeWindow: Word.Window = context.document.activeWindow;
+      activeWindow.load("panes/items/length");
 
-      if (fields.items.length === 0) {
-        console.log("No fields in this document.");
-      } else {
-        fields.load(["code", "result"]);
-        await context.sync();
+      await context.sync();
 
-        for (let i = 0; i < fields.items.length; i++) {
-          console.log(`Field ${i + 1}'s code: ${fields.items[i].code}`, `Field ${i + 1}'s result: ${JSON.stringify(fields.items[i].result)}`);
-        }
-      }
+      const panes: Word.PaneCollection = activeWindow.panes;
+      console.log(`Number of panes in the current document window: ${panes.items.length}`);
     });
-'Word.FieldKind:enum':
+Word.Paragraph:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/get-paragraph-on-insertion-point.yaml
 
-    // Gets the first field in the document.
 
     await Word.run(async (context) => {
-      const field: Word.Field = context.document.body.fields.getFirstOrNullObject();
-      field.load(["code", "result", "locked", "type", "data", "kind"]);
+      // The collection of paragraphs of the current selection returns the full paragraphs contained in it.
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      paragraph.load("text");
 
       await context.sync();
-
-      if (field.isNullObject) {
-        console.log("This document has no fields.");
-      } else {
-        console.log("Code of first field: " + field.code, "Result of first field: " + JSON.stringify(field.result), "Type of first field: " + field.type, "Is the first field locked? " + field.locked, "Kind of the first field: " + field.kind);
-      }
+      console.log(paragraph.text);
     });
-'Word.FieldType:enum':
+Word.Paragraph#getRange:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/get-paragraph-on-insertion-point.yaml
 
-    // Inserts a Date field before selection.
 
     await Word.run(async (context) => {
-      const range: Word.Range = context.document.getSelection().getRange();
-
-      const field: Word.Field = range.insertField(Word.InsertLocation.before, Word.FieldType.date, '\\@ "M/d/yyyy h:mm am/pm"', true);
+      // Get the complete sentence (as range) associated with the insertion point.
+      const sentences: Word.RangeCollection = context.document
+        .getSelection()
+        .getTextRanges(["."] /* Using the "." as delimiter */, false /*means without trimming spaces*/);
+      sentences.load("$none");
+      await context.sync();
 
-      field.load("result,code");
+      // Expand the range to the end of the paragraph to get all the complete sentences.
+      const sentencesToTheEndOfParagraph: Word.RangeCollection = sentences.items[0]
+        .getRange()
+        .expandTo(
+          context.document
+            .getSelection()
+            .paragraphs.getFirst()
+            .getRange(Word.RangeLocation.end)
+        )
+        .getTextRanges(["."], false /* Don't trim spaces*/);
+      sentencesToTheEndOfParagraph.load("text");
       await context.sync();
 
-      if (field.isNullObject) {
-        console.log("There are no fields in this document.");
-      } else {
-        console.log("Code of the field: " + field.code, "Result of the field: " + JSON.stringify(field.result));
+      for (let i = 0; i < sentencesToTheEndOfParagraph.items.length; i++) {
+        console.log(sentencesToTheEndOfParagraph.items[i].text);
       }
     });
-'Word.GetTextOptions:interface':
+Word.Paragraph#insertAnnotations:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/get-text.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+
 
+    // Adds annotations to the selected paragraph.
 
     await Word.run(async (context) => {
       const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const options: Word.CritiquePopupOptions = {
+        brandingTextResourceId: "PG.TabLabel",
+        subtitleResourceId: "PG.HelpCommand.TipTitle",
+        titleResourceId: "PG.HelpCommand.Label",
+        suggestions: ["suggestion 1", "suggestion 2", "suggestion 3"]
+      };
+      const critique1: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.red,
+        start: 1,
+        length: 3,
+        popupOptions: options
+      };
+      const critique2: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.green,
+        start: 6,
+        length: 1,
+        popupOptions: options
+      };
+      const critique3: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.blue,
+        start: 10,
+        length: 3,
+        popupOptions: options
+      };
+      const critique4: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.lavender,
+        start: 14,
+        length: 3,
+        popupOptions: options
+      };
+      const critique5: Word.Critique = {
+        colorScheme: Word.CritiqueColorScheme.berry,
+        start: 18,
+        length: 10,
+        popupOptions: options
+      };
+      const annotationSet: Word.AnnotationSet = {
+        critiques: [critique1, critique2, critique3, critique4, critique5]
+      };
 
-      const text = paragraph.getText();
-      const textIncludingHidden = paragraph.getText({ IncludeHiddenText: true });
-      const textIncludingDeleted = paragraph.getText({ IncludeTextMarkedAsDeleted: true });
+      const annotationIds = paragraph.insertAnnotations(annotationSet);
 
       await context.sync();
 
-      console.log("Text:- " + text.value, "Including hidden text:- " + textIncludingHidden.value, "Including text marked as deleted:- " + textIncludingDeleted.value);
+      console.log("Annotations inserted:", annotationIds.value);
     });
-'Word.HeaderFooterType:enum':
+Word.Paragraph#insertBreak:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-header-and-footer.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-line-and-page-breaks.yaml
 
 
-    await Word.run(async (context) => {
-      context.document.sections
-        .getFirst()
-        .getHeader(Word.HeaderFooterType.primary)
-        .insertParagraph("This is a primary header.", "End");
+    Word.run(async (context) => {
+      context.document.body.paragraphs.getFirst().insertBreak(Word.BreakType.line, "After");
 
       await context.sync();
+      console.log("success");
     });
-'Word.ImageFormat:enum':
+Word.Paragraph#insertContentControl:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-content-controls.yaml
 
 
-    // Gets the first image in the document.
+    // Traverses each paragraph of the document and wraps a content control on
+    each with either a even or odd tags.
 
     await Word.run(async (context) => {
-      const firstPicture: Word.InlinePicture = context.document.body.inlinePictures.getFirst();
-      firstPicture.load("width, height, imageFormat");
+      let paragraphs = context.document.body.paragraphs;
+      paragraphs.load("$none"); // Don't need any properties; just wrap each paragraph with a content control.
 
       await context.sync();
-      console.log(`Image dimensions: ${firstPicture.width} x ${firstPicture.height}`, `Image format: ${firstPicture.imageFormat}`);
-      // Get the image encoded as Base64.
-      const base64 = firstPicture.getBase64ImageSrc();
+
+      for (let i = 0; i < paragraphs.items.length; i++) {
+        let contentControl = paragraphs.items[i].insertContentControl();
+        // For even, tag "even".
+        if (i % 2 === 0) {
+          contentControl.tag = "even";
+        } else {
+          contentControl.tag = "odd";
+        }
+      }
+      console.log("Content controls inserted: " + paragraphs.items.length);
 
       await context.sync();
-      console.log(base64.value);
     });
-'Word.InlinePicture#getBase64ImageSrc:member(1)':
+Word.Paragraph#insertGeometricShape:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
-    // Gets the first image in the document.
 
     await Word.run(async (context) => {
-      const firstPicture: Word.InlinePicture = context.document.body.inlinePictures.getFirst();
-      firstPicture.load("width, height, imageFormat");
+      const body: Word.Body = context.document.body;
+      body.clear();
+      const lastParagraph: Word.Paragraph = body.paragraphs.getLast();
+
+      // Inserts a text box.
+      const textBoxOptions: Word.InsertShapeOptions = {
+        top: 0,
+        left: 0,
+        height: 100,
+        width: 100,
+      };
+      lastParagraph.insertTextBox("placeholder text", textBoxOptions);
 
-      await context.sync();
-      console.log(`Image dimensions: ${firstPicture.width} x ${firstPicture.height}`, `Image format: ${firstPicture.imageFormat}`);
-      // Get the image encoded as Base64.
-      const base64 = firstPicture.getBase64ImageSrc();
+      // Inserts a geometric shape.
+      const geometricShapeOptions: Word.InsertShapeOptions = {
+        height: 120,
+        width: 120,
+        left: 120,
+      };
+      lastParagraph.insertGeometricShape(Word.GeometricShapeType.star24, geometricShapeOptions);
+
+      // Inserts a picture.
+      const pictureOptions: Word.InsertShapeOptions = {
+        top: 120,
+        left: 60,
+        height: 150,
+        width: 150,
+      };
+      lastParagraph.insertPictureFromBase64(getPictureBase64(), pictureOptions);
 
       await context.sync();
-      console.log(base64.value);
     });
-'Word.InlinePicture:class':
+Word.Paragraph#insertText:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-in-different-locations.yaml
 
-    // Inserts an image anchored to the last paragraph.
 
     await Word.run(async (context) => {
-      context.document.body.paragraphs
-        .getLast()
-        .insertParagraph("", "After")
-        .insertInlinePictureFromBase64(base64Image, "End");
+      // Replace the last paragraph.
+      const range: Word.Range = context.document.body.paragraphs.getLast().insertText("Just replaced the last paragraph!", "Replace");
+      range.font.highlightColor = "black";
+      range.font.color = "white";
 
       await context.sync();
     });
-'Word.InlinePicture#imageFormat:member':
+Word.Paragraph#insertTextBox:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
 
-    // Gets the first image in the document.
-
     await Word.run(async (context) => {
-      const firstPicture: Word.InlinePicture = context.document.body.inlinePictures.getFirst();
-      firstPicture.load("width, height, imageFormat");
-
+      // Inserts a text box at the beginning of the first paragraph in the header.
+      const headerFooterBody: Word.Body = context.document.sections.getFirst().getHeader(Word.HeaderFooterType.primary);
+      headerFooterBody.load("paragraphs");
+      const firstParagraph: Word.Paragraph = headerFooterBody.paragraphs.getFirst();
+      const insertShapeOptions: Word.InsertShapeOptions = {
+        top: 0,
+        left: 0,
+        height: 100,
+        width: 100
+      };
+      const newTextBox: Word.Shape = firstParagraph.insertTextBox("placeholder text", insertShapeOptions);
+      newTextBox.select();
       await context.sync();
-      console.log(`Image dimensions: ${firstPicture.width} x ${firstPicture.height}`, `Image format: ${firstPicture.imageFormat}`);
-      // Get the image encoded as Base64.
-      const base64 = firstPicture.getBase64ImageSrc();
 
-      await context.sync();
-      console.log(base64.value);
+      console.log("Inserted a text box at the beginning of the first paragraph in the header.");
     });
-'Word.InlinePictureCollection:class':
+Word.Paragraph#select:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/scroll-to-range.yaml
 
-    // Gets the first image in the document.
 
     await Word.run(async (context) => {
-      const firstPicture: Word.InlinePicture = context.document.body.inlinePictures.getFirst();
-      firstPicture.load("width, height, imageFormat");
-
-      await context.sync();
-      console.log(`Image dimensions: ${firstPicture.width} x ${firstPicture.height}`, `Image format: ${firstPicture.imageFormat}`);
-      // Get the image encoded as Base64.
-      const base64 = firstPicture.getBase64ImageSrc();
+      // If select is called with no parameters, it selects the object.
+      context.document.body.paragraphs.getLast().select();
 
       await context.sync();
-      console.log(base64.value);
     });
-'Word.InsertFileOptions:interface':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-external-document.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/scroll-to-range.yaml
 
-    // Inserts content (applying selected settings) from another document passed
-    in as a Base64-encoded string.
 
     await Word.run(async (context) => {
-      // Use the Base64-encoded string representation of the selected .docx file.
-      context.document.insertFileFromBase64(externalDocument, "Replace", {
-        importTheme: true,
-        importStyles: true,
-        importParagraphSpacing: true,
-        importPageColor: true,
-        importChangeTrackingMode: true,
-        importCustomProperties: true,
-        importCustomXmlParts: true,
-        importDifferentOddEvenPages: true
-      });
+      // Select can be at the start or end of a range; this by definition moves the insertion point without selecting the range.
+      context.document.body.paragraphs.getLast().select(Word.SelectionMode.end);
+
       await context.sync();
     });
-'Word.InsertLocation:enum':
+Word.Paragraph#set:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-section-breaks.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/multiple-property-set.yaml
 
-    // Inserts a section without an associated page break.
 
     await Word.run(async (context) => {
-      const body: Word.Body = context.document.body;
-      body.insertBreak(Word.BreakType.sectionContinuous, Word.InsertLocation.end);
+      const paragraph: Word.Paragraph = context.document.body.paragraphs.getFirst();
+      paragraph.set({
+        leftIndent: 30,
+        font: {
+          bold: true,
+          color: "red"
+        }
+      });
 
       await context.sync();
-
-      console.log("Inserted section without an associated page break.");
     });
-'Word.List:class':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/insert-list.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/multiple-property-set.yaml
 
-    // This example starts a new list with the second paragraph.
 
     await Word.run(async (context) => {
-      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
-      paragraphs.load("$none");
+      const firstParagraph: Word.Paragraph = context.document.body.paragraphs.getFirst();
+      const secondParagraph: Word.Paragraph = firstParagraph.getNext();
+      firstParagraph.load("text, font/color, font/bold, leftIndent");
 
       await context.sync();
 
-      // Start new list using the second paragraph.
-      const list: Word.List = paragraphs.items[1].startNewList();
-      list.load("$none");
+      secondParagraph.set(firstParagraph);
 
       await context.sync();
+    });
+Word.Paragraph#split:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/split-words-of-first-paragraph.yaml
 
-      // To add new items to the list, use Start or End on the insertLocation parameter.
-      list.insertParagraph("New list item at the start of the list", "Start");
-      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
-
-      // Set up list level for the list item.
-      paragraph.listItem.level = 4;
 
-      // To add paragraphs outside the list, use Before or After.
-      list.insertParagraph("New paragraph goes after (not part of the list)", "After");
+    await Word.run(async (context) => {
+      const paragraph: Word.Paragraph = context.document.body.paragraphs.getFirst();
+      const words = paragraph.split([" "], true /* trimDelimiters*/, true /* trimSpaces */);
+      words.load("text");
 
       await context.sync();
+
+      for (let i = 0; i < words.items.length; i++) {
+        if (i >= 1) {
+          words.items[i - 1].font.highlightColor = "#FFFFFF";
+        }
+        words.items[i].font.highlightColor = "#FFFF00";
+
+        await context.sync();
+        await pause(200);
+      }
     });
-'Word.List#insertParagraph:member(1)':
+Word.Paragraph#startNewList:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/insert-list.yaml
@@ -21244,448 +27100,316 @@
 
       await context.sync();
     });
-'Word.List#setLevelBullet:member(1)':
+Word.Paragraph#alignment:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/paragraph-properties.yaml
 
-    // Inserts a list starting with the first paragraph then set numbering and
-    bullet types of the list items.
 
     await Word.run(async (context) => {
-      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
-      paragraphs.load("$none");
-
-      await context.sync();
-
-      // Use the first paragraph to start a new list.
-      const list: Word.List = paragraphs.items[0].startNewList();
-      list.load("$none");
-
-      await context.sync();
-
-      // To add new items to the list, use Start or End on the insertLocation parameter.
-      list.insertParagraph("New list item at the start of the list", "Start");
-      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
-
-      // Set numbering for list level 1.
-      list.setLevelNumbering(0, Word.ListNumbering.arabic);
-
-      // Set bullet type for list level 5.
-      list.setLevelBullet(4, Word.ListBullet.arrow);
-
-      // Set list level for the last item in this list.
-      paragraph.listItem.level = 4;
-
-      list.load("levelTypes");
+      // Center last paragraph alignment.
+      context.document.body.paragraphs.getLast().alignment = "Centered";
 
       await context.sync();
     });
-'Word.List#setLevelNumbering:member(1)':
+Word.Paragraph#leftIndent:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/paragraph-properties.yaml
 
-    // Inserts a list starting with the first paragraph then set numbering and
-    bullet types of the list items.
 
     await Word.run(async (context) => {
-      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
-      paragraphs.load("$none");
-
-      await context.sync();
-
-      // Use the first paragraph to start a new list.
-      const list: Word.List = paragraphs.items[0].startNewList();
-      list.load("$none");
-
-      await context.sync();
-
-      // To add new items to the list, use Start or End on the insertLocation parameter.
-      list.insertParagraph("New list item at the start of the list", "Start");
-      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
-
-      // Set numbering for list level 1.
-      list.setLevelNumbering(0, Word.ListNumbering.arabic);
-
-      // Set bullet type for list level 5.
-      list.setLevelBullet(4, Word.ListBullet.arrow);
-
-      // Set list level for the last item in this list.
-      paragraph.listItem.level = 4;
-
-      list.load("levelTypes");
+      // Indent the first paragraph.
+      context.document.body.paragraphs.getFirst().leftIndent = 75; //units = points
 
-      await context.sync();
+      return context.sync();
     });
-'Word.List#levelExistences:member':
+Word.Paragraph#lineSpacing:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/paragraph-properties.yaml
 
-    // Gets information about the first list in the document.
 
     await Word.run(async (context) => {
-      const lists: Word.ListCollection = context.document.body.lists;
-      lists.load("items");
-
-      await context.sync();
-
-      if (lists.items.length === 0) {
-        console.warn("There are no lists in this document.");
-        return;
-      }
-      
-      // Get the first list.
-      const list: Word.List = lists.getFirst();
-      list.load("levelTypes,levelExistences");
+      // Adjust line spacing.
+      context.document.body.paragraphs.getFirst().lineSpacing = 20;
 
       await context.sync();
+    });
+Word.Paragraph#lineUnitAfter:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/paragraph-properties.yaml
 
-      const levelTypes  = list.levelTypes;
-      console.log("Level types of the first list:");
-      for (let i = 0; i < levelTypes.length; i++) {
-        console.log(`- Level ${i + 1} (index ${i}): ${levelTypes[i]}`);
-      }
 
-      const levelExistences = list.levelExistences;
-      console.log("Level existences of the first list:");
-      for (let i = 0; i < levelExistences.length; i++) {
-        console.log(`- Level ${i + 1} (index ${i}): ${levelExistences[i]}`);
-      }
+    await Word.run(async (context) => {
+      // Set the space (in line units) after the first paragraph.
+      context.document.body.paragraphs.getFirst().lineUnitAfter = 1;
+
+      await context.sync();
     });
-'Word.List#levelTypes:member':
+Word.Paragraph#lineUnitBefore:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/paragraph-properties.yaml
 
-    // Gets information about the first list in the document.
 
     await Word.run(async (context) => {
-      const lists: Word.ListCollection = context.document.body.lists;
-      lists.load("items");
+      // Set the space (in line units) before the first paragraph.
+      context.document.body.paragraphs.getFirst().lineUnitBefore = 1;
 
       await context.sync();
+    });
+Word.Paragraph#spaceAfter:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/paragraph-properties.yaml
 
-      if (lists.items.length === 0) {
-        console.warn("There are no lists in this document.");
-        return;
-      }
-      
-      // Get the first list.
-      const list: Word.List = lists.getFirst();
-      list.load("levelTypes,levelExistences");
-
-      await context.sync();
 
-      const levelTypes  = list.levelTypes;
-      console.log("Level types of the first list:");
-      for (let i = 0; i < levelTypes.length; i++) {
-        console.log(`- Level ${i + 1} (index ${i}): ${levelTypes[i]}`);
-      }
+    await Word.run(async (context) => {
+      // Set the space (in points) after the first paragraph.
+      context.document.body.paragraphs.getFirst().spaceAfter = 20;
 
-      const levelExistences = list.levelExistences;
-      console.log("Level existences of the first list:");
-      for (let i = 0; i < levelExistences.length; i++) {
-        console.log(`- Level ${i + 1} (index ${i}): ${levelExistences[i]}`);
-      }
+      await context.sync();
     });
-'Word.ListBuiltInNumberStyle:enum':
+Word.Paragraph#style:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/manage-list-styles.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
 
 
-    // Gets the properties of the specified style.
+    // Applies the specified style to a paragraph.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name-to-use").val() as string;
+      const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value;
       if (styleName == "") {
-        console.warn("Enter a style name to get properties.");
+        console.warn("Enter a style name to apply.");
         return;
       }
 
       const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load("type");
+      style.load();
       await context.sync();
 
-      if (style.isNullObject || style.type != Word.StyleType.list) {
-        console.warn(`There's no existing style with the name '${styleName}'. Or this isn't a list style.`);
+      if (style.isNullObject) {
+        console.warn(`There's no existing style with the name '${styleName}'.`);
+      } else if (style.type != Word.StyleType.paragraph) {
+        console.log(`The '${styleName}' style isn't a paragraph style.`);
       } else {
-        // Load objects to log properties and their values in the console.
-        style.load();
-        style.listTemplate.load();
-        await context.sync();
-
-        console.log(`Properties of the '${styleName}' style:`, style);
-
-        const listLevels = style.listTemplate.listLevels;
-        listLevels.load("items");
-        await context.sync();
-
-        console.log(`List levels of the '${styleName}' style:`, listLevels);
+        const body: Word.Body = context.document.body;
+        body.clear();
+        body.insertParagraph(
+          "Do you want to create a solution that extends the functionality of Word? You can use the Office Add-ins platform to extend Word clients running on the web, on a Windows desktop, or on a Mac.",
+          "Start"
+        );
+        const paragraph: Word.Paragraph = body.paragraphs.getFirst();
+        paragraph.style = style.nameLocal;
+        console.log(`'${styleName}' style applied to first paragraph.`);
       }
     });
-'Word.ListBullet:enum':
+Word.Paragraph#styleBuiltIn:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/doc-assembly.yaml
 
-    // Inserts a list starting with the first paragraph then set numbering and
-    bullet types of the list items.
 
     await Word.run(async (context) => {
-      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
-      paragraphs.load("$none");
-
-      await context.sync();
-
-      // Use the first paragraph to start a new list.
-      const list: Word.List = paragraphs.items[0].startNewList();
-      list.load("$none");
-
-      await context.sync();
-
-      // To add new items to the list, use Start or End on the insertLocation parameter.
-      list.insertParagraph("New list item at the start of the list", "Start");
-      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
-
-      // Set numbering for list level 1.
-      list.setLevelNumbering(0, Word.ListNumbering.arabic);
+        const paragraph: Word.Paragraph = context.document.body.insertParagraph("Timeline", "End");
+        paragraph.styleBuiltIn = "Heading2";
+        const paragraph2: Word.Paragraph = context.document.body.insertParagraph("The Services shall commence on July 31, 2015, and shall continue through July 29, 2015.", "End");
+        paragraph2.styleBuiltIn = "Normal";
+        const paragraph3: Word.Paragraph = context.document.body.insertParagraph("Project Costs by Phase", "End");
+        paragraph3.styleBuiltIn = "Heading2";
+        // Note a content control with the title of "ProjectCosts" is added. Content will be replaced later.
+        const paragraph4: Word.Paragraph = context.document.body.insertParagraph("<Add Project Costs Here>", "End");
+        paragraph4.styleBuiltIn = "Normal";
+        paragraph4.font.highlightColor = "#FFFF00";
+        const contentControl: Word.ContentControl = paragraph4.insertContentControl();
+        contentControl.title = "ProjectCosts";
+        const paragraph5: Word.Paragraph = context.document.body.insertParagraph("Project Team", "End");
+        paragraph5.styleBuiltIn = "Heading2";
+        paragraph5.font.highlightColor = "#FFFFFF";
+        const paragraph6: Word.Paragraph = context.document.body.insertParagraph("Terms of Work", "End");
+        paragraph6.styleBuiltIn = "Heading1";
+        const paragraph7: Word.Paragraph = context.document.body.insertParagraph("Contractor shall provide the Services and Deliverable(s) as follows:", "End");
+        paragraph7.styleBuiltIn = "Normal";
+        const paragraph8: Word.Paragraph = context.document.body.insertParagraph("Out-of-Pocket Expenses / Invoice Procedures", "End");
+        paragraph8.styleBuiltIn = "Heading2";
+        const paragraph9 : Word.Paragraph= context.document.body.insertParagraph("Client will be invoiced monthly for the consulting services and T&L expenses. Standard Contractor invoicing is assumed to be acceptable. Invoices are due upon receipt. client will be invoiced all costs associated with out-of-pocket expenses (including, without limitation, costs and expenses associated with meals, lodging, local transportation and any other applicable business expenses) listed on the invoice as a separate line item. Reimbursement for out-of-pocket expenses in connection with performance of this SOW, when authorized and up to the limits set forth in this SOW, shall be in accordance with Client's then-current published policies governing travel and associated business expenses, which information shall be provided by the Client Project Manager.", "End");
+        paragraph9.styleBuiltIn = "Normal";
+        // Insert a page break at the end of the document.
+        context.document.body.insertBreak("Page", "End");
 
-      // Set bullet type for list level 5.
-      list.setLevelBullet(4, Word.ListBullet.arrow);
+        await context.sync();
+    });
+Word.Paragraph#text:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/get-paragraph-on-insertion-point.yaml
 
-      // Set list level for the last item in this list.
-      paragraph.listItem.level = 4;
 
-      list.load("levelTypes");
+    await Word.run(async (context) => {
+      // The collection of paragraphs of the current selection returns the full paragraphs contained in it.
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      paragraph.load("text");
 
       await context.sync();
+      console.log(paragraph.text);
     });
-'Word.ListCollection:class':
+Word.Paragraph#uniqueLocalId:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Gets information about the first list in the document.
+    // Registers event handlers.
 
     await Word.run(async (context) => {
-      const lists: Word.ListCollection = context.document.body.lists;
-      lists.load("items");
-
-      await context.sync();
+      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
+      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
 
-      if (lists.items.length === 0) {
-        console.warn("There are no lists in this document.");
-        return;
-      }
-      
-      // Get the first list.
-      const list: Word.List = lists.getFirst();
-      list.load("levelTypes,levelExistences");
+      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
+      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
+      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
+      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
+      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
 
       await context.sync();
 
-      const levelTypes  = list.levelTypes;
-      console.log("Level types of the first list:");
-      for (let i = 0; i < levelTypes.length; i++) {
-        console.log(`- Level ${i + 1} (index ${i}): ${levelTypes[i]}`);
-      }
-
-      const levelExistences = list.levelExistences;
-      console.log("Level existences of the first list:");
-      for (let i = 0; i < levelExistences.length; i++) {
-        console.log(`- Level ${i + 1} (index ${i}): ${levelExistences[i]}`);
-      }
+      console.log("Event handlers registered.");
     });
-'Word.ListItem:class':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/insert-list.yaml
-
-
-    // This example starts a new list with the second paragraph.
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
-    await Word.run(async (context) => {
-      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
-      paragraphs.load("$none");
 
-      await context.sync();
+    async function paragraphChanged(args: Word.ParagraphChangedEventArgs) {
+      await Word.run(async (context) => {
+        const results = [];
+        for (let id of args.uniqueLocalIds) {
+          let para = context.document.getParagraphByUniqueLocalId(id);
+          para.load("uniqueLocalId");
 
-      // Start new list using the second paragraph.
-      const list: Word.List = paragraphs.items[1].startNewList();
-      list.load("$none");
+          results.push({ para: para, text: para.getText() });
+        }
 
-      await context.sync();
+        await context.sync();
 
-      // To add new items to the list, use Start or End on the insertLocation parameter.
-      list.insertParagraph("New list item at the start of the list", "Start");
-      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
+        for (let result of results) {
+          console.log(`${args.type}: ID ${result.para.uniqueLocalId}:-`, result.text.value);
+        }
+      });
+    }
+Word.ParagraphAddedEventArgs:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onadded-event.yaml
 
-      // Set up list level for the list item.
-      paragraph.listItem.level = 4;
 
-      // To add paragraphs outside the list, use Before or After.
-      list.insertParagraph("New paragraph goes after (not part of the list)", "After");
+    // Registers the onParagraphAdded event handler on the document.
 
+    await Word.run(async (context) => {
+      eventContext = context.document.onParagraphAdded.add(paragraphAdded);
       await context.sync();
+
+      console.log("Added event handler for when paragraphs are added.");
     });
-'Word.ListItem#level:member':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/insert-list.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onadded-event.yaml
 
-    // This example starts a new list with the second paragraph.
 
-    await Word.run(async (context) => {
-      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
-      paragraphs.load("$none");
+    async function paragraphAdded(event: Word.ParagraphAddedEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.type} event detected. IDs of paragraphs that were added:`, event.uniqueLocalIds);
+      });
+    }
+Word.ParagraphChangedEventArgs:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onchanged-event.yaml
 
-      await context.sync();
 
-      // Start new list using the second paragraph.
-      const list: Word.List = paragraphs.items[1].startNewList();
-      list.load("$none");
+    // Registers the onParagraphChanged event handler on the document.
 
+    await Word.run(async (context) => {
+      eventContext = context.document.onParagraphChanged.add(paragraphChanged);
       await context.sync();
 
-      // To add new items to the list, use Start or End on the insertLocation parameter.
-      list.insertParagraph("New list item at the start of the list", "Start");
-      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
-
-      // Set up list level for the list item.
-      paragraph.listItem.level = 4;
+      console.log("Added event handler for when content is changed in paragraphs.");
+    });
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onchanged-event.yaml
 
-      // To add paragraphs outside the list, use Before or After.
-      list.insertParagraph("New paragraph goes after (not part of the list)", "After");
 
-      await context.sync();
-    });
-'Word.ListLevel:class':
+    async function paragraphChanged(event: Word.ParagraphChangedEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.type} event detected. IDs of paragraphs where content was changed:`, event.uniqueLocalIds);
+      });
+    }
+Word.ParagraphCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/manage-list-styles.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
 
 
-    // Gets the properties of the specified style.
+    // Inserts an image anchored to the last paragraph.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name-to-use").val() as string;
-      if (styleName == "") {
-        console.warn("Enter a style name to get properties.");
-        return;
-      }
+      context.document.body.paragraphs
+        .getLast()
+        .insertParagraph("", "After")
+        .insertInlinePictureFromBase64(base64Image, "End");
 
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load("type");
       await context.sync();
-
-      if (style.isNullObject || style.type != Word.StyleType.list) {
-        console.warn(`There's no existing style with the name '${styleName}'. Or this isn't a list style.`);
-      } else {
-        // Load objects to log properties and their values in the console.
-        style.load();
-        style.listTemplate.load();
-        await context.sync();
-
-        console.log(`Properties of the '${styleName}' style:`, style);
-
-        const listLevels = style.listTemplate.listLevels;
-        listLevels.load("items");
-        await context.sync();
-
-        console.log(`List levels of the '${styleName}' style:`, listLevels);
-      }
     });
-'Word.ListLevelCollection:class':
+Word.ParagraphCollection#getFirst:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/manage-list-styles.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
 
 
-    // Gets the properties of the specified style.
+    // Gets annotations found in the selected paragraph.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name-to-use").val() as string;
-      if (styleName == "") {
-        console.warn("Enter a style name to get properties.");
-        return;
-      }
+      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
+      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
+      annotations.load("id,state,critiqueAnnotation");
 
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load("type");
       await context.sync();
 
-      if (style.isNullObject || style.type != Word.StyleType.list) {
-        console.warn(`There's no existing style with the name '${styleName}'. Or this isn't a list style.`);
-      } else {
-        // Load objects to log properties and their values in the console.
-        style.load();
-        style.listTemplate.load();
-        await context.sync();
-
-        console.log(`Properties of the '${styleName}' style:`, style);
+      console.log("Annotations found:");
 
-        const listLevels = style.listTemplate.listLevels;
-        listLevels.load("items");
-        await context.sync();
+      for (let i = 0; i < annotations.items.length; i++) {
+        const annotation: Word.Annotation = annotations.items[i];
 
-        console.log(`List levels of the '${styleName}' style:`, listLevels);
+        console.log(`ID ${annotation.id} - state '${annotation.state}':`, annotation.critiqueAnnotation.critique);
       }
     });
-'Word.ListLevelType:enum':
+Word.ParagraphCollection#getLast:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
 
 
-    // Gets information about the first list in the document.
+    // Inserts an image anchored to the last paragraph.
 
     await Word.run(async (context) => {
-      const lists: Word.ListCollection = context.document.body.lists;
-      lists.load("items");
-
-      await context.sync();
-
-      if (lists.items.length === 0) {
-        console.warn("There are no lists in this document.");
-        return;
-      }
-      
-      // Get the first list.
-      const list: Word.List = lists.getFirst();
-      list.load("levelTypes,levelExistences");
+      context.document.body.paragraphs
+        .getLast()
+        .insertParagraph("", "After")
+        .insertInlinePictureFromBase64(base64Image, "End");
 
       await context.sync();
-
-      const levelTypes  = list.levelTypes;
-      console.log("Level types of the first list:");
-      for (let i = 0; i < levelTypes.length; i++) {
-        console.log(`- Level ${i + 1} (index ${i}): ${levelTypes[i]}`);
-      }
-
-      const levelExistences = list.levelExistences;
-      console.log("Level existences of the first list:");
-      for (let i = 0; i < levelExistences.length; i++) {
-        console.log(`- Level ${i + 1} (index ${i}): ${levelExistences[i]}`);
-      }
     });
-'Word.ListNumbering:enum':
+Word.ParagraphCollection#items:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/organize-list.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/insert-list.yaml
 
 
-    // Inserts a list starting with the first paragraph then set numbering and
-    bullet types of the list items.
+    // This example starts a new list with the second paragraph.
 
     await Word.run(async (context) => {
       const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
@@ -21693,8 +27417,8 @@
 
       await context.sync();
 
-      // Use the first paragraph to start a new list.
-      const list: Word.List = paragraphs.items[0].startNewList();
+      // Start new list using the second paragraph.
+      const list: Word.List = paragraphs.items[1].startNewList();
       list.load("$none");
 
       await context.sync();
@@ -21703,288 +27427,289 @@
       list.insertParagraph("New list item at the start of the list", "Start");
       const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
 
-      // Set numbering for list level 1.
-      list.setLevelNumbering(0, Word.ListNumbering.arabic);
-
-      // Set bullet type for list level 5.
-      list.setLevelBullet(4, Word.ListBullet.arrow);
-
-      // Set list level for the last item in this list.
+      // Set up list level for the list item.
       paragraph.listItem.level = 4;
 
-      list.load("levelTypes");
+      // To add paragraphs outside the list, use Before or After.
+      list.insertParagraph("New paragraph goes after (not part of the list)", "After");
 
       await context.sync();
     });
-'Word.ListTemplate:class':
+Word.ParagraphDeletedEventArgs:interface:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/manage-list-styles.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/ondeleted-event.yaml
 
 
-    // Gets the properties of the specified style.
+    // Registers the onParagraphDeleted event handler on the document.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name-to-use").val() as string;
-      if (styleName == "") {
-        console.warn("Enter a style name to get properties.");
-        return;
-      }
-
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load("type");
+      eventContext = context.document.onParagraphDeleted.add(paragraphDeleted);
       await context.sync();
 
-      if (style.isNullObject || style.type != Word.StyleType.list) {
-        console.warn(`There's no existing style with the name '${styleName}'. Or this isn't a list style.`);
-      } else {
-        // Load objects to log properties and their values in the console.
-        style.load();
-        style.listTemplate.load();
-        await context.sync();
-
-        console.log(`Properties of the '${styleName}' style:`, style);
-
-        const listLevels = style.listTemplate.listLevels;
-        listLevels.load("items");
-        await context.sync();
-
-        console.log(`List levels of the '${styleName}' style:`, listLevels);
-      }
+      console.log("Added event handlers for when paragraphs are deleted.");
     });
-'Word.LocationRelation:enum':
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/compare-location.yaml
-
-
-    // Compares the location of one paragraph in relation to another paragraph.
-
-    await Word.run(async (context) => {
-      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
-      paragraphs.load("items");
-
-      await context.sync();
-
-      const firstParagraphAsRange: Word.Range = paragraphs.items[0].getRange();
-      const secondParagraphAsRange: Word.Range = paragraphs.items[1].getRange();
-
-      const comparedLocation = firstParagraphAsRange.compareLocationWith(secondParagraphAsRange);
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/ondeleted-event.yaml
 
-      await context.sync();
 
-      const locationValue: Word.LocationRelation = comparedLocation.value;
-      console.log(`Location of the first paragraph in relation to the second paragraph: ${locationValue}`);
-    });
-'Word.NoteItem:class':
+    async function paragraphDeleted(event: Word.ParagraphDeletedEventArgs) {
+      await Word.run(async (context) => {
+        console.log(`${event.type} event detected. IDs of paragraphs that were deleted:`, event.uniqueLocalIds);
+      });
+    }
+Word.ParagraphFormat:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
 
 
-    // Gets the text of the referenced footnote.
+    // Sets certain aspects of the specified style's paragraph format e.g., the
+    left indent size and the alignment.
 
     await Word.run(async (context) => {
-      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
-      footnotes.load("items/body");
-      await context.sync();
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
+      if (styleName == "") {
+        console.warn("Enter a style name to update its paragraph format.");
+        return;
+      }
 
-      const referenceNumber = $("#input-reference").val();
-      const mark = (referenceNumber as number) - 1;
-      const footnoteBody: Word.Range = footnotes.items[mark].body.getRange();
-      footnoteBody.load("text");
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
+      style.load();
       await context.sync();
 
-      console.log(`Text of footnote ${referenceNumber}: ${footnoteBody.text}`);
+      if (style.isNullObject) {
+        console.warn(`There's no existing style with the name '${styleName}'.`);
+      } else {
+        style.paragraphFormat.leftIndent = 30;
+        style.paragraphFormat.alignment = Word.Alignment.centered;
+        console.log(`Successfully the paragraph format of the '${styleName}' style.`);
+      }
     });
-'Word.NoteItem#delete:member(1)':
+Word.ParagraphFormat#alignment:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
 
 
-    // Deletes this referenced footnote.
+    // Sets certain aspects of the specified style's paragraph format e.g., the
+    left indent size and the alignment.
 
     await Word.run(async (context) => {
-      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
-      footnotes.load("items");
-      await context.sync();
-
-      const referenceNumber = $("#input-reference").val();
-      const mark = (referenceNumber as number) - 1;
-      footnotes.items[mark].delete();
-      await context.sync();
-
-      console.log("Footnote deleted.");
-    });
-'Word.NoteItem#getNext:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
-
-
-    // Selects the next footnote in the document body.
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
+      if (styleName == "") {
+        console.warn("Enter a style name to update its paragraph format.");
+        return;
+      }
 
-    await Word.run(async (context) => {
-      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
-      footnotes.load("items/reference");
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
+      style.load();
       await context.sync();
 
-      const referenceNumber = $("#input-reference").val();
-      const mark = (referenceNumber as number) - 1;
-      const reference: Word.Range = footnotes.items[mark].getNext().reference;
-      reference.select();
-      console.log("Selected is the next footnote: " + (mark + 2));
+      if (style.isNullObject) {
+        console.warn(`There's no existing style with the name '${styleName}'.`);
+      } else {
+        style.paragraphFormat.leftIndent = 30;
+        style.paragraphFormat.alignment = Word.Alignment.centered;
+        console.log(`Successfully the paragraph format of the '${styleName}' style.`);
+      }
     });
-'Word.NoteItem#body:member':
+Word.ParagraphFormat#leftIndent:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
 
 
-    // Gets the text of the referenced footnote.
+    // Sets certain aspects of the specified style's paragraph format e.g., the
+    left indent size and the alignment.
 
     await Word.run(async (context) => {
-      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
-      footnotes.load("items/body");
-      await context.sync();
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
+      if (styleName == "") {
+        console.warn("Enter a style name to update its paragraph format.");
+        return;
+      }
 
-      const referenceNumber = $("#input-reference").val();
-      const mark = (referenceNumber as number) - 1;
-      const footnoteBody: Word.Range = footnotes.items[mark].body.getRange();
-      footnoteBody.load("text");
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
+      style.load();
       await context.sync();
 
-      console.log(`Text of footnote ${referenceNumber}: ${footnoteBody.text}`);
+      if (style.isNullObject) {
+        console.warn(`There's no existing style with the name '${styleName}'.`);
+      } else {
+        style.paragraphFormat.leftIndent = 30;
+        style.paragraphFormat.alignment = Word.Alignment.centered;
+        console.log(`Successfully the paragraph format of the '${styleName}' style.`);
+      }
     });
-'Word.NoteItem#reference:member':
+Word.Range:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
 
-    // Selects the footnote's reference mark in the document body.
+    // Gets the range of the first comment in the selected content.
 
     await Word.run(async (context) => {
-      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
-      footnotes.load("items/reference");
+      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
+      comment.load("contentRange");
+      const range: Word.Range = comment.getRange();
+      range.load("text");
       await context.sync();
 
-      const referenceNumber = $("#input-reference").val();
-      const mark = (referenceNumber as number) - 1;
-      const item: Word.NoteItem = footnotes.items[mark];
-      const reference: Word.Range = item.reference;
-      reference.select();
-      await context.sync();
+      if (comment.isNullObject) {
+        console.warn("No comments in the selection, so no range to get.");
+        return;
+      }
 
-      console.log(`Reference ${referenceNumber} is selected.`);
+      console.log(`Comment location: ${range.text}`);
+      const contentRange: Word.CommentContentRange = comment.contentRange;
+      console.log("Comment content range:", contentRange);
     });
-'Word.NoteItem#type:member':
+Word.Range#compareLocationWith:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/compare-location.yaml
 
 
-    // Gets the referenced note's item type and body type, which are both
-    "Footnote".
+    // Compares the location of one paragraph in relation to another paragraph.
 
     await Word.run(async (context) => {
-      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
-      footnotes.load("items");
+      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
+      paragraphs.load("items");
+
       await context.sync();
 
-      const referenceNumber = $("#input-reference").val();
-      const mark = (referenceNumber as number) - 1;
-      const item: Word.NoteItem = footnotes.items[mark];
-      console.log(`Note type of footnote ${referenceNumber}: ${item.type}`);
+      const firstParagraphAsRange: Word.Range = paragraphs.items[0].getRange();
+      const secondParagraphAsRange: Word.Range = paragraphs.items[1].getRange();
+
+      const comparedLocation = firstParagraphAsRange.compareLocationWith(secondParagraphAsRange);
 
-      item.body.load("type");
       await context.sync();
 
-      console.log(`Body type of note: ${item.body.type}`);
+      const locationValue: Word.LocationRelation = comparedLocation.value;
+      console.log(`Location of the first paragraph in relation to the second paragraph: ${locationValue}`);
     });
-'Word.NoteItemCollection:class':
+Word.Range#expandTo:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/get-paragraph-on-insertion-point.yaml
 
-    // Gets the first footnote in the document body and select its reference
-    mark.
 
     await Word.run(async (context) => {
-      const reference: Word.Range = context.document.body.footnotes.getFirst().reference;
-      reference.select();
-      console.log("The first footnote is selected.");
+      // Get the complete sentence (as range) associated with the insertion point.
+      const sentences: Word.RangeCollection = context.document
+        .getSelection()
+        .getTextRanges(["."] /* Using the "." as delimiter */, false /*means without trimming spaces*/);
+      sentences.load("$none");
+      await context.sync();
+
+      // Expand the range to the end of the paragraph to get all the complete sentences.
+      const sentencesToTheEndOfParagraph: Word.RangeCollection = sentences.items[0]
+        .getRange()
+        .expandTo(
+          context.document
+            .getSelection()
+            .paragraphs.getFirst()
+            .getRange(Word.RangeLocation.end)
+        )
+        .getTextRanges(["."], false /* Don't trim spaces*/);
+      sentencesToTheEndOfParagraph.load("text");
+      await context.sync();
+
+      for (let i = 0; i < sentencesToTheEndOfParagraph.items.length; i++) {
+        console.log(sentencesToTheEndOfParagraph.items[i].text);
+      }
     });
-'Word.NoteItemCollection#getFirst:member(1)':
+Word.Range#getComments:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
 
-    // Gets the first footnote in the document body and select its reference
-    mark.
+    // Gets the comments in the selected content.
 
     await Word.run(async (context) => {
-      const reference: Word.Range = context.document.body.footnotes.getFirst().reference;
-      reference.select();
-      console.log("The first footnote is selected.");
+      const comments: Word.CommentCollection = context.document.getSelection().getComments();
+
+      // Load objects to log in the console.
+      comments.load();
+      await context.sync();
+
+      console.log("Comments:", comments);
     });
-'Word.NoteItemType:enum':
+Word.Range#getContentControls:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
 
 
-    // Gets the referenced note's item type and body type, which are both
-    "Footnote".
+    // Deletes the first checkbox content control found in the selection.
 
     await Word.run(async (context) => {
-      const footnotes: Word.NoteItemCollection = context.document.body.footnotes;
-      footnotes.load("items");
+      const selectedRange: Word.Range = context.document.getSelection();
+      let selectedContentControl = selectedRange
+        .getContentControls({
+          types: [Word.ContentControlType.checkBox]
+        })
+        .getFirstOrNullObject();
+      selectedContentControl.load("id");
+
       await context.sync();
 
-      const referenceNumber = $("#input-reference").val();
-      const mark = (referenceNumber as number) - 1;
-      const item: Word.NoteItem = footnotes.items[mark];
-      console.log(`Note type of footnote ${referenceNumber}: ${item.type}`);
+      if (selectedContentControl.isNullObject) {
+        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
+        parentContentControl.load("id,type");
+        await context.sync();
 
-      item.body.load("type");
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.checkBox) {
+          console.warn("No checkbox content control is currently selected.");
+          return;
+        } else {
+          selectedContentControl = parentContentControl;
+        }
+      }
+
+      console.log(`About to delete checkbox content control with id: ${selectedContentControl.id}`);
+      selectedContentControl.delete(false);
       await context.sync();
 
-      console.log(`Body type of note: ${item.body.type}`);
+      console.log("Deleted checkbox content control.");
     });
-'Word.OutlineLevel:enum':
+Word.Range#getRange:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-custom-style.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml
 
 
-    // Imports styles from JSON.
+    // Places a dropdown list content control at the end of the selection.
 
     await Word.run(async (context) => {
-      const str =
-        '{"styles":[{"baseStyle":"Default Paragraph Font","builtIn":false,"inUse":true,"linked":false,"nameLocal":"NewCharStyle","priority":2,"quickStyle":true,"type":"Character","unhideWhenUsed":false,"visibility":false,"paragraphFormat":null,"font":{"name":"DengXian Light","size":16.0,"bold":true,"italic":false,"color":"#F1A983","underline":"None","subscript":false,"superscript":true,"strikeThrough":true,"doubleStrikeThrough":false,"highlightColor":null,"hidden":false},"shading":{"backgroundPatternColor":"#FF0000"}},{"baseStyle":"Normal","builtIn":false,"inUse":true,"linked":false,"nextParagraphStyle":"NewParaStyle","nameLocal":"NewParaStyle","priority":1,"quickStyle":true,"type":"Paragraph","unhideWhenUsed":false,"visibility":false,"paragraphFormat":{"alignment":"Centered","firstLineIndent":0.0,"keepTogether":false,"keepWithNext":false,"leftIndent":72.0,"lineSpacing":18.0,"lineUnitAfter":0.0,"lineUnitBefore":0.0,"mirrorIndents":false,"outlineLevel":"OutlineLevelBodyText","rightIndent":72.0,"spaceAfter":30.0,"spaceBefore":30.0,"widowControl":true},"font":{"name":"DengXian","size":14.0,"bold":true,"italic":true,"color":"#8DD873","underline":"Single","subscript":false,"superscript":false,"strikeThrough":false,"doubleStrikeThrough":true,"highlightColor":null,"hidden":false},"shading":{"backgroundPatternColor":"#00FF00"}},{"baseStyle":"Table Normal","builtIn":false,"inUse":true,"linked":false,"nextParagraphStyle":"NewTableStyle","nameLocal":"NewTableStyle","priority":100,"type":"Table","unhideWhenUsed":false,"visibility":false,"paragraphFormat":{"alignment":"Left","firstLineIndent":0.0,"keepTogether":false,"keepWithNext":false,"leftIndent":0.0,"lineSpacing":12.0,"lineUnitAfter":0.0,"lineUnitBefore":0.0,"mirrorIndents":false,"outlineLevel":"OutlineLevelBodyText","rightIndent":0.0,"spaceAfter":0.0,"spaceBefore":0.0,"widowControl":true},"font":{"name":"DengXian","size":20.0,"bold":false,"italic":true,"color":"#D86DCB","underline":"None","subscript":false,"superscript":false,"strikeThrough":false,"doubleStrikeThrough":false,"highlightColor":null,"hidden":false},"tableStyle":{"allowBreakAcrossPage":true,"alignment":"Left","bottomCellMargin":0.0,"leftCellMargin":0.08,"rightCellMargin":0.08,"topCellMargin":0.0,"cellSpacing":0.0},"shading":{"backgroundPatternColor":"#60CAF3"}}]}';
-      const styles = context.document.importStylesFromJson(str);
+      let selection = context.document.getSelection();
+      selection.getRange(Word.RangeLocation.end).insertContentControl(Word.ContentControlType.dropDownList);
       await context.sync();
-      console.log("Styles imported from JSON:", styles);
+
+      console.log("Dropdown list content control inserted at the end of the selection.");
     });
-'Word.Paragraph:class':
+Word.Range#getReviewedText:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/get-paragraph-on-insertion-point.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-change-tracking.yaml
 
 
+    // Gets the reviewed text.
+
     await Word.run(async (context) => {
-      // The collection of paragraphs of the current selection returns the full paragraphs contained in it.
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      paragraph.load("text");
+      const range: Word.Range = context.document.getSelection();
+      const before = range.getReviewedText(Word.ChangeTrackingVersion.original);
+      const after = range.getReviewedText(Word.ChangeTrackingVersion.current);
 
       await context.sync();
-      console.log(paragraph.text);
+
+      console.log("Reviewed text (before):", before.value, "Reviewed text (after):", after.value);
     });
-'Word.Paragraph#getRange:member(1)':
+Word.Range#getTextRanges:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/get-paragraph-on-insertion-point.yaml
@@ -22015,1400 +27740,1804 @@
         console.log(sentencesToTheEndOfParagraph.items[i].text);
       }
     });
-'Word.Paragraph#insertAnnotations:member(1)':
+Word.Range#insertComment:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
 
 
-    // Adds annotations to the selected paragraph.
+    // Sets a comment on the selected content.
 
     await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const options: Word.CritiquePopupOptions = {
-        brandingTextResourceId: "PG.TabLabel",
-        subtitleResourceId: "PG.HelpCommand.TipTitle",
-        titleResourceId: "PG.HelpCommand.Label",
-        suggestions: ["suggestion 1", "suggestion 2", "suggestion 3"]
-      };
-      const critique1: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.red,
-        start: 1,
-        length: 3,
-        popupOptions: options
-      };
-      const critique2: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.green,
-        start: 6,
-        length: 1,
-        popupOptions: options
-      };
-      const critique3: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.blue,
-        start: 10,
-        length: 3,
-        popupOptions: options
-      };
-      const critique4: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.lavender,
-        start: 14,
-        length: 3,
-        popupOptions: options
-      };
-      const critique5: Word.Critique = {
-        colorScheme: Word.CritiqueColorScheme.berry,
-        start: 18,
-        length: 10,
-        popupOptions: options
-      };
-      const annotationSet: Word.AnnotationSet = {
-        critiques: [critique1, critique2, critique3, critique4, critique5]
-      };
-
-      const annotationIds = paragraph.insertAnnotations(annotationSet);
+      const text = (document.getElementById("comment-text") as HTMLInputElement).value;
+      const comment: Word.Comment = context.document.getSelection().insertComment(text);
 
+      // Load object to log in the console.
+      comment.load();
       await context.sync();
 
-      console.log("Annotations inserted:", annotationIds.value);
+      console.log("Comment inserted:", comment);
     });
-'Word.Paragraph#insertBreak:member(1)':
+Word.Range#insertContentControl:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-line-and-page-breaks.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/doc-assembly.yaml
 
 
-    Word.run(async (context) => {
-      context.document.body.paragraphs.getFirst().insertBreak(Word.BreakType.line, "After");
+    // Simulates creation of a template. First searches the document for
+    instances of the string "Contractor",
 
-      await context.sync();
-      console.log("success");
-    });
-'Word.Paragraph#insertContentControl:member(1)':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-content-controls.yaml
+    // then changes the format  of each search result,
 
+    // then wraps each search result within a content control,
 
-    // Traverses each paragraph of the document and wraps a content control on
-    each with either a even or odd tags.
+    // finally sets a tag and title property on each content control.
 
     await Word.run(async (context) => {
-      let paragraphs = context.document.body.paragraphs;
-      paragraphs.load("$none"); // Don't need any properties; just wrap each paragraph with a content control.
+        const results: Word.RangeCollection = context.document.body.search("Contractor");
+        results.load("font/bold");
 
-      await context.sync();
+        // Check to make sure these content controls haven't been added yet.
+        const customerContentControls: Word.ContentControlCollection = context.document.contentControls.getByTag("customer");
+        customerContentControls.load("text");
+        await context.sync();
 
-      for (let i = 0; i < paragraphs.items.length; i++) {
-        let contentControl = paragraphs.items[i].insertContentControl();
-        // For even, tag "even".
-        if (i % 2 === 0) {
-          contentControl.tag = "even";
-        } else {
-          contentControl.tag = "odd";
+      if (customerContentControls.items.length === 0) {
+        for (let i = 0; i < results.items.length; i++) { 
+            results.items[i].font.bold = true;
+            let cc: Word.ContentControl = results.items[i].insertContentControl();
+            cc.tag = "customer";  // This value is used in the next step of this sample.
+            cc.title = "Customer Name " + i;
         }
       }
-      console.log("Content controls inserted: " + paragraphs.items.length);
+        await context.sync();
+    });
+Word.Range#insertField:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
+
 
+    // Inserts a Date field before selection.
+
+    await Word.run(async (context) => {
+      const range: Word.Range = context.document.getSelection().getRange();
+
+      const field: Word.Field = range.insertField(Word.InsertLocation.before, Word.FieldType.date, '\\@ "M/d/yyyy h:mm am/pm"', true);
+
+      field.load("result,code");
       await context.sync();
+
+      if (field.isNullObject) {
+        console.log("There are no fields in this document.");
+      } else {
+        console.log("Code of the field: " + field.code, "Result of the field: " + JSON.stringify(field.result));
+      }
     });
-'Word.Paragraph#insertText:member(1)':
+Word.Range#insertFootnote:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-in-different-locations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
 
 
-    await Word.run(async (context) => {
-      // Replace the last paragraph.
-      const range: Word.Range = context.document.body.paragraphs.getLast().insertText("Just replaced the last paragraph!", "Replace");
-      range.font.highlightColor = "black";
-      range.font.color = "white";
+    // Sets a footnote on the selected content.
 
+    await Word.run(async (context) => {
+      const text = (document.getElementById("input-footnote") as HTMLInputElement).value;
+      const footnote: Word.NoteItem = context.document.getSelection().insertFootnote(text);
       await context.sync();
+
+      console.log("Inserted footnote.");
     });
-'Word.Paragraph#select:member(1)':
+Word.Range#insertInlinePictureFromBase64:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/scroll-to-range.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
 
     await Word.run(async (context) => {
-      // If select is called with no parameters, it selects the object.
-      context.document.body.paragraphs.getLast().select();
+      // Inserts a picture at the start of the first text box.
+      const firstShapeWithTextBox: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.textBox])
+        .getFirst();
+      firstShapeWithTextBox.load("type/body");
+      await context.sync();
 
+      const startRange: Word.Range = firstShapeWithTextBox.body.getRange(Word.RangeLocation.start);
+      const newPic: Word.InlinePicture = startRange.insertInlinePictureFromBase64(
+        getPictureBase64(),
+        Word.InsertLocation.start
+      );
+      newPic.load();
       await context.sync();
+
+      console.log("New inline picture properties:", newPic);
     });
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/scroll-to-range.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
 
-    await Word.run(async (context) => {
-      // Select can be at the start or end of a range; this by definition moves the insertion point without selecting the range.
-      context.document.body.paragraphs.getLast().select(Word.SelectionMode.end);
+    // Returns Base64-encoded image data for a sample picture.
 
-      await context.sync();
-    });
-'Word.Paragraph#set:member(1)':
+    const pictureBase64 =
+      "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";
+    return pictureBase64;
+Word.Range#insertGeometricShape:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/multiple-property-set.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-geometric-shapes.yaml
 
 
     await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.body.paragraphs.getFirst();
-      paragraph.set({
-        leftIndent: 30,
-        font: {
-          bold: true,
-          color: "red"
-        }
-      });
-
+      // Inserts a moon geometric shape at the beginning of the selection.
+      const selection: Word.Range = context.document.getSelection();
+      const shapeOptions: Word.InsertShapeOptions = {
+        height: 120,
+        width: 120,
+        left: 120,
+      };
+      selection.insertGeometricShape(Word.GeometricShapeType.moon, shapeOptions);
       await context.sync();
+
+      console.log("Inserted a moon.");
     });
+Word.Range#insertTextBox:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/multiple-property-set.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
 
     await Word.run(async (context) => {
-      const firstParagraph: Word.Paragraph = context.document.body.paragraphs.getFirst();
-      const secondParagraph: Word.Paragraph = firstParagraph.getNext();
-      firstParagraph.load("text, font/color, font/bold, leftIndent");
+      // Inserts a text box at the beginning of the selection.
+      const range: Word.Range = context.document.getSelection();
+      const insertShapeOptions: Word.InsertShapeOptions = {
+        top: 0,
+        left: 0,
+        height: 100,
+        width: 100
+      };
 
+      const newTextBox: Word.Shape = range.insertTextBox("placeholder text", insertShapeOptions);
       await context.sync();
 
-      secondParagraph.set(firstParagraph);
-
-      await context.sync();
+      console.log("Inserted a text box at the beginning of the current selection.");
     });
-'Word.Paragraph#split:member(1)':
+Word.Range#footnotes:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/split-words-of-first-paragraph.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
 
 
-    await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.body.paragraphs.getFirst();
-      const words = paragraph.split([" "], true /* trimDelimiters*/, true /* trimSpaces */);
-      words.load("text");
+    // Gets the footnotes in the selected document range.
 
+    await Word.run(async (context) => {
+      const footnotes: Word.NoteItemCollection = context.document.getSelection().footnotes;
+      footnotes.load("length");
       await context.sync();
 
-      for (let i = 0; i < words.items.length; i++) {
-        if (i >= 1) {
-          words.items[i - 1].font.highlightColor = "#FFFFFF";
-        }
-        words.items[i].font.highlightColor = "#FFFF00";
-
-        await context.sync();
-        await pause(200);
-      }
+      console.log("Number of footnotes in the selected range: " + footnotes.items.length);
     });
-'Word.Paragraph#startNewList:member(1)':
+Word.Range#parentContentControl:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/insert-list.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
 
 
-    // This example starts a new list with the second paragraph.
+    // Toggles the isChecked property of the first checkbox content control
+    found in the selection.
 
     await Word.run(async (context) => {
-      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
-      paragraphs.load("$none");
-
-      await context.sync();
-
-      // Start new list using the second paragraph.
-      const list: Word.List = paragraphs.items[1].startNewList();
-      list.load("$none");
+      const selectedRange: Word.Range = context.document.getSelection();
+      let selectedContentControl = selectedRange
+        .getContentControls({
+          types: [Word.ContentControlType.checkBox]
+        })
+        .getFirstOrNullObject();
+      selectedContentControl.load("id,checkboxContentControl/isChecked");
 
       await context.sync();
 
-      // To add new items to the list, use Start or End on the insertLocation parameter.
-      list.insertParagraph("New list item at the start of the list", "Start");
-      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
-
-      // Set up list level for the list item.
-      paragraph.listItem.level = 4;
+      if (selectedContentControl.isNullObject) {
+        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
+        parentContentControl.load("id,type,checkboxContentControl/isChecked");
+        await context.sync();
 
-      // To add paragraphs outside the list, use Before or After.
-      list.insertParagraph("New paragraph goes after (not part of the list)", "After");
+        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.checkBox) {
+          console.warn("No checkbox content control is currently selected.");
+          return;
+        } else {
+          selectedContentControl = parentContentControl;
+        }
+      }
 
+      const isCheckedBefore = selectedContentControl.checkboxContentControl.isChecked;
+      console.log("isChecked state before:", `id: ${selectedContentControl.id} ... isChecked: ${isCheckedBefore}`);
+      selectedContentControl.checkboxContentControl.isChecked = !isCheckedBefore;
+      selectedContentControl.load("id,checkboxContentControl/isChecked");
       await context.sync();
+
+      console.log(
+        "isChecked state after:",
+        `id: ${selectedContentControl.id} ... isChecked: ${selectedContentControl.checkboxContentControl.isChecked}`
+      );
     });
-'Word.Paragraph#alignment:member':
+Word.Range#styleBuiltIn:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/paragraph-properties.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/doc-assembly.yaml
 
 
     await Word.run(async (context) => {
-      // Center last paragraph alignment.
-      context.document.body.paragraphs.getLast().alignment = "Centered";
+        const header: Word.Range = context.document.body.insertText("This is a sample Heading 1 Title!!\n",
+            "Start" /*this means at the beginning of the body */);
+        header.styleBuiltIn = Word.BuiltInStyleName.heading1;
 
-      await context.sync();
+        await context.sync();
     });
-'Word.Paragraph#leftIndent:member':
+Word.RangeCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/paragraph-properties.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/search.yaml
 
 
-    await Word.run(async (context) => {
-      // Indent the first paragraph.
-      context.document.body.paragraphs.getFirst().leftIndent = 75; //units = points
+    // Does a basic text search and highlights matches in the document.
 
-      return context.sync();
-    });
-'Word.Paragraph#lineSpacing:member':
-  - >-
-    // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/paragraph-properties.yaml
+    await Word.run(async (context) => {
+      const results : Word.RangeCollection = context.document.body.search("extend");
+      results.load("length");
 
+      await context.sync();
 
-    await Word.run(async (context) => {
-      // Adjust line spacing.
-      context.document.body.paragraphs.getFirst().lineSpacing = 20;
+      // Let's traverse the search results and highlight matches.
+      for (let i = 0; i < results.items.length; i++) {
+        results.items[i].font.highlightColor = "yellow";
+      }
 
       await context.sync();
     });
-'Word.Paragraph#lineUnitAfter:member':
+Word.RangeLocation:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/paragraph-properties.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/get-paragraph-on-insertion-point.yaml
 
 
     await Word.run(async (context) => {
-      // Set the space (in line units) after the first paragraph.
-      context.document.body.paragraphs.getFirst().lineUnitAfter = 1;
+      // Get the complete sentence (as range) associated with the insertion point.
+      const sentences: Word.RangeCollection = context.document
+        .getSelection()
+        .getTextRanges(["."] /* Using the "." as delimiter */, false /*means without trimming spaces*/);
+      sentences.load("$none");
+      await context.sync();
 
+      // Expand the range to the end of the paragraph to get all the complete sentences.
+      const sentencesToTheEndOfParagraph: Word.RangeCollection = sentences.items[0]
+        .getRange()
+        .expandTo(
+          context.document
+            .getSelection()
+            .paragraphs.getFirst()
+            .getRange(Word.RangeLocation.end)
+        )
+        .getTextRanges(["."], false /* Don't trim spaces*/);
+      sentencesToTheEndOfParagraph.load("text");
       await context.sync();
+
+      for (let i = 0; i < sentencesToTheEndOfParagraph.items.length; i++) {
+        console.log(sentencesToTheEndOfParagraph.items[i].text);
+      }
     });
-'Word.Paragraph#lineUnitBefore:member':
+Word.RelativeHorizontalPosition:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/paragraph-properties.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
 
     await Word.run(async (context) => {
-      // Set the space (in line units) before the first paragraph.
-      context.document.body.paragraphs.getFirst().lineUnitBefore = 1;
-
+      // Changes the position of the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
       await context.sync();
+
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
+        return;
+      }
+
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log("About to change the position of the first shape group found in document body:", shapeGroup.shapes);
+      firstShapeGroup.relativeVerticalPosition = Word.RelativeVerticalPosition.insideMargin;
+      firstShapeGroup.relativeHorizontalPosition = Word.RelativeHorizontalPosition.margin;
+
+      console.log("Changed the position of the first shape group.");
     });
-'Word.Paragraph#spaceAfter:member':
+Word.RelativeSize:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/paragraph-properties.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
 
     await Word.run(async (context) => {
-      // Set the space (in points) after the first paragraph.
-      context.document.body.paragraphs.getFirst().spaceAfter = 20;
-
+      // Changes the relative size of the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
       await context.sync();
+
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
+        return;
+      }
+
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log(
+        "About to change the relative size of the first shape group found in the document body:",
+        shapeGroup.shapes,
+      );
+      firstShapeGroup.relativeHorizontalSize = Word.RelativeSize.insideMargin;
+      firstShapeGroup.relativeVerticalSize = Word.RelativeSize.bottomMargin;
+      firstShapeGroup.heightRelative = 50;
+
+      console.log("Changed the relative size of the first shape group.");
     });
-'Word.Paragraph#style:member':
+Word.RelativeVerticalPosition:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
-    // Applies the specified style to a paragraph.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name-to-use").val() as string;
-      if (styleName == "") {
-        console.warn("Enter a style name to apply.");
+      // Changes the position of the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
+      await context.sync();
+
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
         return;
       }
 
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load();
-      await context.sync();
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log("About to change the position of the first shape group found in document body:", shapeGroup.shapes);
+      firstShapeGroup.relativeVerticalPosition = Word.RelativeVerticalPosition.insideMargin;
+      firstShapeGroup.relativeHorizontalPosition = Word.RelativeHorizontalPosition.margin;
 
-      if (style.isNullObject) {
-        console.warn(`There's no existing style with the name '${styleName}'.`);
-      } else if (style.type != Word.StyleType.paragraph) {
-        console.log(`The '${styleName}' style isn't a paragraph style.`);
-      } else {
-        const body: Word.Body = context.document.body;
-        body.clear();
-        body.insertParagraph(
-          "Do you want to create a solution that extends the functionality of Word? You can use the Office Add-ins platform to extend Word clients running on the web, on a Windows desktop, or on a Mac.",
-          "Start"
-        );
-        const paragraph: Word.Paragraph = body.paragraphs.getFirst();
-        paragraph.style = style.nameLocal;
-        console.log(`'${styleName}' style applied to first paragraph.`);
-      }
+      console.log("Changed the position of the first shape group.");
     });
-'Word.Paragraph#styleBuiltIn:member':
+Word.SaveBehavior:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/doc-assembly.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/save-close.yaml
+
+
+    // If the document hasn't been saved before, prompts
 
+    // user with options for if or how they want to save.
 
     await Word.run(async (context) => {
-        const paragraph: Word.Paragraph = context.document.body.insertParagraph("Timeline", "End");
-        paragraph.styleBuiltIn = "Heading2";
-        const paragraph2: Word.Paragraph = context.document.body.insertParagraph("The Services shall commence on July 31, 2015, and shall continue through July 29, 2015.", "End");
-        paragraph2.styleBuiltIn = "Normal";
-        const paragraph3: Word.Paragraph = context.document.body.insertParagraph("Project Costs by Phase", "End");
-        paragraph3.styleBuiltIn = "Heading2";
-        // Note a content control with the title of "ProjectCosts" is added. Content will be replaced later.
-        const paragraph4: Word.Paragraph = context.document.body.insertParagraph("<Add Project Costs Here>", "End");
-        paragraph4.styleBuiltIn = "Normal";
-        paragraph4.font.highlightColor = "#FFFF00";
-        const contentControl: Word.ContentControl = paragraph4.insertContentControl();
-        contentControl.title = "ProjectCosts";
-        const paragraph5: Word.Paragraph = context.document.body.insertParagraph("Project Team", "End");
-        paragraph5.styleBuiltIn = "Heading2";
-        paragraph5.font.highlightColor = "#FFFFFF";
-        const paragraph6: Word.Paragraph = context.document.body.insertParagraph("Terms of Work", "End");
-        paragraph6.styleBuiltIn = "Heading1";
-        const paragraph7: Word.Paragraph = context.document.body.insertParagraph("Contractor shall provide the Services and Deliverable(s) as follows:", "End");
-        paragraph7.styleBuiltIn = "Normal";
-        const paragraph8: Word.Paragraph = context.document.body.insertParagraph("Out-of-Pocket Expenses / Invoice Procedures", "End");
-        paragraph8.styleBuiltIn = "Heading2";
-        const paragraph9 : Word.Paragraph= context.document.body.insertParagraph("Client will be invoiced monthly for the consulting services and T&L expenses. Standard Contractor invoicing is assumed to be acceptable. Invoices are due upon receipt. client will be invoiced all costs associated with out-of-pocket expenses (including, without limitation, costs and expenses associated with meals, lodging, local transportation and any other applicable business expenses) listed on the invoice as a separate line item. Reimbursement for out-of-pocket expenses in connection with performance of this SOW, when authorized and up to the limits set forth in this SOW, shall be in accordance with Client's then-current published policies governing travel and associated business expenses, which information shall be provided by the Client Project Manager.", "End");
-        paragraph9.styleBuiltIn = "Normal";
-        // Insert a page break at the end of the document.
-        context.document.body.insertBreak("Page", "End");
+      context.document.save(Word.SaveBehavior.prompt);
+      await context.sync();
+    });
+Word.SaveConfiguration:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/close-document-window.yaml
 
-        await context.sync();
+
+    await Word.run(async (context) => {
+      // Closes the document window, prompting to save if this is a new document.
+      const window: Word.Window = context.document.activeWindow;
+      const closeOptions: Word.WindowCloseOptions = { saveChanges: Word.SaveConfiguration.promptToSaveChanges };
+      console.log("About to close the document window...");
+      window.close(closeOptions);
     });
-'Word.Paragraph#text:member':
+Word.Section#getFooter:member(2):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/get-paragraph-on-insertion-point.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-header-and-footer.yaml
 
 
     await Word.run(async (context) => {
-      // The collection of paragraphs of the current selection returns the full paragraphs contained in it.
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      paragraph.load("text");
+      context.document.sections
+        .getFirst()
+        .getFooter("Primary")
+        .insertParagraph("This is a primary footer.", "End");
 
       await context.sync();
-      console.log(paragraph.text);
     });
-'Word.Paragraph#uniqueLocalId:member':
+Word.Section#getHeader:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-header-and-footer.yaml
 
-    // Registers event handlers.
 
     await Word.run(async (context) => {
-      eventContexts[0] = context.document.onParagraphAdded.add(paragraphChanged);
-      eventContexts[1] = context.document.onParagraphChanged.add(paragraphChanged);
-
-      eventContexts[2] = context.document.onAnnotationClicked.add(onClickedHandler);
-      eventContexts[3] = context.document.onAnnotationHovered.add(onHoveredHandler);
-      eventContexts[4] = context.document.onAnnotationInserted.add(onInsertedHandler);
-      eventContexts[5] = context.document.onAnnotationRemoved.add(onRemovedHandler);
-      eventContexts[6] = context.document.onAnnotationPopupAction.add(onPopupActionHandler);
+      context.document.sections
+        .getFirst()
+        .getHeader(Word.HeaderFooterType.primary)
+        .insertParagraph("This is a primary header.", "End");
 
       await context.sync();
-
-      console.log("Event handlers registered.");
     });
+Word.Section:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-section-breaks.yaml
 
 
-    async function paragraphChanged(args: Word.ParagraphChangedEventArgs) {
-      await Word.run(async (context) => {
-        const results = [];
-        for (let id of args.uniqueLocalIds) {
-          let para = context.document.getParagraphByUniqueLocalId(id);
-          para.load("uniqueLocalId");
+    // Inserts a section break on the next page.
 
-          results.push({ para: para, text: para.getText() });
-        }
+    await Word.run(async (context) => {
+      const body: Word.Body = context.document.body;
+      body.insertBreak(Word.BreakType.sectionNext, Word.InsertLocation.end);
 
-        await context.sync();
+      await context.sync();
 
-        for (let result of results) {
-          console.log(`${args.type}: ID ${result.para.uniqueLocalId}:-`, result.text.value);
-        }
-      });
-    }
-'Word.ParagraphAddedEventArgs:interface':
+      console.log("Inserted section break on next page.");
+    });
+Word.SectionCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onadded-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-section-breaks.yaml
 
 
-    // Registers the onParagraphAdded event handler on the document.
+    // Inserts a section break on the next even page.
 
     await Word.run(async (context) => {
-      eventContext = context.document.onParagraphAdded.add(paragraphAdded);
+      const body: Word.Body = context.document.body;
+      body.insertBreak(Word.BreakType.sectionEven, Word.InsertLocation.end);
+
       await context.sync();
 
-      console.log("Added event handler for when paragraphs are added.");
+      console.log("Inserted section break on next even page.");
     });
+Word.SelectionMode:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onadded-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/scroll-to-range.yaml
 
 
-    async function paragraphAdded(event: Word.ParagraphAddedEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.type} event detected. IDs of paragraphs that were added:`, event.uniqueLocalIds);
-      });
-    }
-'Word.ParagraphChangedEventArgs:interface':
+    await Word.run(async (context) => {
+      // Select can be at the start or end of a range; this by definition moves the insertion point without selecting the range.
+      context.document.body.paragraphs.getLast().select(Word.SelectionMode.end);
+
+      await context.sync();
+    });
+Word.Setting:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onchanged-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-settings.yaml
 
 
-    // Registers the onParagraphChanged event handler on the document.
+    // Adds a new custom setting or
+
+    // edits the value of an existing one.
 
     await Word.run(async (context) => {
-      eventContext = context.document.onParagraphChanged.add(paragraphChanged);
+      const key = (document.getElementById("key") as HTMLInputElement).value;
+      if (key == "") {
+        console.error("Key shouldn't be empty.");
+        return;
+      }
+
+      const value = (document.getElementById("value") as HTMLInputElement).value;
+      const settings: Word.SettingCollection = context.document.settings;
+      const setting: Word.Setting = settings.add(key, value);
+      setting.load();
       await context.sync();
 
-      console.log("Added event handler for when content is changed in paragraphs.");
+      console.log("Setting added or edited:", setting);
     });
+Word.Setting#key:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/onchanged-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-settings.yaml
 
 
-    async function paragraphChanged(event: Word.ParagraphChangedEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.type} event detected. IDs of paragraphs where content was changed:`, event.uniqueLocalIds);
-      });
-    }
-'Word.ParagraphCollection:class':
+    // Adds a new custom setting or
+
+    // edits the value of an existing one.
+
+    await Word.run(async (context) => {
+      const key = (document.getElementById("key") as HTMLInputElement).value;
+      if (key == "") {
+        console.error("Key shouldn't be empty.");
+        return;
+      }
+
+      const value = (document.getElementById("value") as HTMLInputElement).value;
+      const settings: Word.SettingCollection = context.document.settings;
+      const setting: Word.Setting = settings.add(key, value);
+      setting.load();
+      await context.sync();
+
+      console.log("Setting added or edited:", setting);
+    });
+Word.Setting#value:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-settings.yaml
 
 
-    // Inserts an image anchored to the last paragraph.
+    // Adds a new custom setting or
+
+    // edits the value of an existing one.
 
     await Word.run(async (context) => {
-      context.document.body.paragraphs
-        .getLast()
-        .insertParagraph("", "After")
-        .insertInlinePictureFromBase64(base64Image, "End");
+      const key = (document.getElementById("key") as HTMLInputElement).value;
+      if (key == "") {
+        console.error("Key shouldn't be empty.");
+        return;
+      }
 
+      const value = (document.getElementById("value") as HTMLInputElement).value;
+      const settings: Word.SettingCollection = context.document.settings;
+      const setting: Word.Setting = settings.add(key, value);
+      setting.load();
       await context.sync();
+
+      console.log("Setting added or edited:", setting);
     });
-'Word.ParagraphCollection#getFirst:member(1)':
+Word.SettingCollection:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-annotations.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-settings.yaml
 
 
-    // Gets annotations found in the selected paragraph.
+    // Deletes all custom settings this add-in had set on this document.
 
     await Word.run(async (context) => {
-      const paragraph: Word.Paragraph = context.document.getSelection().paragraphs.getFirst();
-      const annotations: Word.AnnotationCollection = paragraph.getAnnotations();
-      annotations.load("id,state,critiqueAnnotation");
-
+      const settings: Word.SettingCollection = context.document.settings;
+      settings.deleteAll();
       await context.sync();
+      console.log("All settings deleted.");
+    });
+Word.SettingCollection#add:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-settings.yaml
 
-      console.log("Annotations found:");
 
-      for (let i = 0; i < annotations.items.length; i++) {
-        const annotation: Word.Annotation = annotations.items[i];
+    // Adds a new custom setting or
 
-        console.log(`ID ${annotation.id} - state '${annotation.state}':`, annotation.critiqueAnnotation.critique);
+    // edits the value of an existing one.
+
+    await Word.run(async (context) => {
+      const key = (document.getElementById("key") as HTMLInputElement).value;
+      if (key == "") {
+        console.error("Key shouldn't be empty.");
+        return;
       }
+
+      const value = (document.getElementById("value") as HTMLInputElement).value;
+      const settings: Word.SettingCollection = context.document.settings;
+      const setting: Word.Setting = settings.add(key, value);
+      setting.load();
+      await context.sync();
+
+      console.log("Setting added or edited:", setting);
     });
-'Word.ParagraphCollection#getLast:member(1)':
+Word.SettingCollection#items:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-settings.yaml
 
 
-    // Inserts an image anchored to the last paragraph.
+    // Gets all custom settings this add-in set on this document.
 
     await Word.run(async (context) => {
-      context.document.body.paragraphs
-        .getLast()
-        .insertParagraph("", "After")
-        .insertInlinePictureFromBase64(base64Image, "End");
-
+      const settings: Word.SettingCollection = context.document.settings;
+      settings.load("items");
       await context.sync();
+
+      if (settings.items.length == 0) {
+        console.log("There are no settings.");
+      } else {
+        console.log("All settings:");
+        for (let i = 0; i < settings.items.length; i++) {
+          console.log(settings.items[i]);
+        }
+      }
     });
-'Word.ParagraphCollection#items:member':
+Word.Shading:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/insert-list.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
 
 
-    // This example starts a new list with the second paragraph.
+    // Updates shading properties (e.g., texture, pattern colors) of the
+    specified style.
 
     await Word.run(async (context) => {
-      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
-      paragraphs.load("$none");
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
+      if (styleName == "") {
+        console.warn("Enter a style name to update shading properties.");
+        return;
+      }
 
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
+      style.load();
       await context.sync();
 
-      // Start new list using the second paragraph.
-      const list: Word.List = paragraphs.items[1].startNewList();
-      list.load("$none");
+      if (style.isNullObject) {
+        console.warn(`There's no existing style with the name '${styleName}'.`);
+      } else {
+        const shading: Word.Shading = style.shading;
+        shading.load();
+        await context.sync();
 
-      await context.sync();
+        shading.backgroundPatternColor = "blue";
+        shading.foregroundPatternColor = "yellow";
+        shading.texture = Word.ShadingTextureType.darkTrellis;
 
-      // To add new items to the list, use Start or End on the insertLocation parameter.
-      list.insertParagraph("New list item at the start of the list", "Start");
-      const paragraph: Word.Paragraph = list.insertParagraph("New list item at the end of the list (set to list level 5)", "End");
+        console.log("Updated shading.");
+      }
+    });
+Word.ShadingTextureType:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
 
-      // Set up list level for the list item.
-      paragraph.listItem.level = 4;
 
-      // To add paragraphs outside the list, use Before or After.
-      list.insertParagraph("New paragraph goes after (not part of the list)", "After");
+    // Updates shading properties (e.g., texture, pattern colors) of the
+    specified style.
+
+    await Word.run(async (context) => {
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
+      if (styleName == "") {
+        console.warn("Enter a style name to update shading properties.");
+        return;
+      }
+
+      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
+      style.load();
+      await context.sync();
+
+      if (style.isNullObject) {
+        console.warn(`There's no existing style with the name '${styleName}'.`);
+      } else {
+        const shading: Word.Shading = style.shading;
+        shading.load();
+        await context.sync();
+
+        shading.backgroundPatternColor = "blue";
+        shading.foregroundPatternColor = "yellow";
+        shading.texture = Word.ShadingTextureType.darkTrellis;
 
-      await context.sync();
+        console.log("Updated shading.");
+      }
     });
-'Word.ParagraphDeletedEventArgs:interface':
+Word.Shape:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/ondeleted-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
 
-    // Registers the onParagraphDeleted event handler on the document.
-
     await Word.run(async (context) => {
-      eventContext = context.document.onParagraphDeleted.add(paragraphDeleted);
+      // Sets the properties of the first text box.
+      const firstShapeWithTextBox: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.textBox])
+        .getFirst();
+      firstShapeWithTextBox.top = 115;
+      firstShapeWithTextBox.left = 0;
+      firstShapeWithTextBox.width = 50;
+      firstShapeWithTextBox.height = 50;
       await context.sync();
 
-      console.log("Added event handlers for when paragraphs are deleted.");
+      console.log("The first text box's properties were updated:", firstShapeWithTextBox);
     });
+Word.Shape#delete:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/ondeleted-event.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
 
-    async function paragraphDeleted(event: Word.ParagraphDeletedEventArgs) {
-      await Word.run(async (context) => {
-        console.log(`${event.type} event detected. IDs of paragraphs that were deleted:`, event.uniqueLocalIds);
-      });
-    }
-'Word.ParagraphFormat:class':
+    await Word.run(async (context) => {
+      // Deletes the first text box.
+      context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirst().delete();
+      await context.sync();
+
+      console.log("The first text box in document was deleted.");
+    });
+Word.Shape#group:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
-    // Sets certain aspects of the specified style's paragraph format e.g., the
-    left indent size and the alignment.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name").val() as string;
-      if (styleName == "") {
-        console.warn("Enter a style name to update its paragraph format.");
+      // Groups the shapes (including text boxes and pictures) found in the document body.
+      const shapes: Word.ShapeCollection = context.document.body.shapes.getByTypes([
+        Word.ShapeType.geometricShape,
+        Word.ShapeType.textBox,
+        Word.ShapeType.picture,
+      ]);
+      shapes.load("items");
+      await context.sync();
+
+      const numShapes = shapes.items.length;
+      if (numShapes === 0) {
+        console.log("No shapes found in the document body.");
         return;
       }
 
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load();
+      console.log(`Number of shapes to group: ${numShapes}`);
+
+      const groupedShape: Word.Shape = shapes.group();
+      groupedShape.load("shapeGroup/shapes");
       await context.sync();
 
-      if (style.isNullObject) {
-        console.warn(`There's no existing style with the name '${styleName}'.`);
-      } else {
-        style.paragraphFormat.leftIndent = 30;
-        style.paragraphFormat.alignment = Word.Alignment.centered;
-        console.log(`Successfully the paragraph format of the '${styleName}' style.`);
-      }
+      const shapeGroup: Word.ShapeGroup = groupedShape.shapeGroup;
+      console.log("Shapes grouped:", shapeGroup.shapes);
+      groupedShape.select();
     });
-'Word.ParagraphFormat#alignment:member':
+Word.Shape#moveHorizontally:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
-    // Sets certain aspects of the specified style's paragraph format e.g., the
-    left indent size and the alignment.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name").val() as string;
-      if (styleName == "") {
-        console.warn("Enter a style name to update its paragraph format.");
+      // Moves the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
+      await context.sync();
+
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
         return;
       }
 
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load();
-      await context.sync();
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log("About to move the first shape group found in the document body:", shapeGroup.shapes);
+      firstShapeGroup.moveHorizontally(-10);
+      firstShapeGroup.moveVertically(50);
 
-      if (style.isNullObject) {
-        console.warn(`There's no existing style with the name '${styleName}'.`);
-      } else {
-        style.paragraphFormat.leftIndent = 30;
-        style.paragraphFormat.alignment = Word.Alignment.centered;
-        console.log(`Successfully the paragraph format of the '${styleName}' style.`);
-      }
+      console.log("Moved the first shape group.");
     });
-'Word.ParagraphFormat#leftIndent:member':
+Word.Shape#moveVertically:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
 
-    // Sets certain aspects of the specified style's paragraph format e.g., the
-    left indent size and the alignment.
-
     await Word.run(async (context) => {
-      const styleName = $("#style-name").val() as string;
-      if (styleName == "") {
-        console.warn("Enter a style name to update its paragraph format.");
+      // Moves the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
+      await context.sync();
+
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
         return;
       }
 
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load();
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log("About to move the first shape group found in the document body:", shapeGroup.shapes);
+      firstShapeGroup.moveHorizontally(-10);
+      firstShapeGroup.moveVertically(50);
+
+      console.log("Moved the first shape group.");
+    });
+Word.Shape#scaleHeight:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
+
+
+    await Word.run(async (context) => {
+      // Scales the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
       await context.sync();
 
-      if (style.isNullObject) {
-        console.warn(`There's no existing style with the name '${styleName}'.`);
-      } else {
-        style.paragraphFormat.leftIndent = 30;
-        style.paragraphFormat.alignment = Word.Alignment.centered;
-        console.log(`Successfully the paragraph format of the '${styleName}' style.`);
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
+        return;
       }
+
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log("About to scale the first shape group found in the document body:", shapeGroup.shapes);
+      firstShapeGroup.scaleHeight(0.75, Word.ShapeScaleType.currentSize);
+      firstShapeGroup.scaleWidth(0.5, Word.ShapeScaleType.currentSize, Word.ShapeScaleFrom.scaleFromBottomRight);
+
+      console.log("Scaled the first shape group.");
     });
-'Word.Range:class':
+Word.Shape#scaleWidth:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
 
-    // Gets the range of the first comment in the selected content.
-
     await Word.run(async (context) => {
-      const comment: Word.Comment = context.document.getSelection().getComments().getFirstOrNullObject();
-      comment.load("contentRange");
-      const range: Word.Range = comment.getRange();
-      range.load("text");
+      // Scales the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
       await context.sync();
 
-      if (comment.isNullObject) {
-        console.warn("No comments in the selection, so no range to get.");
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
         return;
       }
 
-      console.log(`Comment location: ${range.text}`);
-      const contentRange: Word.CommentContentRange = comment.contentRange;
-      console.log("Comment content range:", contentRange);
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log("About to scale the first shape group found in the document body:", shapeGroup.shapes);
+      firstShapeGroup.scaleHeight(0.75, Word.ShapeScaleType.currentSize);
+      firstShapeGroup.scaleWidth(0.5, Word.ShapeScaleType.currentSize, Word.ShapeScaleFrom.scaleFromBottomRight);
+
+      console.log("Scaled the first shape group.");
     });
-'Word.Range#compareLocationWith:member(1)':
+Word.Shape#select:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/compare-location.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
 
-    // Compares the location of one paragraph in relation to another paragraph.
-
     await Word.run(async (context) => {
-      const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
-      paragraphs.load("items");
-
+      // Groups the shapes (including text boxes and pictures) found in the document body.
+      const shapes: Word.ShapeCollection = context.document.body.shapes.getByTypes([
+        Word.ShapeType.geometricShape,
+        Word.ShapeType.textBox,
+        Word.ShapeType.picture,
+      ]);
+      shapes.load("items");
       await context.sync();
 
-      const firstParagraphAsRange: Word.Range = paragraphs.items[0].getRange();
-      const secondParagraphAsRange: Word.Range = paragraphs.items[1].getRange();
+      const numShapes = shapes.items.length;
+      if (numShapes === 0) {
+        console.log("No shapes found in the document body.");
+        return;
+      }
 
-      const comparedLocation = firstParagraphAsRange.compareLocationWith(secondParagraphAsRange);
+      console.log(`Number of shapes to group: ${numShapes}`);
 
+      const groupedShape: Word.Shape = shapes.group();
+      groupedShape.load("shapeGroup/shapes");
       await context.sync();
 
-      const locationValue: Word.LocationRelation = comparedLocation.value;
-      console.log(`Location of the first paragraph in relation to the second paragraph: ${locationValue}`);
+      const shapeGroup: Word.ShapeGroup = groupedShape.shapeGroup;
+      console.log("Shapes grouped:", shapeGroup.shapes);
+      groupedShape.select();
     });
-'Word.Range#expandTo:member(1)':
+Word.Shape#body:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/get-paragraph-on-insertion-point.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
 
     await Word.run(async (context) => {
-      // Get the complete sentence (as range) associated with the insertion point.
-      const sentences: Word.RangeCollection = context.document
-        .getSelection()
-        .getTextRanges(["."] /* Using the "." as delimiter */, false /*means without trimming spaces*/);
-      sentences.load("$none");
+      // Inserts a content control into the first paragraph in the first text box.
+      const firstShapeWithTextBox: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.textBox])
+        .getFirst();
+      firstShapeWithTextBox.load("type/body");
       await context.sync();
 
-      // Expand the range to the end of the paragraph to get all the complete sentences.
-      const sentencesToTheEndOfParagraph: Word.RangeCollection = sentences.items[0]
-        .getRange()
-        .expandTo(
-          context.document
-            .getSelection()
-            .paragraphs.getFirst()
-            .getRange(Word.RangeLocation.end)
-        )
-        .getTextRanges(["."], false /* Don't trim spaces*/);
-      sentencesToTheEndOfParagraph.load("text");
+      const firstParagraphInTextBox: Word.Paragraph = firstShapeWithTextBox.body.paragraphs.getFirst();
+      const newControl: Word.ContentControl = firstParagraphInTextBox.insertContentControl();
+      newControl.load();
       await context.sync();
 
-      for (let i = 0; i < sentencesToTheEndOfParagraph.items.length; i++) {
-        console.log(sentencesToTheEndOfParagraph.items[i].text);
-      }
+      console.log("New content control properties:", newControl);
     });
-'Word.Range#getComments:member(1)':
+Word.Shape#canvas:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-canvases.yaml
 
-    // Gets the comments in the selected content.
 
     await Word.run(async (context) => {
-      const comments: Word.CommentCollection = context.document.getSelection().getComments();
+      // Inserts a canvas in the document.
+      const canvasShape: Word.Shape = context.document.getSelection().insertCanvas();
+      canvasShape.load();
+      await context.sync();
 
-      // Load objects to log in the console.
-      comments.load();
+      canvasShape.select();
+      console.log("Inserted canvas:", canvasShape);
+
+      const canvas: Word.Canvas = canvasShape.canvas;
+      canvas.load("shape,shapes");
       await context.sync();
 
-      console.log("Comments:", comments);
+      console.log("Canvas object:", canvas);
     });
-'Word.Range#getContentControls:member(1)':
+Word.Shape#fill:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-geometric-shapes.yaml
 
 
-    // Deletes the first checkbox content control found in the selection.
-
     await Word.run(async (context) => {
-      const selectedRange: Word.Range = context.document.getSelection();
-      let selectedContentControl = selectedRange
-        .getContentControls({
-          types: [Word.ContentControlType.checkBox]
-        })
+      // Gets the color fill properties of the first moon found in the document body.
+      const moon: Word.Shape = context.document.body.shapes
+        .getByGeometricTypes([Word.GeometricShapeType.moon])
         .getFirstOrNullObject();
-      selectedContentControl.load("id");
-
+      moon.load("fill");
       await context.sync();
 
-      if (selectedContentControl.isNullObject) {
-        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type");
-        await context.sync();
-
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.checkBox) {
-          console.warn("No checkbox content control is currently selected.");
-          return;
-        } else {
-          selectedContentControl = parentContentControl;
-        }
+      if (moon.isNullObject) {
+        console.log("No moons found in the document body.");
+        return;
       }
 
-      console.log(`About to delete checkbox content control with id: ${selectedContentControl.id}`);
-      selectedContentControl.delete(false);
-      await context.sync();
+      const moonFill: Word.ShapeFill = moon.fill;
+      const moonFillType = moonFill.type as Word.ShapeFillType;
 
-      console.log("Deleted checkbox content control.");
+      console.log("Color fill properties of the first moon found in the document body:");
+      console.log(`\tForeground color: ${moonFill.foregroundColor}`);
+      console.log(`\tBackground color: ${moonFill.backgroundColor}`);
+      console.log(`\tTransparency: ${moonFill.transparency}`);
+      console.log(`\tFill type: ${moonFillType}`);
     });
-'Word.Range#getRange:member(1)':
+Word.Shape#geometricShapeType:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-geometric-shapes.yaml
 
 
-    // Places a dropdown list content control at the end of the selection.
+    await Word.run(async (context) => {
+      // Gets the first geometric shape found in the document body.
+      const geometricShape: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.geometricShape])
+        .getFirstOrNullObject();
+      geometricShape.load();
+      await context.sync();
+
+      if (geometricShape.isNullObject) {
+        console.log("No geometric shapes found in the document body.");
+        return;
+      }
+
+      console.log(
+        `First geometric shape found in the document body is of type ${geometricShape.geometricShapeType}:`,
+        geometricShape,
+      );
+    });
+Word.Shape#heightRelative:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
+
 
     await Word.run(async (context) => {
-      let selection = context.document.getSelection();
-      selection.getRange(Word.RangeLocation.end).insertContentControl(Word.ContentControlType.dropDownList);
+      // Changes the relative size of the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
       await context.sync();
 
-      console.log("Dropdown list content control inserted at the end of the selection.");
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
+        return;
+      }
+
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log(
+        "About to change the relative size of the first shape group found in the document body:",
+        shapeGroup.shapes,
+      );
+      firstShapeGroup.relativeHorizontalSize = Word.RelativeSize.insideMargin;
+      firstShapeGroup.relativeVerticalSize = Word.RelativeSize.bottomMargin;
+      firstShapeGroup.heightRelative = 50;
+
+      console.log("Changed the relative size of the first shape group.");
     });
-'Word.Range#getReviewedText:member(1)':
+Word.Shape#relativeHorizontalPosition:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-change-tracking.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
 
-    // Gets the reviewed text.
+    await Word.run(async (context) => {
+      // Changes the position of the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
+      await context.sync();
+
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
+        return;
+      }
+
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log("About to change the position of the first shape group found in document body:", shapeGroup.shapes);
+      firstShapeGroup.relativeVerticalPosition = Word.RelativeVerticalPosition.insideMargin;
+      firstShapeGroup.relativeHorizontalPosition = Word.RelativeHorizontalPosition.margin;
+
+      console.log("Changed the position of the first shape group.");
+    });
+Word.Shape#relativeHorizontalSize:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
+
 
     await Word.run(async (context) => {
-      const range: Word.Range = context.document.getSelection();
-      const before = range.getReviewedText(Word.ChangeTrackingVersion.original);
-      const after = range.getReviewedText(Word.ChangeTrackingVersion.current);
+      // Changes the relative size of the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
+      await context.sync();
+
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
+        return;
+      }
+
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log(
+        "About to change the relative size of the first shape group found in the document body:",
+        shapeGroup.shapes,
+      );
+      firstShapeGroup.relativeHorizontalSize = Word.RelativeSize.insideMargin;
+      firstShapeGroup.relativeVerticalSize = Word.RelativeSize.bottomMargin;
+      firstShapeGroup.heightRelative = 50;
+
+      console.log("Changed the relative size of the first shape group.");
+    });
+Word.Shape#relativeVerticalPosition:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
+
+    await Word.run(async (context) => {
+      // Changes the position of the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
       await context.sync();
 
-      console.log("Reviewed text (before):", before.value, "Reviewed text (after):", after.value);
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
+        return;
+      }
+
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log("About to change the position of the first shape group found in document body:", shapeGroup.shapes);
+      firstShapeGroup.relativeVerticalPosition = Word.RelativeVerticalPosition.insideMargin;
+      firstShapeGroup.relativeHorizontalPosition = Word.RelativeHorizontalPosition.margin;
+
+      console.log("Changed the position of the first shape group.");
     });
-'Word.Range#getTextRanges:member(1)':
+Word.Shape#relativeVerticalSize:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/get-paragraph-on-insertion-point.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
 
     await Word.run(async (context) => {
-      // Get the complete sentence (as range) associated with the insertion point.
-      const sentences: Word.RangeCollection = context.document
-        .getSelection()
-        .getTextRanges(["."] /* Using the "." as delimiter */, false /*means without trimming spaces*/);
-      sentences.load("$none");
+      // Changes the relative size of the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
       await context.sync();
 
-      // Expand the range to the end of the paragraph to get all the complete sentences.
-      const sentencesToTheEndOfParagraph: Word.RangeCollection = sentences.items[0]
-        .getRange()
-        .expandTo(
-          context.document
-            .getSelection()
-            .paragraphs.getFirst()
-            .getRange(Word.RangeLocation.end)
-        )
-        .getTextRanges(["."], false /* Don't trim spaces*/);
-      sentencesToTheEndOfParagraph.load("text");
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
+        return;
+      }
+
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log(
+        "About to change the relative size of the first shape group found in the document body:",
+        shapeGroup.shapes,
+      );
+      firstShapeGroup.relativeHorizontalSize = Word.RelativeSize.insideMargin;
+      firstShapeGroup.relativeVerticalSize = Word.RelativeSize.bottomMargin;
+      firstShapeGroup.heightRelative = 50;
+
+      console.log("Changed the relative size of the first shape group.");
+    });
+Word.Shape#shapeGroup:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
+
+
+    await Word.run(async (context) => {
+      // Groups the shapes (including text boxes and pictures) found in the document body.
+      const shapes: Word.ShapeCollection = context.document.body.shapes.getByTypes([
+        Word.ShapeType.geometricShape,
+        Word.ShapeType.textBox,
+        Word.ShapeType.picture,
+      ]);
+      shapes.load("items");
       await context.sync();
 
-      for (let i = 0; i < sentencesToTheEndOfParagraph.items.length; i++) {
-        console.log(sentencesToTheEndOfParagraph.items[i].text);
+      const numShapes = shapes.items.length;
+      if (numShapes === 0) {
+        console.log("No shapes found in the document body.");
+        return;
       }
+
+      console.log(`Number of shapes to group: ${numShapes}`);
+
+      const groupedShape: Word.Shape = shapes.group();
+      groupedShape.load("shapeGroup/shapes");
+      await context.sync();
+
+      const shapeGroup: Word.ShapeGroup = groupedShape.shapeGroup;
+      console.log("Shapes grouped:", shapeGroup.shapes);
+      groupedShape.select();
     });
-'Word.Range#insertComment:member(1)':
+Word.Shape#textFrame:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-comments.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
 
-    // Sets a comment on the selected content.
-
     await Word.run(async (context) => {
-      const text = $("#comment-text")
-        .val()
-        .toString();
-      const comment: Word.Comment = context.document.getSelection().insertComment(text);
-
-      // Load object to log in the console.
-      comment.load();
+      // Gets the text frame of the first text box in the main document.
+      const shape: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirstOrNullObject();
+      shape.load("textFrame");
       await context.sync();
 
-      console.log("Comment inserted:", comment);
+      if (shape.isNullObject) {
+        console.log("No shapes with text boxes found in the main document.");
+        return;
+      }
+
+      console.log("Text frame of first text box:", shape.textFrame);
     });
-'Word.Range#insertContentControl:member(1)':
+Word.Shape#textWrap:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/doc-assembly.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
 
-    // Simulates creation of a template. First searches the document for
-    instances of the string "Contractor",
+    await Word.run(async (context) => {
+      // Gets text wrap properties of the first text box in the main document.
+      const shape: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirstOrNullObject();
+      shape.load("textWrap");
+      await context.sync();
 
-    // then changes the format  of each search result,
+      if (shape.isNullObject) {
+        console.log("No shapes with text boxes found in the main document.");
+        return;
+      }
 
-    // then wraps each search result within a content control,
+      console.log("Text wrap properties of first text box:", shape.textWrap);
+    });
+Word.Shape#type:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
-    // finally sets a tag and title property on each content control.
 
     await Word.run(async (context) => {
-        const results: Word.RangeCollection = context.document.body.search("Contractor");
-        results.load("font/bold");
-
-        // Check to make sure these content controls haven't been added yet.
-        const customerContentControls: Word.ContentControlCollection = context.document.contentControls.getByTag("customer");
-        customerContentControls.load("text");
-        await context.sync();
+      // Gets text boxes in the main document.
+      const shapes: Word.ShapeCollection = context.document.body.shapes;
+      shapes.load();
+      await context.sync();
 
-      if (customerContentControls.items.length === 0) {
-        for (let i = 0; i < results.items.length; i++) { 
-            results.items[i].font.bold = true;
-            let cc: Word.ContentControl = results.items[i].insertContentControl();
-            cc.tag = "customer";  // This value is used in the next step of this sample.
-            cc.title = "Customer Name " + i;
-        }
+      if (shapes.items.length > 0) {
+        console.log(`Number of shapes found in the main document: ${shapes.items.length}`);
+        shapes.items.forEach(function (shape, index) {
+          if (shape.type === Word.ShapeType.textBox) {
+            console.log(`Shape ${index} in the main document has a text box. Properties:`, shape);
+          } else {
+            console.log(`Shape ${index} in the main document doesn't have a text box.`);
+          }
+        });
+      } else {
+        console.log("No shapes found in the main document.");
       }
-        await context.sync();
     });
-'Word.Range#insertField:member(1)':
+Word.ShapeAutoSize:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-fields.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
 
-    // Inserts a Date field before selection.
-
     await Word.run(async (context) => {
-      const range: Word.Range = context.document.getSelection().getRange();
+      // Sets text frame properties of the first text box in the main document.
+      const shape: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirstOrNullObject();
+      shape.load("textFrame");
+      await context.sync();
 
-      const field: Word.Field = range.insertField(Word.InsertLocation.before, Word.FieldType.date, '\\@ "M/d/yyyy h:mm am/pm"', true);
+      if (shape.isNullObject) {
+        console.log("No shapes with text boxes found in the main document.");
+        return;
+      }
 
-      field.load("result,code");
+      const textFrame: Word.TextFrame = shape.textFrame;
+      textFrame.verticalAlignment = Word.ShapeTextVerticalAlignment.bottom;
+      textFrame.orientation = Word.ShapeTextOrientation.vertical270;
+      textFrame.autoSizeSetting = Word.ShapeAutoSize.shapeToFitText;
+
+      console.log("The first text box's text frame properties were updated:", textFrame);
+    });
+Word.ShapeCollection:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
+
+
+    await Word.run(async (context) => {
+      // Gets text boxes in the main document.
+      const shapes: Word.ShapeCollection = context.document.body.shapes;
+      shapes.load();
       await context.sync();
 
-      if (field.isNullObject) {
-        console.log("There are no fields in this document.");
+      if (shapes.items.length > 0) {
+        console.log(`Number of shapes found in the main document: ${shapes.items.length}`);
+        shapes.items.forEach(function (shape, index) {
+          if (shape.type === Word.ShapeType.textBox) {
+            console.log(`Shape ${index} in the main document has a text box. Properties:`, shape);
+          } else {
+            console.log(`Shape ${index} in the main document doesn't have a text box.`);
+          }
+        });
       } else {
-        console.log("Code of the field: " + field.code, "Result of the field: " + JSON.stringify(field.result));
+        console.log("No shapes found in the main document.");
       }
     });
-'Word.Range#insertFootnote:member(1)':
+Word.ShapeCollection#getByGeometricTypes:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-geometric-shapes.yaml
 
 
-    // Sets a footnote on the selected content.
-
     await Word.run(async (context) => {
-      const text = $("#input-footnote")
-        .val()
-        .toString();
-      const footnote: Word.NoteItem = context.document.getSelection().insertFootnote(text);
+      // Gets the moon geometric shapes from the document body.
+      const moons: Word.ShapeCollection = context.document.body.shapes.getByGeometricTypes([
+        Word.GeometricShapeType.moon,
+      ]);
+      moons.load();
       await context.sync();
 
-      console.log("Inserted footnote.");
+      console.log("Moons found in the document body:", moons);
     });
-'Word.Range#footnotes:member':
+Word.ShapeCollection#getByTypes:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-footnotes.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
 
-    // Gets the footnotes in the selected document range.
-
     await Word.run(async (context) => {
-      const footnotes: Word.NoteItemCollection = context.document.getSelection().footnotes;
-      footnotes.load("length");
+      // Sets the properties of the first text box.
+      const firstShapeWithTextBox: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.textBox])
+        .getFirst();
+      firstShapeWithTextBox.top = 115;
+      firstShapeWithTextBox.left = 0;
+      firstShapeWithTextBox.width = 50;
+      firstShapeWithTextBox.height = 50;
       await context.sync();
 
-      console.log("Number of footnotes in the selected range: " + footnotes.items.length);
+      console.log("The first text box's properties were updated:", firstShapeWithTextBox);
     });
-'Word.Range#parentContentControl:member':
+Word.ShapeCollection#getFirst:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
 
-    // Toggles the isChecked property of the first checkbox content control
-    found in the selection.
-
     await Word.run(async (context) => {
-      const selectedRange: Word.Range = context.document.getSelection();
-      let selectedContentControl = selectedRange
-        .getContentControls({
-          types: [Word.ContentControlType.checkBox]
-        })
-        .getFirstOrNullObject();
-      selectedContentControl.load("id,checkboxContentControl/isChecked");
+      // Inserts a content control into the first paragraph in the first text box.
+      const firstShapeWithTextBox: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.textBox])
+        .getFirst();
+      firstShapeWithTextBox.load("type/body");
+      await context.sync();
 
+      const firstParagraphInTextBox: Word.Paragraph = firstShapeWithTextBox.body.paragraphs.getFirst();
+      const newControl: Word.ContentControl = firstParagraphInTextBox.insertContentControl();
+      newControl.load();
       await context.sync();
 
-      if (selectedContentControl.isNullObject) {
-        const parentContentControl: Word.ContentControl = selectedRange.parentContentControl;
-        parentContentControl.load("id,type,checkboxContentControl/isChecked");
-        await context.sync();
+      console.log("New content control properties:", newControl);
+    });
+Word.ShapeCollection#getFirstOrNullObject:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
-        if (parentContentControl.isNullObject || parentContentControl.type !== Word.ContentControlType.checkBox) {
-          console.warn("No checkbox content control is currently selected.");
-          return;
-        } else {
-          selectedContentControl = parentContentControl;
-        }
-      }
 
-      const isCheckedBefore = selectedContentControl.checkboxContentControl.isChecked;
-      console.log("isChecked state before:", `id: ${selectedContentControl.id} ... isChecked: ${isCheckedBefore}`);
-      selectedContentControl.checkboxContentControl.isChecked = !isCheckedBefore;
-      selectedContentControl.load("id,checkboxContentControl/isChecked");
+    await Word.run(async (context) => {
+      // Gets text from the first text box in the main document.
+      const shape: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirstOrNullObject();
+      shape.load("body/text");
       await context.sync();
 
       console.log(
-        "isChecked state after:",
-        `id: ${selectedContentControl.id} ... isChecked: ${selectedContentControl.checkboxContentControl.isChecked}`
+        shape.isNullObject
+          ? "No shapes with text boxes found in the main document."
+          : `Text in first text box: ${shape.body.text}`
       );
     });
-'Word.Range#styleBuiltIn:member':
+Word.ShapeCollection#group:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/doc-assembly.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
 
     await Word.run(async (context) => {
-        const header: Word.Range = context.document.body.insertText("This is a sample Heading 1 Title!!\n",
-            "Start" /*this means at the beginning of the body */);
-        header.styleBuiltIn = Word.BuiltInStyleName.heading1;
+      // Groups the shapes (including text boxes and pictures) found in the document body.
+      const shapes: Word.ShapeCollection = context.document.body.shapes.getByTypes([
+        Word.ShapeType.geometricShape,
+        Word.ShapeType.textBox,
+        Word.ShapeType.picture,
+      ]);
+      shapes.load("items");
+      await context.sync();
 
-        await context.sync();
+      const numShapes = shapes.items.length;
+      if (numShapes === 0) {
+        console.log("No shapes found in the document body.");
+        return;
+      }
+
+      console.log(`Number of shapes to group: ${numShapes}`);
+
+      const groupedShape: Word.Shape = shapes.group();
+      groupedShape.load("shapeGroup/shapes");
+      await context.sync();
+
+      const shapeGroup: Word.ShapeGroup = groupedShape.shapeGroup;
+      console.log("Shapes grouped:", shapeGroup.shapes);
+      groupedShape.select();
     });
-'Word.RangeCollection:class':
+Word.ShapeFill:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/search.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-geometric-shapes.yaml
 
-    // Does a basic text search and highlights matches in the document.
 
     await Word.run(async (context) => {
-      const results : Word.RangeCollection = context.document.body.search("extend");
-      results.load("length");
-
+      // Gets the color fill properties of the first moon found in the document body.
+      const moon: Word.Shape = context.document.body.shapes
+        .getByGeometricTypes([Word.GeometricShapeType.moon])
+        .getFirstOrNullObject();
+      moon.load("fill");
       await context.sync();
 
-      // Let's traverse the search results and highlight matches.
-      for (let i = 0; i < results.items.length; i++) {
-        results.items[i].font.highlightColor = "yellow";
+      if (moon.isNullObject) {
+        console.log("No moons found in the document body.");
+        return;
       }
 
-      await context.sync();
+      const moonFill: Word.ShapeFill = moon.fill;
+      const moonFillType = moonFill.type as Word.ShapeFillType;
+
+      console.log("Color fill properties of the first moon found in the document body:");
+      console.log(`\tForeground color: ${moonFill.foregroundColor}`);
+      console.log(`\tBackground color: ${moonFill.backgroundColor}`);
+      console.log(`\tTransparency: ${moonFill.transparency}`);
+      console.log(`\tFill type: ${moonFillType}`);
     });
-'Word.RangeLocation:enum':
+Word.ShapeFill#clear:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/get-paragraph-on-insertion-point.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-geometric-shapes.yaml
 
 
     await Word.run(async (context) => {
-      // Get the complete sentence (as range) associated with the insertion point.
-      const sentences: Word.RangeCollection = context.document
-        .getSelection()
-        .getTextRanges(["."] /* Using the "." as delimiter */, false /*means without trimming spaces*/);
-      sentences.load("$none");
+      // Sets color fill properties of the first moon found in the document body.
+      const moon: Word.Shape = context.document.body.shapes
+        .getByGeometricTypes([Word.GeometricShapeType.moon])
+        .getFirstOrNullObject();
+      moon.load("fill");
       await context.sync();
 
-      // Expand the range to the end of the paragraph to get all the complete sentences.
-      const sentencesToTheEndOfParagraph: Word.RangeCollection = sentences.items[0]
-        .getRange()
-        .expandTo(
-          context.document
-            .getSelection()
-            .paragraphs.getFirst()
-            .getRange(Word.RangeLocation.end)
-        )
-        .getTextRanges(["."], false /* Don't trim spaces*/);
-      sentencesToTheEndOfParagraph.load("text");
+      if (moon.isNullObject) {
+        console.log("No moons found in the document body.");
+        return;
+      }
+
+      const moonFill: Word.ShapeFill = moon.fill;
+      console.log("Current fill properties of the first moon found in the document body:", moonFill);
+
+      moonFill.setSolidColor("green");
+      moonFill.load();
       await context.sync();
 
-      for (let i = 0; i < sentencesToTheEndOfParagraph.items.length; i++) {
-        console.log(sentencesToTheEndOfParagraph.items[i].text);
-      }
+      console.log("Updated color fill properties of the first moon found in the document body:", moonFill);
     });
-'Word.SaveBehavior:enum':
+Word.ShapeFill#setSolidColor:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/save-close.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-geometric-shapes.yaml
 
 
-    // If the document hasn't been saved before, prompts
+    await Word.run(async (context) => {
+      // Sets color fill properties of the first moon found in the document body.
+      const moon: Word.Shape = context.document.body.shapes
+        .getByGeometricTypes([Word.GeometricShapeType.moon])
+        .getFirstOrNullObject();
+      moon.load("fill");
+      await context.sync();
 
-    // user with options for if or how they want to save.
+      if (moon.isNullObject) {
+        console.log("No moons found in the document body.");
+        return;
+      }
 
-    await Word.run(async (context) => {
-      context.document.save(Word.SaveBehavior.prompt);
+      const moonFill: Word.ShapeFill = moon.fill;
+      console.log("Current fill properties of the first moon found in the document body:", moonFill);
+
+      moonFill.setSolidColor("green");
+      moonFill.load();
       await context.sync();
+
+      console.log("Updated color fill properties of the first moon found in the document body:", moonFill);
     });
-'Word.Section#getFooter:member(2)':
+Word.ShapeFillType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-header-and-footer.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-geometric-shapes.yaml
 
 
     await Word.run(async (context) => {
-      context.document.sections
-        .getFirst()
-        .getFooter("Primary")
-        .insertParagraph("This is a primary footer.", "End");
-
+      // Gets the color fill properties of the first moon found in the document body.
+      const moon: Word.Shape = context.document.body.shapes
+        .getByGeometricTypes([Word.GeometricShapeType.moon])
+        .getFirstOrNullObject();
+      moon.load("fill");
       await context.sync();
+
+      if (moon.isNullObject) {
+        console.log("No moons found in the document body.");
+        return;
+      }
+
+      const moonFill: Word.ShapeFill = moon.fill;
+      const moonFillType = moonFill.type as Word.ShapeFillType;
+
+      console.log("Color fill properties of the first moon found in the document body:");
+      console.log(`\tForeground color: ${moonFill.foregroundColor}`);
+      console.log(`\tBackground color: ${moonFill.backgroundColor}`);
+      console.log(`\tTransparency: ${moonFill.transparency}`);
+      console.log(`\tFill type: ${moonFillType}`);
     });
-'Word.Section#getHeader:member(1)':
+Word.ShapeGroup:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/25-paragraph/insert-header-and-footer.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
 
     await Word.run(async (context) => {
-      context.document.sections
-        .getFirst()
-        .getHeader(Word.HeaderFooterType.primary)
-        .insertParagraph("This is a primary header.", "End");
+      // Groups the shapes (including text boxes and pictures) found in the document body.
+      const shapes: Word.ShapeCollection = context.document.body.shapes.getByTypes([
+        Word.ShapeType.geometricShape,
+        Word.ShapeType.textBox,
+        Word.ShapeType.picture,
+      ]);
+      shapes.load("items");
+      await context.sync();
 
+      const numShapes = shapes.items.length;
+      if (numShapes === 0) {
+        console.log("No shapes found in the document body.");
+        return;
+      }
+
+      console.log(`Number of shapes to group: ${numShapes}`);
+
+      const groupedShape: Word.Shape = shapes.group();
+      groupedShape.load("shapeGroup/shapes");
       await context.sync();
+
+      const shapeGroup: Word.ShapeGroup = groupedShape.shapeGroup;
+      console.log("Shapes grouped:", shapeGroup.shapes);
+      groupedShape.select();
     });
-'Word.Section:class':
+Word.ShapeGroup#ungroup:member(1):
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-section-breaks.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
 
-    // Inserts a section break on the next page.
-
     await Word.run(async (context) => {
-      const body: Word.Body = context.document.body;
-      body.insertBreak(Word.BreakType.sectionNext, Word.InsertLocation.end);
-
+      // Ungroups the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
       await context.sync();
 
-      console.log("Inserted section break on next page.");
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
+        return;
+      }
+
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log("About to ungroup the first shape group found in the document body:", shapeGroup.shapes);
+      shapeGroup.ungroup();
+
+      console.log("Ungrouped the first shape group.");
     });
-'Word.SectionCollection:class':
+Word.ShapeGroup#shapes:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-section-breaks.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
 
-    // Inserts a section break on the next even page.
-
     await Word.run(async (context) => {
-      const body: Word.Body = context.document.body;
-      body.insertBreak(Word.BreakType.sectionEven, Word.InsertLocation.end);
+      // Moves the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
+      await context.sync();
+
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
+        return;
+      }
+
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log("About to move the first shape group found in the document body:", shapeGroup.shapes);
+      firstShapeGroup.moveHorizontally(-10);
+      firstShapeGroup.moveVertically(50);
+
+      console.log("Moved the first shape group.");
+    });
+Word.ShapeScaleFrom:enum:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
 
+
+    await Word.run(async (context) => {
+      // Scales the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
       await context.sync();
 
-      console.log("Inserted section break on next even page.");
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
+        return;
+      }
+
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log("About to scale the first shape group found in the document body:", shapeGroup.shapes);
+      firstShapeGroup.scaleHeight(0.75, Word.ShapeScaleType.currentSize);
+      firstShapeGroup.scaleWidth(0.5, Word.ShapeScaleType.currentSize, Word.ShapeScaleFrom.scaleFromBottomRight);
+
+      console.log("Scaled the first shape group.");
     });
-'Word.SelectionMode:enum':
+Word.ShapeScaleType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/scroll-to-range.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
+
+
+    await Word.run(async (context) => {
+      // Scales the first set of grouped shapes (including text boxes) found in the document body.
+      const firstShapeGroup: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.group])
+        .getFirstOrNullObject();
+      firstShapeGroup.load("shapeGroup/shapes");
+      await context.sync();
 
+      if (firstShapeGroup.isNullObject) {
+        console.log("No shape groups found in the document body.");
+        return;
+      }
 
-    await Word.run(async (context) => {
-      // Select can be at the start or end of a range; this by definition moves the insertion point without selecting the range.
-      context.document.body.paragraphs.getLast().select(Word.SelectionMode.end);
+      let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
+      console.log("About to scale the first shape group found in the document body:", shapeGroup.shapes);
+      firstShapeGroup.scaleHeight(0.75, Word.ShapeScaleType.currentSize);
+      firstShapeGroup.scaleWidth(0.5, Word.ShapeScaleType.currentSize, Word.ShapeScaleFrom.scaleFromBottomRight);
 
-      await context.sync();
+      console.log("Scaled the first shape group.");
     });
-'Word.Setting:class':
+Word.ShapeTextOrientation:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-settings.yaml
-
-
-    // Adds a new custom setting or
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
-    // edits the value of an existing one.
 
     await Word.run(async (context) => {
-      const key = $("#key")
-        .val()
-        .toString();
+      // Sets text frame properties of the first text box in the main document.
+      const shape: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirstOrNullObject();
+      shape.load("textFrame");
+      await context.sync();
 
-      if (key == "") {
-        console.error("Key shouldn't be empty.");
+      if (shape.isNullObject) {
+        console.log("No shapes with text boxes found in the main document.");
         return;
       }
 
-      const value = $("#value")
-        .val()
-        .toString();
-
-      const settings: Word.SettingCollection = context.document.settings;
-      const setting: Word.Setting = settings.add(key, value);
-      setting.load();
-      await context.sync();
+      const textFrame: Word.TextFrame = shape.textFrame;
+      textFrame.verticalAlignment = Word.ShapeTextVerticalAlignment.bottom;
+      textFrame.orientation = Word.ShapeTextOrientation.vertical270;
+      textFrame.autoSizeSetting = Word.ShapeAutoSize.shapeToFitText;
 
-      console.log("Setting added or edited:", setting);
+      console.log("The first text box's text frame properties were updated:", textFrame);
     });
-'Word.Setting#key:member':
+Word.ShapeTextVerticalAlignment:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-settings.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
-    // Adds a new custom setting or
-
-    // edits the value of an existing one.
 
     await Word.run(async (context) => {
-      const key = $("#key")
-        .val()
-        .toString();
+      // Sets text frame properties of the first text box in the main document.
+      const shape: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirstOrNullObject();
+      shape.load("textFrame");
+      await context.sync();
 
-      if (key == "") {
-        console.error("Key shouldn't be empty.");
+      if (shape.isNullObject) {
+        console.log("No shapes with text boxes found in the main document.");
         return;
       }
 
-      const value = $("#value")
-        .val()
-        .toString();
-
-      const settings: Word.SettingCollection = context.document.settings;
-      const setting: Word.Setting = settings.add(key, value);
-      setting.load();
-      await context.sync();
+      const textFrame: Word.TextFrame = shape.textFrame;
+      textFrame.verticalAlignment = Word.ShapeTextVerticalAlignment.bottom;
+      textFrame.orientation = Word.ShapeTextOrientation.vertical270;
+      textFrame.autoSizeSetting = Word.ShapeAutoSize.shapeToFitText;
 
-      console.log("Setting added or edited:", setting);
+      console.log("The first text box's text frame properties were updated:", textFrame);
     });
-'Word.Setting#value:member':
+Word.ShapeTextWrap:class:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-settings.yaml
-
-
-    // Adds a new custom setting or
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
-    // edits the value of an existing one.
 
     await Word.run(async (context) => {
-      const key = $("#key")
-        .val()
-        .toString();
+      // Gets text wrap properties of the first text box in the main document.
+      const shape: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirstOrNullObject();
+      shape.load("textWrap");
+      await context.sync();
 
-      if (key == "") {
-        console.error("Key shouldn't be empty.");
+      if (shape.isNullObject) {
+        console.log("No shapes with text boxes found in the main document.");
         return;
       }
 
-      const value = $("#value")
-        .val()
-        .toString();
-
-      const settings: Word.SettingCollection = context.document.settings;
-      const setting: Word.Setting = settings.add(key, value);
-      setting.load();
-      await context.sync();
-
-      console.log("Setting added or edited:", setting);
+      console.log("Text wrap properties of first text box:", shape.textWrap);
     });
-'Word.SettingCollection:class':
+Word.ShapeTextWrap#side:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-settings.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
 
-    // Deletes all custom settings this add-in had set on this document.
-
     await Word.run(async (context) => {
-      const settings: Word.SettingCollection = context.document.settings;
-      settings.deleteAll();
+      // Sets text wrap properties of the first text box.
+      const firstShapeWithTextBox: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.textBox])
+        .getFirstOrNullObject();
+      firstShapeWithTextBox.load("textWrap");
       await context.sync();
-      console.log("All settings deleted.");
+
+      if (firstShapeWithTextBox.isNullObject) {
+        console.log("No shapes with text boxes found in main document.");
+        return;
+      }
+
+      const textWrap: Word.ShapeTextWrap = firstShapeWithTextBox.textWrap;
+      textWrap.type = Word.ShapeTextWrapType.square;
+      textWrap.side = Word.ShapeTextWrapSide.both;
+
+      console.log("The first text box's text wrap properties were updated:", textWrap);
     });
-'Word.SettingCollection#add:member(1)':
+Word.ShapeTextWrap#type:member:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-settings.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
 
-    // Adds a new custom setting or
-
-    // edits the value of an existing one.
-
     await Word.run(async (context) => {
-      const key = $("#key")
-        .val()
-        .toString();
+      // Sets text wrap properties of the first text box.
+      const firstShapeWithTextBox: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.textBox])
+        .getFirstOrNullObject();
+      firstShapeWithTextBox.load("textWrap");
+      await context.sync();
 
-      if (key == "") {
-        console.error("Key shouldn't be empty.");
+      if (firstShapeWithTextBox.isNullObject) {
+        console.log("No shapes with text boxes found in main document.");
         return;
       }
 
-      const value = $("#value")
-        .val()
-        .toString();
-
-      const settings: Word.SettingCollection = context.document.settings;
-      const setting: Word.Setting = settings.add(key, value);
-      setting.load();
-      await context.sync();
+      const textWrap: Word.ShapeTextWrap = firstShapeWithTextBox.textWrap;
+      textWrap.type = Word.ShapeTextWrapType.square;
+      textWrap.side = Word.ShapeTextWrapSide.both;
 
-      console.log("Setting added or edited:", setting);
+      console.log("The first text box's text wrap properties were updated:", textWrap);
     });
-'Word.SettingCollection#items:member':
+Word.ShapeTextWrapSide:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-settings.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
-    // Gets all custom settings this add-in set on this document.
 
     await Word.run(async (context) => {
-      const settings: Word.SettingCollection = context.document.settings;
-      settings.load("items");
+      // Sets text wrap properties of the first text box.
+      const firstShapeWithTextBox: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.textBox])
+        .getFirstOrNullObject();
+      firstShapeWithTextBox.load("textWrap");
       await context.sync();
 
-      if (settings.items.length == 0) {
-        console.log("There are no settings.");
-      } else {
-        console.log("All settings:");
-        for (let i = 0; i < settings.items.length; i++) {
-          console.log(settings.items[i]);
-        }
+      if (firstShapeWithTextBox.isNullObject) {
+        console.log("No shapes with text boxes found in main document.");
+        return;
       }
+
+      const textWrap: Word.ShapeTextWrap = firstShapeWithTextBox.textWrap;
+      textWrap.type = Word.ShapeTextWrapType.square;
+      textWrap.side = Word.ShapeTextWrapSide.both;
+
+      console.log("The first text box's text wrap properties were updated:", textWrap);
     });
-'Word.Shading:class':
+Word.ShapeTextWrapType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
-    // Updates shading properties (e.g., texture, pattern colors) of the
-    specified style.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name").val() as string;
-      if (styleName == "") {
-        console.warn("Enter a style name to update shading properties.");
-        return;
-      }
-
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load();
+      // Sets text wrap properties of the first text box.
+      const firstShapeWithTextBox: Word.Shape = context.document.body.shapes
+        .getByTypes([Word.ShapeType.textBox])
+        .getFirstOrNullObject();
+      firstShapeWithTextBox.load("textWrap");
       await context.sync();
 
-      if (style.isNullObject) {
-        console.warn(`There's no existing style with the name '${styleName}'.`);
-      } else {
-        const shading: Word.Shading = style.shading;
-        shading.load();
-        await context.sync();
+      if (firstShapeWithTextBox.isNullObject) {
+        console.log("No shapes with text boxes found in main document.");
+        return;
+      }
 
-        shading.backgroundPatternColor = "blue";
-        shading.foregroundPatternColor = "yellow";
-        shading.texture = Word.ShadingTextureType.darkTrellis;
+      const textWrap: Word.ShapeTextWrap = firstShapeWithTextBox.textWrap;
+      textWrap.type = Word.ShapeTextWrapType.square;
+      textWrap.side = Word.ShapeTextWrapSide.both;
 
-        console.log("Updated shading.");
-      }
+      console.log("The first text box's text wrap properties were updated:", textWrap);
     });
-'Word.ShadingTextureType:enum':
+Word.ShapeType:enum:
   - >-
     // Link to full sample:
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
 
 
-    // Updates shading properties (e.g., texture, pattern colors) of the
-    specified style.
-
     await Word.run(async (context) => {
-      const styleName = $("#style-name").val() as string;
-      if (styleName == "") {
-        console.warn("Enter a style name to update shading properties.");
-        return;
-      }
-
-      const style: Word.Style = context.document.getStyles().getByNameOrNullObject(styleName);
-      style.load();
+      // Gets text boxes in the main document.
+      const shapes: Word.ShapeCollection = context.document.body.shapes;
+      shapes.load();
       await context.sync();
 
-      if (style.isNullObject) {
-        console.warn(`There's no existing style with the name '${styleName}'.`);
+      if (shapes.items.length > 0) {
+        console.log(`Number of shapes found in the main document: ${shapes.items.length}`);
+        shapes.items.forEach(function (shape, index) {
+          if (shape.type === Word.ShapeType.textBox) {
+            console.log(`Shape ${index} in the main document has a text box. Properties:`, shape);
+          } else {
+            console.log(`Shape ${index} in the main document doesn't have a text box.`);
+          }
+        });
       } else {
-        const shading: Word.Shading = style.shading;
-        shading.load();
-        await context.sync();
-
-        shading.backgroundPatternColor = "blue";
-        shading.foregroundPatternColor = "yellow";
-        shading.texture = Word.ShadingTextureType.darkTrellis;
-
-        console.log("Updated shading.");
+        console.log("No shapes found in the main document.");
       }
     });
-'Word.Style:class':
+Word.Style:class:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
@@ -23417,7 +29546,7 @@
     // Applies the specified style to a paragraph.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name-to-use").val() as string;
+      const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value;
       if (styleName == "") {
         console.warn("Enter a style name to apply.");
         return;
@@ -23443,7 +29572,7 @@
         console.log(`'${styleName}' style applied to first paragraph.`);
       }
     });
-'Word.Style#delete:member(1)':
+Word.Style#delete:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
@@ -23452,7 +29581,7 @@
     // Deletes the custom style.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name-to-delete").val() as string;
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
       if (styleName == "") {
         console.warn("Enter a style name to delete.");
         return;
@@ -23469,7 +29598,7 @@
         console.log(`Successfully deleted custom style '${styleName}'.`);
       }
     });
-'Word.Style#borders:member':
+Word.Style#borders:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
@@ -23479,7 +29608,7 @@
     style.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name").val() as string;
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
       if (styleName == "") {
         console.warn("Enter a style name to update border properties.");
         return;
@@ -23502,7 +29631,7 @@
         console.log("Updated outside borders.");
       }
     });
-'Word.Style#font:member':
+Word.Style#font:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
@@ -23511,7 +29640,7 @@
     // Updates font properties (e.g., color, size) of the specified style.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name").val() as string;
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
       if (styleName == "") {
         console.warn("Enter a style name to update font properties.");
         return;
@@ -23530,7 +29659,7 @@
         console.log(`Successfully updated font properties of the '${styleName}' style.`);
       }
     });
-'Word.Style#listTemplate:member':
+Word.Style#listTemplate:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/manage-list-styles.yaml
@@ -23539,7 +29668,7 @@
     // Gets the properties of the specified style.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name-to-use").val() as string;
+      const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value;
       if (styleName == "") {
         console.warn("Enter a style name to get properties.");
         return;
@@ -23566,7 +29695,7 @@
         console.log(`List levels of the '${styleName}' style:`, listLevels);
       }
     });
-'Word.Style#nameLocal:member':
+Word.Style#nameLocal:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
@@ -23575,7 +29704,7 @@
     // Applies the specified style to a paragraph.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name-to-use").val() as string;
+      const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value;
       if (styleName == "") {
         console.warn("Enter a style name to apply.");
         return;
@@ -23601,7 +29730,7 @@
         console.log(`'${styleName}' style applied to first paragraph.`);
       }
     });
-'Word.Style#paragraphFormat:member':
+Word.Style#paragraphFormat:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
@@ -23611,7 +29740,7 @@
     left indent size and the alignment.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name").val() as string;
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
       if (styleName == "") {
         console.warn("Enter a style name to update its paragraph format.");
         return;
@@ -23629,7 +29758,7 @@
         console.log(`Successfully the paragraph format of the '${styleName}' style.`);
       }
     });
-'Word.Style#shading:member':
+Word.Style#shading:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
@@ -23639,7 +29768,7 @@
     specified style.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name").val() as string;
+      const styleName = (document.getElementById("style-name") as HTMLInputElement).value;
       if (styleName == "") {
         console.warn("Enter a style name to update shading properties.");
         return;
@@ -23663,7 +29792,7 @@
         console.log("Updated shading.");
       }
     });
-'Word.StyleCollection:class':
+Word.StyleCollection:class:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
@@ -23678,7 +29807,7 @@
 
       console.log(`Number of styles: ${count.value}`);
     });
-'Word.StyleCollection#getByNameOrNullObject:member(1)':
+Word.StyleCollection#getByNameOrNullObject:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
@@ -23687,7 +29816,7 @@
     // Adds a new style.
 
     await Word.run(async (context) => {
-      const newStyleName = $("#new-style-name").val() as string;
+      const newStyleName = (document.getElementById("new-style-name") as HTMLInputElement).value;
       if (newStyleName == "") {
         console.warn("Enter a style name to add.");
         return;
@@ -23704,13 +29833,13 @@
         return;
       }
 
-      const newStyleType = ($("#new-style-type").val() as unknown) as Word.StyleType;
+      const newStyleType = ((document.getElementById("new-style-type") as HTMLSelectElement).value as unknown) as Word.StyleType;
       context.document.addStyle(newStyleName, newStyleType);
       await context.sync();
 
       console.log(newStyleName + " has been added to the style list.");
     });
-'Word.StyleCollection#getCount:member(1)':
+Word.StyleCollection#getCount:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
@@ -23725,7 +29854,7 @@
 
       console.log(`Number of styles: ${count.value}`);
     });
-'Word.StyleType:enum':
+Word.StyleType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-styles.yaml
@@ -23734,7 +29863,7 @@
     // Applies the specified style to a paragraph.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name-to-use").val() as string;
+      const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value;
       if (styleName == "") {
         console.warn("Enter a style name to apply.");
         return;
@@ -23760,7 +29889,7 @@
         console.log(`'${styleName}' style applied to first paragraph.`);
       }
     });
-'Word.Table#getBorder:member(1)':
+Word.Table#getBorder:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -23777,7 +29906,7 @@
 
       console.log(`Details about the ${borderLocation} border of the first table:`, `- Color: ${border.color}`, `- Type: ${border.type}`, `- Width: ${border.width} points`);
     });
-'Word.Table#getCell:member(1)':
+Word.Table#getCell:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/table-cell-access.yaml
@@ -23792,7 +29921,7 @@
       await context.sync();
       console.log("First cell's text is: " + firstCell.text);
     });
-'Word.Table#getCellPadding:member(1)':
+Word.Table#getCellPadding:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -23810,7 +29939,7 @@
         `Cell padding details about the ${cellPaddingLocation} border of the first table: ${cellPadding.value} points`
       );
     });
-'Word.Table#alignment:member':
+Word.Table#alignment:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -23825,7 +29954,7 @@
 
       console.log(`Details about the alignment of the first table:`, `- Alignment of the table within the containing page column: ${firstTable.alignment}`, `- Horizontal alignment of every cell in the table: ${firstTable.horizontalAlignment}`, `- Vertical alignment of every cell in the table: ${firstTable.verticalAlignment}`);
     });
-'Word.Table#horizontalAlignment:member':
+Word.Table#horizontalAlignment:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -23840,7 +29969,7 @@
 
       console.log(`Details about the alignment of the first table:`, `- Alignment of the table within the containing page column: ${firstTable.alignment}`, `- Horizontal alignment of every cell in the table: ${firstTable.horizontalAlignment}`, `- Vertical alignment of every cell in the table: ${firstTable.verticalAlignment}`);
     });
-'Word.Table#rows:member':
+Word.Table#rows:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -23857,7 +29986,7 @@
 
       console.log(`Details about the alignment of the first table's first row:`, `- Horizontal alignment of every cell in the row: ${firstTableRow.horizontalAlignment}`, `- Vertical alignment of every cell in the row: ${firstTableRow.verticalAlignment}`);
     });
-'Word.Table#verticalAlignment:member':
+Word.Table#verticalAlignment:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -23872,7 +30001,7 @@
 
       console.log(`Details about the alignment of the first table:`, `- Alignment of the table within the containing page column: ${firstTable.alignment}`, `- Horizontal alignment of every cell in the table: ${firstTable.horizontalAlignment}`, `- Vertical alignment of every cell in the table: ${firstTable.verticalAlignment}`);
     });
-'Word.Table:class':
+Word.Table:class:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/table-cell-access.yaml
@@ -23890,7 +30019,7 @@
 
       await context.sync();
     });
-'Word.TableBorder:class':
+Word.TableBorder:class:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -23907,7 +30036,7 @@
 
       console.log(`Details about the ${borderLocation} border of the first table:`, `- Color: ${border.color}`, `- Type: ${border.type}`, `- Width: ${border.width} points`);
     });
-'Word.TableBorder#color:member':
+Word.TableBorder#color:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -23924,7 +30053,7 @@
 
       console.log(`Details about the ${borderLocation} border of the first table:`, `- Color: ${border.color}`, `- Type: ${border.type}`, `- Width: ${border.width} points`);
     });
-'Word.TableBorder#type:member':
+Word.TableBorder#type:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -23941,7 +30070,7 @@
 
       console.log(`Details about the ${borderLocation} border of the first table:`, `- Color: ${border.color}`, `- Type: ${border.type}`, `- Width: ${border.width} points`);
     });
-'Word.TableBorder#width:member':
+Word.TableBorder#width:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -23958,7 +30087,7 @@
 
       console.log(`Details about the ${borderLocation} border of the first table:`, `- Color: ${border.color}`, `- Type: ${border.type}`, `- Width: ${border.width} points`);
     });
-'Word.TableCell:class':
+Word.TableCell:class:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -23976,7 +30105,7 @@
 
       console.log(`Details about the alignment of the first table's first cell:`, `- Horizontal alignment of the cell's content: ${firstCell.horizontalAlignment}`, `- Vertical alignment of the cell's content: ${firstCell.verticalAlignment}`);
     });
-'Word.TableCell#getBorder:member(2)':
+Word.TableCell#getBorder:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -23994,7 +30123,7 @@
 
       console.log(`Details about the ${borderLocation} border of the first table's first cell:`, `- Color: ${border.color}`, `- Type: ${border.type}`, `- Width: ${border.width} points`);
     });
-'Word.TableCell#getCellPadding:member(2)':
+Word.TableCell#getCellPadding:member(2):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -24014,7 +30143,7 @@
         `Cell padding details about the ${cellPaddingLocation} border of the first table's first cell: ${cellPadding.value} points`
       );
     });
-'Word.TableCell#horizontalAlignment:member':
+Word.TableCell#horizontalAlignment:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -24032,7 +30161,7 @@
 
       console.log(`Details about the alignment of the first table's first cell:`, `- Horizontal alignment of the cell's content: ${firstCell.horizontalAlignment}`, `- Vertical alignment of the cell's content: ${firstCell.verticalAlignment}`);
     });
-'Word.TableCell#verticalAlignment:member':
+Word.TableCell#verticalAlignment:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -24050,7 +30179,7 @@
 
       console.log(`Details about the alignment of the first table's first cell:`, `- Horizontal alignment of the cell's content: ${firstCell.horizontalAlignment}`, `- Vertical alignment of the cell's content: ${firstCell.verticalAlignment}`);
     });
-'Word.TableCellCollection:class':
+Word.TableCellCollection:class:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -24068,7 +30197,7 @@
 
       console.log(`Details about the alignment of the first table's first cell:`, `- Horizontal alignment of the cell's content: ${firstCell.horizontalAlignment}`, `- Vertical alignment of the cell's content: ${firstCell.verticalAlignment}`);
     });
-'Word.TableCollection:class':
+Word.TableCollection:class:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -24083,7 +30212,7 @@
 
       console.log(`Details about the alignment of the first table:`, `- Alignment of the table within the containing page column: ${firstTable.alignment}`, `- Horizontal alignment of every cell in the table: ${firstTable.horizontalAlignment}`, `- Vertical alignment of every cell in the table: ${firstTable.verticalAlignment}`);
     });
-'Word.TableCollection#getFirst:member(1)':
+Word.TableCollection#getFirst:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/table-cell-access.yaml
@@ -24098,7 +30227,7 @@
       await context.sync();
       console.log("First cell's text is: " + firstCell.text);
     });
-'Word.TableRow:class':
+Word.TableRow:class:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -24116,7 +30245,7 @@
 
       console.log(`Details about the alignment of the first table's first cell:`, `- Horizontal alignment of the cell's content: ${firstCell.horizontalAlignment}`, `- Vertical alignment of the cell's content: ${firstCell.verticalAlignment}`);
     });
-'Word.TableRow#getBorder:member(1)':
+Word.TableRow#getBorder:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -24135,7 +30264,7 @@
 
       console.log(`Details about the ${borderLocation} border of the first table's first row:`, `- Color: ${border.color}`, `- Type: ${border.type}`, `- Width: ${border.width} points`);
     });
-'Word.TableRow#getCellPadding:member(1)':
+Word.TableRow#getCellPadding:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -24155,7 +30284,7 @@
         `Cell padding details about the ${cellPaddingLocation} border of the first table's first row: ${cellPadding.value} points`
       );
     });
-'Word.TableRow#cells:member':
+Word.TableRow#cells:member:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -24173,7 +30302,7 @@
 
       console.log(`Details about the alignment of the first table's first cell:`, `- Horizontal alignment of the cell's content: ${firstCell.horizontalAlignment}`, `- Vertical alignment of the cell's content: ${firstCell.verticalAlignment}`);
     });
-'Word.TableRowCollection:class':
+Word.TableRowCollection:class:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -24190,7 +30319,7 @@
 
       console.log(`Details about the alignment of the first table's first row:`, `- Horizontal alignment of every cell in the row: ${firstTableRow.horizontalAlignment}`, `- Vertical alignment of every cell in the row: ${firstTableRow.verticalAlignment}`);
     });
-'Word.TableRowCollection#getFirst:member(1)':
+Word.TableRowCollection#getFirst:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -24209,7 +30338,7 @@
 
       console.log(`Details about the ${borderLocation} border of the first table's first row:`, `- Color: ${border.color}`, `- Type: ${border.type}`, `- Width: ${border.width} points`);
     });
-'Word.TableStyle:class':
+Word.TableStyle:class:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-custom-style.yaml
@@ -24217,9 +30346,9 @@
 
     // Gets the table style properties and displays them in the form.
 
-    const styleName = $("#style-name")
-      .val()
-      .toString();
+    const styleName = (document.getElementById("style-name") as
+    HTMLInputElement).value;
+
     if (styleName == "") {
       console.warn("Please input a table style name.");
       return;
@@ -24237,15 +30366,106 @@
       }
 
       console.log(tableStyle);
-      $("#alignment").val(tableStyle.alignment);
-      $("#allow-break-across-page").val(tableStyle.allowBreakAcrossPage.toString());
-      $("#top-cell-margin").val(tableStyle.topCellMargin);
-      $("#bottom-cell-margin").val(tableStyle.bottomCellMargin);
-      $("#left-cell-margin").val(tableStyle.leftCellMargin);
-      $("#right-cell-margin").val(tableStyle.rightCellMargin);
-      $("#cell-spacing").val(tableStyle.cellSpacing);
+      (document.getElementById("alignment") as HTMLInputElement).value = tableStyle.alignment;
+      (document.getElementById("allow-break-across-page") as HTMLInputElement).value = tableStyle.allowBreakAcrossPage.toString();
+      (document.getElementById("top-cell-margin") as HTMLInputElement).value = tableStyle.topCellMargin;
+      (document.getElementById("bottom-cell-margin") as HTMLInputElement).value = tableStyle.bottomCellMargin;
+      (document.getElementById("left-cell-margin") as HTMLInputElement).value = tableStyle.leftCellMargin;
+      (document.getElementById("right-cell-margin") as HTMLInputElement).value = tableStyle.rightCellMargin;
+      (document.getElementById("cell-spacing") as HTMLInputElement).value = tableStyle.cellSpacing;
+    });
+Word.TextFrame:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
+
+
+    await Word.run(async (context) => {
+      // Gets the text frame of the first text box in the main document.
+      const shape: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirstOrNullObject();
+      shape.load("textFrame");
+      await context.sync();
+
+      if (shape.isNullObject) {
+        console.log("No shapes with text boxes found in the main document.");
+        return;
+      }
+
+      console.log("Text frame of first text box:", shape.textFrame);
+    });
+Word.TextFrame#autoSizeSetting:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
+
+
+    await Word.run(async (context) => {
+      // Sets text frame properties of the first text box in the main document.
+      const shape: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirstOrNullObject();
+      shape.load("textFrame");
+      await context.sync();
+
+      if (shape.isNullObject) {
+        console.log("No shapes with text boxes found in the main document.");
+        return;
+      }
+
+      const textFrame: Word.TextFrame = shape.textFrame;
+      textFrame.verticalAlignment = Word.ShapeTextVerticalAlignment.bottom;
+      textFrame.orientation = Word.ShapeTextOrientation.vertical270;
+      textFrame.autoSizeSetting = Word.ShapeAutoSize.shapeToFitText;
+
+      console.log("The first text box's text frame properties were updated:", textFrame);
+    });
+Word.TextFrame#orientation:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
+
+
+    await Word.run(async (context) => {
+      // Sets text frame properties of the first text box in the main document.
+      const shape: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirstOrNullObject();
+      shape.load("textFrame");
+      await context.sync();
+
+      if (shape.isNullObject) {
+        console.log("No shapes with text boxes found in the main document.");
+        return;
+      }
+
+      const textFrame: Word.TextFrame = shape.textFrame;
+      textFrame.verticalAlignment = Word.ShapeTextVerticalAlignment.bottom;
+      textFrame.orientation = Word.ShapeTextOrientation.vertical270;
+      textFrame.autoSizeSetting = Word.ShapeAutoSize.shapeToFitText;
+
+      console.log("The first text box's text frame properties were updated:", textFrame);
     });
-'Word.TrackedChange:class':
+Word.TextFrame#verticalAlignment:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml
+
+
+    await Word.run(async (context) => {
+      // Sets text frame properties of the first text box in the main document.
+      const shape: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.textBox]).getFirstOrNullObject();
+      shape.load("textFrame");
+      await context.sync();
+
+      if (shape.isNullObject) {
+        console.log("No shapes with text boxes found in the main document.");
+        return;
+      }
+
+      const textFrame: Word.TextFrame = shape.textFrame;
+      textFrame.verticalAlignment = Word.ShapeTextVerticalAlignment.bottom;
+      textFrame.orientation = Word.ShapeTextOrientation.vertical270;
+      textFrame.autoSizeSetting = Word.ShapeAutoSize.shapeToFitText;
+
+      console.log("The first text box's text frame properties were updated:", textFrame);
+    });
+Word.TrackedChange:class:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-tracked-changes.yaml
@@ -24269,7 +30489,7 @@
 
       console.log(nextTrackedChange);
     });
-'Word.TrackedChange#accept:member(1)':
+Word.TrackedChange#accept:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-tracked-changes.yaml
@@ -24288,7 +30508,7 @@
       trackedChange.accept();
       console.log("Accepted the first tracked change.");
     });
-'Word.TrackedChange#getNext:member(1)':
+Word.TrackedChange#getNext:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-tracked-changes.yaml
@@ -24312,7 +30532,7 @@
 
       console.log(nextTrackedChange);
     });
-'Word.TrackedChange#getRange:member(1)':
+Word.TrackedChange#getRange:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-tracked-changes.yaml
@@ -24332,7 +30552,7 @@
 
       console.log("range.text: " + range.text);
     });
-'Word.TrackedChange#reject:member(1)':
+Word.TrackedChange#reject:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-tracked-changes.yaml
@@ -24351,7 +30571,7 @@
       trackedChange.reject();
       console.log("Rejected the first tracked change.");
     });
-'Word.TrackedChangeCollection:class':
+Word.TrackedChangeCollection:class:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-tracked-changes.yaml
@@ -24371,7 +30591,7 @@
 
       console.log("range.text: " + range.text);
     });
-'Word.TrackedChangeCollection#acceptAll:member(1)':
+Word.TrackedChangeCollection#acceptAll:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-tracked-changes.yaml
@@ -24385,7 +30605,7 @@
       trackedChanges.acceptAll();
       console.log("Accepted all tracked changes.");
     });
-'Word.TrackedChangeCollection#getFirst:member(1)':
+Word.TrackedChangeCollection#getFirst:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-tracked-changes.yaml
@@ -24405,7 +30625,7 @@
 
       console.log("range.text: " + range.text);
     });
-'Word.TrackedChangeCollection#rejectAll:member(1)':
+Word.TrackedChangeCollection#rejectAll:member(1):
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-tracked-changes.yaml
@@ -24419,7 +30639,7 @@
       trackedChanges.rejectAll();
       console.log("Rejected all tracked changes.");
     });
-'Word.TrackedChangeType:enum':
+Word.TrackedChangeType:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-tracked-changes.yaml
@@ -24443,7 +30663,7 @@
 
       console.log(nextTrackedChange);
     });
-'Word.TrailingCharacter:enum':
+Word.TrailingCharacter:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/manage-list-styles.yaml
@@ -24452,7 +30672,7 @@
     // Gets the properties of the specified style.
 
     await Word.run(async (context) => {
-      const styleName = $("#style-name-to-use").val() as string;
+      const styleName = (document.getElementById("style-name-to-use") as HTMLInputElement).value;
       if (styleName == "") {
         console.warn("Enter a style name to get properties.");
         return;
@@ -24479,7 +30699,7 @@
         console.log(`List levels of the '${styleName}' style:`, listLevels);
       }
     });
-'Word.VerticalAlignment:enum':
+Word.VerticalAlignment:enum:
   - >-
     // Link to full sample:
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml
@@ -24496,3 +30716,153 @@
 
       console.log(`Details about the alignment of the first table's first row:`, `- Horizontal alignment of every cell in the row: ${firstTableRow.horizontalAlignment}`, `- Vertical alignment of every cell in the row: ${firstTableRow.verticalAlignment}`);
     });
+Word.Window:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
+
+
+    await Word.run(async (context) => {
+      // Gets the first paragraph of each page.
+      console.log("Getting first paragraph of each page...");
+
+      // Get the active window.
+      const activeWindow: Word.Window = context.document.activeWindow;
+      activeWindow.load();
+
+      // Get the active pane.
+      const activePane: Word.Pane = activeWindow.activePane;
+      activePane.load();
+
+      // Get all pages.
+      const pages: Word.PageCollection = activePane.pages;
+      pages.load();
+
+      await context.sync();
+
+      // Get page index and paragraphs of each page.
+      const pagesIndexes = [];
+      const pagesNumberOfParagraphs = [];
+      const pagesFirstParagraphText = [];
+      for (let i = 0; i < pages.items.length; i++) {
+        const page = pages.items[i];
+        page.load("index");
+        pagesIndexes.push(page);
+
+        const paragraphs = page.getRange().paragraphs;
+        paragraphs.load("items/length");
+        pagesNumberOfParagraphs.push(paragraphs);
+
+        const firstParagraph = paragraphs.getFirst();
+        firstParagraph.load("text");
+        pagesFirstParagraphText.push(firstParagraph);
+      }
+
+      await context.sync();
+
+      for (let i = 0; i < pagesIndexes.length; i++) {
+        console.log(`Page index: ${pagesIndexes[i].index}`);
+        console.log(`Number of paragraphs: ${pagesNumberOfParagraphs[i].items.length}`);
+        console.log("First paragraph's text:", pagesFirstParagraphText[i].text);
+      }
+    });
+Word.Window#close:member(1):
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/close-document-window.yaml
+
+
+    await Word.run(async (context) => {
+      // Closes the document window, prompting to save if this is a new document.
+      const window: Word.Window = context.document.activeWindow;
+      const closeOptions: Word.WindowCloseOptions = { saveChanges: Word.SaveConfiguration.promptToSaveChanges };
+      console.log("About to close the document window...");
+      window.close(closeOptions);
+    });
+Word.Window#activePane:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
+
+
+    await Word.run(async (context) => {
+      // Gets the pages enclosing the viewport.
+
+      // Get the active window.
+      const activeWindow: Word.Window = context.document.activeWindow;
+      activeWindow.load();
+
+      // Get the active pane.
+      const activePane: Word.Pane = activeWindow.activePane;
+      activePane.load();
+
+      // Get pages enclosing the viewport.
+      const pages: Word.PageCollection = activePane.pagesEnclosingViewport;
+      pages.load();
+
+      await context.sync();
+
+      // Log the number of pages.
+      const pageCount = pages.items.length;
+      console.log(`Number of pages enclosing the viewport: ${pageCount}`);
+
+      // Log index info of these pages.
+      const pagesIndexes = [];
+      for (let i = 0; i < pageCount; i++) {
+        const page = pages.items[i];
+        page.load("index");
+        pagesIndexes.push(page);
+      }
+
+      await context.sync();
+
+      for (let i = 0; i < pagesIndexes.length; i++) {
+        console.log(`Page index: ${pagesIndexes[i].index}`);
+      }
+    });
+Word.Window#panes:member:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
+
+
+    await Word.run(async (context) => {
+      // Gets all the panes in the active document window.
+
+      // Get the active window.
+      const activeWindow: Word.Window = context.document.activeWindow;
+      activeWindow.load("panes/items/length");
+
+      await context.sync();
+
+      const panes: Word.PaneCollection = activeWindow.panes;
+      console.log(`Number of panes in the current document window: ${panes.items.length}`);
+    });
+Word.WindowCloseOptions:interface:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/close-document-window.yaml
+
+
+    await Word.run(async (context) => {
+      // Closes the document window, prompting to save if this is a new document.
+      const window: Word.Window = context.document.activeWindow;
+      const closeOptions: Word.WindowCloseOptions = { saveChanges: Word.SaveConfiguration.promptToSaveChanges };
+      console.log("About to close the document window...");
+      window.close(closeOptions);
+    });
+Word.WindowCollection:class:
+  - >-
+    // Link to full sample:
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
+
+
+    await Word.run(async (context) => {
+      // Gets the document windows.
+      const windows: Word.WindowCollection = context.document.windows;
+      windows.load("windows/items/length");
+
+      await context.sync();
+
+      console.log(`Number of windows for this document: ${windows.items.length}`);
+    });
diff --git a/tsconfig.json b/tsconfig.json
index 0fd566d63..a3ff66e69 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,12 +1,13 @@
 {
     "compilerOptions": {
-        "target": "es6",
+        "target": "es2018",
         "module": "commonjs",
         "moduleResolution": "node",
         "sourceMap": true,
         "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
         "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
         "removeComments": false,
         "noImplicitAny": false,
         "noEmitOnError": true,
@@ -17,8 +18,10 @@
         "rootDir": "config",
         "lib": [
             "dom",
-            "es2015"
+            "es2018"
         ],
-        "pretty": true
+        "pretty": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true
     }
 }
\ No newline at end of file
diff --git a/view-prod/excel.json b/view-prod/excel.json
index 3ff4c77a9..38e8b6628 100644
--- a/view-prod/excel.json
+++ b/view-prod/excel.json
@@ -17,10 +17,13 @@
   "excel-chart-title-format": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-title-format.yaml",
   "excel-chart-data-source": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-source.yaml",
   "excel-chart-trendlines": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-trendlines.yaml",
-  "excel-comment-basics": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-basics.yaml",
-  "excel-comment-mentions": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-mentions.yaml",
-  "excel-comment-replies": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-replies.yaml",
-  "excel-comment-resolution": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-resolution.yaml",
+  "excel-chart-data-labels": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-labels.yaml",
+  "excel-chart-leader-lines": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-leader-lines.yaml",
+  "excel-comment-basics": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-basics.yaml",
+  "excel-comment-mentions": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-mentions.yaml",
+  "excel-comment-replies": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-replies.yaml",
+  "excel-comment-resolution": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-resolution.yaml",
+  "excel-note-basics": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/excel-note-basics.yaml",
   "excel-range-conditional-formatting-basic": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml",
   "excel-range-conditional-formatting-advanced": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/14-conditional-formatting/conditional-formatting-advanced.yaml",
   "excel-custom-functions-basic": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/16-custom-functions/basic-function.yaml",
@@ -29,16 +32,18 @@
   "excel-custom-functions-web-call": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/16-custom-functions/web-call-function.yaml",
   "excel-custom-functions-errors": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/16-custom-functions/custom-functions-errors.yaml",
   "excel-data-types-custom-functions": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/16-custom-functions/data-types-custom-functions.yaml",
+  "excel-custom-functions-custom-enum": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/16-custom-functions/custom-enum.yaml",
   "excel-custom-xml-parts-create-set-get-and-delete-custom-xml-parts": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml",
   "excel-custom-xml-parts-test-xml-for-unique-namespace": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml",
   "excel-chart-chart-title-ts": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/private-samples/excel/20-chart/chart-title-ts.yaml",
-  "excel-data-types-formatted-number": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-formatted-number.yaml",
+  "excel-data-types-doubles": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-formatted-number.yaml",
   "excel-data-types-web-image": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-web-image.yaml",
   "excel-data-types-entity-values": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-entity-values.yaml",
   "excel-data-types-error-values": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-error-values.yaml",
   "excel-data-types-icons": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-entity-icons.yaml",
   "excel-data-types-entity-attribution": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-entity-attribution.yaml",
   "excel-data-types-references": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-references.yaml",
+  "excel-data-types-basic-types": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/20-data-types/data-types-basic-types.yaml",
   "excel-data-validation": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/22-data-validation/data-validation.yaml",
   "excel-document-get-file-in-slices-async": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/26-document/get-file-in-slices-async.yaml",
   "excel-document-properties": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/26-document/properties.yaml",
@@ -92,12 +97,14 @@
   "excel-range-get-range-edge": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-get-range-edge.yaml",
   "excel-direct-dependents": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-direct-dependents.yaml",
   "excel-range-dependents": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-dependents.yaml",
+  "excel-cell-controls": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-cell-control.yaml",
   "excel-shape-create-and-delete": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-create-and-delete.yaml",
   "excel-shape-images": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-images.yaml",
   "excel-shape-lines": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-lines.yaml",
   "excel-shape-move-and-order": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-move-and-order.yaml",
   "excel-shape-groups": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-groups.yaml",
   "excel-shape-textboxes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-textboxes.yaml",
+  "excel-shape-get-active": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-get-active.yaml",
   "excel-table-add-rows-and-columns-to-a-table": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/46-table/add-rows-and-columns-to-a-table.yaml",
   "excel-table-convert-range-to-table": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/46-table/convert-range-to-table.yaml",
   "excel-table-create-table": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/46-table/create-table.yaml",
diff --git a/view-prod/outlook.json b/view-prod/outlook.json
index 21332af7f..2b044b706 100644
--- a/view-prod/outlook.json
+++ b/view-prod/outlook.json
@@ -47,13 +47,14 @@
   "outlook-mime-headers-get-internet-headers-message-read": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/70-mime-headers/get-internet-headers-message-read.yaml",
   "outlook-mime-headers-manage-custom-internet-headers-message-compose": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml",
   "outlook-regex-matches-contextual": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/75-regex-matches/contextual.yaml",
-  "outlook-tokens-and-service-calls-ids-and-urls": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml",
-  "outlook-tokens-and-service-calls-user-identity-token": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/user-identity-token.yaml",
-  "outlook-tokens-and-service-calls-user-callback-token": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/user-callback-token.yaml",
-  "outlook-tokens-and-service-calls-make-ews-request-async": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/make-ews-request-async.yaml",
-  "outlook-tokens-and-service-calls-send-message-using-make-ews-request-async": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/send-message-using-make-ews-request-async.yaml",
-  "outlook-tokens-and-service-calls-get-icaluid-as-organizer": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-organizer.yaml",
-  "outlook-tokens-and-service-calls-get-icaluid-as-attendee": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-attendee.yaml",
+  "outlook-events-drag-drop-item": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/80-events/drag-drop-item.yaml",
+  "outlook-tokens-and-service-calls-ids-and-urls": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/ids-and-urls.yaml",
+  "outlook-tokens-and-service-calls-user-identity-token": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/user-identity-token.yaml",
+  "outlook-tokens-and-service-calls-user-callback-token": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/user-callback-token.yaml",
+  "outlook-tokens-and-service-calls-make-ews-request-async": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/make-ews-request-async.yaml",
+  "outlook-tokens-and-service-calls-send-message-using-make-ews-request-async": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/send-message-using-make-ews-request-async.yaml",
+  "outlook-tokens-and-service-calls-get-icaluid-as-organizer": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/get-icaluid-as-organizer.yaml",
+  "outlook-tokens-and-service-calls-get-icaluid-as-attendee": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/85-tokens-for-exchange-on-premises/get-icaluid-as-attendee.yaml",
   "outlook-other-item-apis-get-subject-read": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-subject-read.yaml",
   "outlook-other-item-apis-get-set-subject-compose": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-set-subject-compose.yaml",
   "outlook-item-body-set-selected-data": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/set-selected-data.yaml",
@@ -82,6 +83,9 @@
   "outlook-get-conversation-index": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-conversation-index.yaml",
   "outlook-get-item-class-async": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-item-class-async.yaml",
   "outlook-other-item-apis-item-id-compose": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/item-id-compose.yaml",
+  "outlook-send-async": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/send-async.yaml",
+  "outlook-other-item-apis-get-loaded-message-properties": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/90-other-item-apis/get-loaded-message-properties.yaml",
   "outlook-get-set-isalldayevent": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/99-preview-apis/get-set-isalldayevent.yaml",
+  "outlook-get-token-status": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/99-preview-apis/get-token-status.yaml",
   "outlook-set-displayed-body-subject": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml"
 }
\ No newline at end of file
diff --git a/view-prod/powerpoint.json b/view-prod/powerpoint.json
index 6563b54a1..3174b1a57 100644
--- a/view-prod/powerpoint.json
+++ b/view-prod/powerpoint.json
@@ -7,13 +7,17 @@
   "powerpoint-basics-insert-image": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/images/insert-image.yaml",
   "powerpoint-basics-insert-svg": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/images/insert-svg.yaml",
   "powerpoint-scenarios-searches-wikipedia-api": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/scenarios/searches-wikipedia-api.yaml",
+  "powerpoint-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml",
   "powerpoint-shapes-get-set-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml",
   "powerpoint-shapes-get-shapes-by-type": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml",
-  "powerpoint-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml",
+  "powerpoint-shapes-add-modify-tables": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/add-modify-tables.yaml",
+  "powerpoint-shapes-binding-to-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/binding-to-shapes.yaml",
+  "powerpoint-shapes-group-ungroup-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/group-ungroup-shapes.yaml",
   "powerpoint-add-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml",
   "powerpoint-insert-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/insert-slides.yaml",
   "powerpoint-basics-get-slide-metadata": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-slide-metadata.yaml",
   "powerpoint-slide-management-get-set-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/get-set-slides.yaml",
+  "powerpoint-slide-management-export-import-slide": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/export-import-slide.yaml",
   "powerpoint-tags": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/tags/tags.yaml",
   "powerpoint-text-get-set-textrange": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml"
 }
\ No newline at end of file
diff --git a/view-prod/word.json b/view-prod/word.json
index c3af24568..af44ad5a0 100644
--- a/view-prod/word.json
+++ b/view-prod/word.json
@@ -10,6 +10,8 @@
   "word-content-controls-content-control-onexited-event": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-onexited-event.yaml",
   "word-content-controls-content-control-ondeleted-event": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/content-control-ondeleted-event.yaml",
   "word-content-controls-insert-and-change-checkbox-content-control": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml",
+  "word-content-controls-insert-and-change-combo-box-content-control": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml",
+  "word-content-controls-insert-and-change-dropdown-list-content-control": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml",
   "word-content-controls-get-change-tracking-states": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/10-content-controls/get-change-tracking-states.yaml",
   "word-images-insert-and-get-pictures": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/15-images/insert-and-get-pictures.yaml",
   "word-lists-insert-list": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/20-lists/insert-list.yaml",
@@ -32,9 +34,14 @@
   "word-ranges-scroll-to-range": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/scroll-to-range.yaml",
   "word-ranges-split-words-of-first-paragraph": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/split-words-of-first-paragraph.yaml",
   "word-ranges-compare-location": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/compare-location.yaml",
+  "word-ranges-get-pages": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml",
   "word-tables-table-cell-access": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/table-cell-access.yaml",
   "word-tables-manage-formatting": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml",
   "word-tables-manage-custom-style": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-custom-style.yaml",
+  "word-shapes-manage-shapes-text-boxes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml",
+  "word-shapes-manage-geometric-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-geometric-shapes.yaml",
+  "word-shapes-group-ungroup": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml",
+  "word-shapes-manage-canvases": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-canvases.yaml",
   "word-document-manage-body": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml",
   "word-document-insert-section-breaks": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-section-breaks.yaml",
   "word-document-insert-external-document": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-external-document.yaml",
@@ -53,8 +60,8 @@
   "word-document-compare-documents": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/compare-documents.yaml",
   "word-scenarios-doc-assembly": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/doc-assembly.yaml",
   "word-scenarios-multiple-property-set": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/multiple-property-set.yaml",
-  "word-insert-and-change-combo-box-content-control": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml",
+  "word-scenarios-correlated-objects-pattern": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/90-scenarios/correlated-objects-pattern.yaml",
+  "word-close-document-window": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/close-document-window.yaml",
   "word-insert-and-change-content-controls": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-content-controls.yaml",
-  "word-insert-and-change-dropdown-list-content-control": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml",
   "word-manage-comments": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/99-preview-apis/manage-comments.yaml"
 }
\ No newline at end of file
diff --git a/view/excel.json b/view/excel.json
index 7f9d59fff..6c50b9c80 100644
--- a/view/excel.json
+++ b/view/excel.json
@@ -17,10 +17,13 @@
   "excel-chart-title-format": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/10-chart/chart-title-format.yaml",
   "excel-chart-data-source": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/10-chart/chart-data-source.yaml",
   "excel-chart-trendlines": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/10-chart/chart-trendlines.yaml",
-  "excel-comment-basics": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comment/comment-basics.yaml",
-  "excel-comment-mentions": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comment/comment-mentions.yaml",
-  "excel-comment-replies": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comment/comment-replies.yaml",
-  "excel-comment-resolution": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comment/comment-resolution.yaml",
+  "excel-chart-data-labels": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/10-chart/chart-data-labels.yaml",
+  "excel-chart-leader-lines": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/10-chart/chart-leader-lines.yaml",
+  "excel-comment-basics": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comments-and-notes/comment-basics.yaml",
+  "excel-comment-mentions": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comments-and-notes/comment-mentions.yaml",
+  "excel-comment-replies": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comments-and-notes/comment-replies.yaml",
+  "excel-comment-resolution": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comments-and-notes/comment-resolution.yaml",
+  "excel-note-basics": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comments-and-notes/excel-note-basics.yaml",
   "excel-range-conditional-formatting-basic": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml",
   "excel-range-conditional-formatting-advanced": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/14-conditional-formatting/conditional-formatting-advanced.yaml",
   "excel-custom-functions-basic": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/16-custom-functions/basic-function.yaml",
@@ -29,16 +32,18 @@
   "excel-custom-functions-web-call": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/16-custom-functions/web-call-function.yaml",
   "excel-custom-functions-errors": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/16-custom-functions/custom-functions-errors.yaml",
   "excel-data-types-custom-functions": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/16-custom-functions/data-types-custom-functions.yaml",
+  "excel-custom-functions-custom-enum": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/16-custom-functions/custom-enum.yaml",
   "excel-custom-xml-parts-create-set-get-and-delete-custom-xml-parts": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml",
   "excel-custom-xml-parts-test-xml-for-unique-namespace": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml",
   "excel-chart-chart-title-ts": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/private-samples/excel/20-chart/chart-title-ts.yaml",
-  "excel-data-types-formatted-number": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/20-data-types/data-types-formatted-number.yaml",
+  "excel-data-types-doubles": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/20-data-types/data-types-formatted-number.yaml",
   "excel-data-types-web-image": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/20-data-types/data-types-web-image.yaml",
   "excel-data-types-entity-values": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/20-data-types/data-types-entity-values.yaml",
   "excel-data-types-error-values": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/20-data-types/data-types-error-values.yaml",
   "excel-data-types-icons": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/20-data-types/data-types-entity-icons.yaml",
   "excel-data-types-entity-attribution": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/20-data-types/data-types-entity-attribution.yaml",
   "excel-data-types-references": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/20-data-types/data-types-references.yaml",
+  "excel-data-types-basic-types": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/20-data-types/data-types-basic-types.yaml",
   "excel-data-validation": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/22-data-validation/data-validation.yaml",
   "excel-document-get-file-in-slices-async": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/26-document/get-file-in-slices-async.yaml",
   "excel-document-properties": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/26-document/properties.yaml",
@@ -92,12 +97,14 @@
   "excel-range-get-range-edge": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/42-range/range-get-range-edge.yaml",
   "excel-direct-dependents": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/42-range/range-direct-dependents.yaml",
   "excel-range-dependents": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/42-range/range-dependents.yaml",
+  "excel-cell-controls": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/42-range/range-cell-control.yaml",
   "excel-shape-create-and-delete": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/44-shape/shape-create-and-delete.yaml",
   "excel-shape-images": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/44-shape/shape-images.yaml",
   "excel-shape-lines": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/44-shape/shape-lines.yaml",
   "excel-shape-move-and-order": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/44-shape/shape-move-and-order.yaml",
   "excel-shape-groups": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/44-shape/shape-groups.yaml",
   "excel-shape-textboxes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/44-shape/shape-textboxes.yaml",
+  "excel-shape-get-active": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/44-shape/shape-get-active.yaml",
   "excel-table-add-rows-and-columns-to-a-table": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/46-table/add-rows-and-columns-to-a-table.yaml",
   "excel-table-convert-range-to-table": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/46-table/convert-range-to-table.yaml",
   "excel-table-create-table": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/46-table/create-table.yaml",
diff --git a/view/outlook.json b/view/outlook.json
index fa6113898..0a280d716 100644
--- a/view/outlook.json
+++ b/view/outlook.json
@@ -47,13 +47,14 @@
   "outlook-mime-headers-get-internet-headers-message-read": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/70-mime-headers/get-internet-headers-message-read.yaml",
   "outlook-mime-headers-manage-custom-internet-headers-message-compose": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml",
   "outlook-regex-matches-contextual": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/75-regex-matches/contextual.yaml",
-  "outlook-tokens-and-service-calls-ids-and-urls": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml",
-  "outlook-tokens-and-service-calls-user-identity-token": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/user-identity-token.yaml",
-  "outlook-tokens-and-service-calls-user-callback-token": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/user-callback-token.yaml",
-  "outlook-tokens-and-service-calls-make-ews-request-async": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/make-ews-request-async.yaml",
-  "outlook-tokens-and-service-calls-send-message-using-make-ews-request-async": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/send-message-using-make-ews-request-async.yaml",
-  "outlook-tokens-and-service-calls-get-icaluid-as-organizer": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-organizer.yaml",
-  "outlook-tokens-and-service-calls-get-icaluid-as-attendee": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-attendee.yaml",
+  "outlook-events-drag-drop-item": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/80-events/drag-drop-item.yaml",
+  "outlook-tokens-and-service-calls-ids-and-urls": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-for-exchange-on-premises/ids-and-urls.yaml",
+  "outlook-tokens-and-service-calls-user-identity-token": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-for-exchange-on-premises/user-identity-token.yaml",
+  "outlook-tokens-and-service-calls-user-callback-token": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-for-exchange-on-premises/user-callback-token.yaml",
+  "outlook-tokens-and-service-calls-make-ews-request-async": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-for-exchange-on-premises/make-ews-request-async.yaml",
+  "outlook-tokens-and-service-calls-send-message-using-make-ews-request-async": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-for-exchange-on-premises/send-message-using-make-ews-request-async.yaml",
+  "outlook-tokens-and-service-calls-get-icaluid-as-organizer": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-for-exchange-on-premises/get-icaluid-as-organizer.yaml",
+  "outlook-tokens-and-service-calls-get-icaluid-as-attendee": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/85-tokens-for-exchange-on-premises/get-icaluid-as-attendee.yaml",
   "outlook-other-item-apis-get-subject-read": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/90-other-item-apis/get-subject-read.yaml",
   "outlook-other-item-apis-get-set-subject-compose": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/90-other-item-apis/get-set-subject-compose.yaml",
   "outlook-item-body-set-selected-data": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/90-other-item-apis/set-selected-data.yaml",
@@ -82,6 +83,9 @@
   "outlook-get-conversation-index": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/90-other-item-apis/get-conversation-index.yaml",
   "outlook-get-item-class-async": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/90-other-item-apis/get-item-class-async.yaml",
   "outlook-other-item-apis-item-id-compose": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/90-other-item-apis/item-id-compose.yaml",
+  "outlook-send-async": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/90-other-item-apis/send-async.yaml",
+  "outlook-other-item-apis-get-loaded-message-properties": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/90-other-item-apis/get-loaded-message-properties.yaml",
   "outlook-get-set-isalldayevent": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/99-preview-apis/get-set-isalldayevent.yaml",
+  "outlook-get-token-status": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/99-preview-apis/get-token-status.yaml",
   "outlook-set-displayed-body-subject": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/outlook/99-preview-apis/set-displayed-body-subject.yaml"
 }
\ No newline at end of file
diff --git a/view/powerpoint.json b/view/powerpoint.json
index 7f1b28742..76e7bddc5 100644
--- a/view/powerpoint.json
+++ b/view/powerpoint.json
@@ -7,13 +7,17 @@
   "powerpoint-basics-insert-image": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/images/insert-image.yaml",
   "powerpoint-basics-insert-svg": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/images/insert-svg.yaml",
   "powerpoint-scenarios-searches-wikipedia-api": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/scenarios/searches-wikipedia-api.yaml",
+  "powerpoint-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/shapes.yaml",
   "powerpoint-shapes-get-set-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/get-set-shapes.yaml",
   "powerpoint-shapes-get-shapes-by-type": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/get-shapes-by-type.yaml",
-  "powerpoint-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/shapes.yaml",
+  "powerpoint-shapes-add-modify-tables": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/add-modify-tables.yaml",
+  "powerpoint-shapes-binding-to-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/binding-to-shapes.yaml",
+  "powerpoint-shapes-group-ungroup-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/group-ungroup-shapes.yaml",
   "powerpoint-add-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/add-slides.yaml",
   "powerpoint-insert-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/insert-slides.yaml",
   "powerpoint-basics-get-slide-metadata": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/get-slide-metadata.yaml",
   "powerpoint-slide-management-get-set-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/get-set-slides.yaml",
+  "powerpoint-slide-management-export-import-slide": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/export-import-slide.yaml",
   "powerpoint-tags": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/tags/tags.yaml",
   "powerpoint-text-get-set-textrange": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/text/get-set-textrange.yaml"
 }
\ No newline at end of file
diff --git a/view/word.json b/view/word.json
index fc36e63cc..3e0da2a29 100644
--- a/view/word.json
+++ b/view/word.json
@@ -10,6 +10,8 @@
   "word-content-controls-content-control-onexited-event": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/10-content-controls/content-control-onexited-event.yaml",
   "word-content-controls-content-control-ondeleted-event": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/10-content-controls/content-control-ondeleted-event.yaml",
   "word-content-controls-insert-and-change-checkbox-content-control": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/10-content-controls/insert-and-change-checkbox-content-control.yaml",
+  "word-content-controls-insert-and-change-combo-box-content-control": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml",
+  "word-content-controls-insert-and-change-dropdown-list-content-control": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml",
   "word-content-controls-get-change-tracking-states": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/10-content-controls/get-change-tracking-states.yaml",
   "word-images-insert-and-get-pictures": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/15-images/insert-and-get-pictures.yaml",
   "word-lists-insert-list": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/20-lists/insert-list.yaml",
@@ -32,9 +34,14 @@
   "word-ranges-scroll-to-range": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/35-ranges/scroll-to-range.yaml",
   "word-ranges-split-words-of-first-paragraph": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/35-ranges/split-words-of-first-paragraph.yaml",
   "word-ranges-compare-location": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/35-ranges/compare-location.yaml",
+  "word-ranges-get-pages": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/35-ranges/get-pages.yaml",
   "word-tables-table-cell-access": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/40-tables/table-cell-access.yaml",
   "word-tables-manage-formatting": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/40-tables/manage-formatting.yaml",
   "word-tables-manage-custom-style": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/40-tables/manage-custom-style.yaml",
+  "word-shapes-manage-shapes-text-boxes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/45-shapes/manage-shapes-text-boxes.yaml",
+  "word-shapes-manage-geometric-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/45-shapes/manage-geometric-shapes.yaml",
+  "word-shapes-group-ungroup": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/45-shapes/group-ungroup.yaml",
+  "word-shapes-manage-canvases": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/45-shapes/manage-canvases.yaml",
   "word-document-manage-body": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/50-document/manage-body.yaml",
   "word-document-insert-section-breaks": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/50-document/insert-section-breaks.yaml",
   "word-document-insert-external-document": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/50-document/insert-external-document.yaml",
@@ -53,8 +60,8 @@
   "word-document-compare-documents": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/50-document/compare-documents.yaml",
   "word-scenarios-doc-assembly": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/90-scenarios/doc-assembly.yaml",
   "word-scenarios-multiple-property-set": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/90-scenarios/multiple-property-set.yaml",
-  "word-insert-and-change-combo-box-content-control": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/99-preview-apis/insert-and-change-combo-box-content-control.yaml",
+  "word-scenarios-correlated-objects-pattern": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/90-scenarios/correlated-objects-pattern.yaml",
+  "word-close-document-window": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/99-preview-apis/close-document-window.yaml",
   "word-insert-and-change-content-controls": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/99-preview-apis/insert-and-change-content-controls.yaml",
-  "word-insert-and-change-dropdown-list-content-control": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/99-preview-apis/insert-and-change-dropdown-list-content-control.yaml",
   "word-manage-comments": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/99-preview-apis/manage-comments.yaml"
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
deleted file mode 100644
index c24d793c0..000000000
--- a/yarn.lock
+++ /dev/null
@@ -1,968 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@babel/code-frame@^7.0.0":
-  version "7.15.8"
-  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.15.8.tgz"
-  integrity sha512-2IAnmn8zbvC/jKYhq5Ki9I+DwjlrtMPUCH/CpHvqI4dNnlwHwsxoIhlc8WcYY5LSYknXQtAlFYuHfqAFCvQ4Wg==
-  dependencies:
-    "@babel/highlight" "^7.14.5"
-
-"@babel/helper-validator-identifier@^7.14.5":
-  version "7.15.7"
-  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz"
-  integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
-
-"@babel/highlight@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz"
-  integrity sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.14.5"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
-"@fast-csv/format@4.3.5":
-  version "4.3.5"
-  resolved "https://registry.npmjs.org/@fast-csv/format/-/format-4.3.5.tgz"
-  integrity sha512-8iRn6QF3I8Ak78lNAa+Gdl5MJJBM5vRHivFtMRUWINdevNo00K7OXxS2PshawLKTejVwieIlPmK5YlLu6w4u8A==
-  dependencies:
-    "@types/node" "^14.0.1"
-    lodash.escaperegexp "^4.1.2"
-    lodash.isboolean "^3.0.3"
-    lodash.isequal "^4.5.0"
-    lodash.isfunction "^3.0.9"
-    lodash.isnil "^4.0.0"
-
-"@fast-csv/parse@4.3.6":
-  version "4.3.6"
-  resolved "https://registry.npmjs.org/@fast-csv/parse/-/parse-4.3.6.tgz"
-  integrity sha512-uRsLYksqpbDmWaSmzvJcuApSEe38+6NQZBUsuAyMZKqHxH0g1wcJgsKUvN3WC8tewaqFjBMMGrkHmC+T7k8LvA==
-  dependencies:
-    "@types/node" "^14.0.1"
-    lodash.escaperegexp "^4.1.2"
-    lodash.groupby "^4.6.0"
-    lodash.isfunction "^3.0.9"
-    lodash.isnil "^4.0.0"
-    lodash.isundefined "^3.0.1"
-    lodash.uniq "^4.5.0"
-
-"@types/chalk@0.4.31":
-  version "0.4.31"
-  resolved "https://registry.npmjs.org/@types/chalk/-/chalk-0.4.31.tgz"
-  integrity sha1-ox10JBprHtu5c8822XooloNKUfk=
-
-"@types/fs-extra@3.0.1":
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-3.0.1.tgz"
-  integrity sha1-eCk6aKrT2GZ1Ho/P1k19ydARdHY=
-  dependencies:
-    "@types/node" "*"
-
-"@types/glob@*":
-  version "7.1.4"
-  resolved "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz"
-  integrity sha512-w+LsMxKyYQm347Otw+IfBXOv9UWVjpHpCDdbBMt8Kz/xbvCYNjP+0qPh91Km3iKfSRLBB0P7fAMf0KHrPu+MyA==
-  dependencies:
-    "@types/minimatch" "*"
-    "@types/node" "*"
-
-"@types/js-yaml@^3.12.0":
-  version "3.12.7"
-  resolved "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-3.12.7.tgz"
-  integrity sha512-S6+8JAYTE1qdsc9HMVsfY7+SgSuUU/Tp6TYTmITW0PZxiyIMvol3Gy//y69Wkhs0ti4py5qgR3uZH6uz/DNzJQ==
-
-"@types/lodash@^4.14.175":
-  version "4.14.175"
-  resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.175.tgz"
-  integrity sha512-XmdEOrKQ8a1Y/yxQFOMbC47G/V2VDO1GvMRnl4O75M4GW/abC5tnfzadQYkqEveqRM1dEJGFFegfPNA2vvx2iw==
-
-"@types/minimatch@*":
-  version "3.0.5"
-  resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz"
-  integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
-
-"@types/node@*":
-  version "16.10.3"
-  resolved "https://registry.npmjs.org/@types/node/-/node-16.10.3.tgz"
-  integrity sha512-ho3Ruq+fFnBrZhUYI46n/bV2GjwzSkwuT4dTf0GkuNFmnb8nq4ny2z9JEVemFi6bdEJanHLlYfy9c6FN9B9McQ==
-
-"@types/node@^11.10.5":
-  version "11.15.54"
-  resolved "https://registry.npmjs.org/@types/node/-/node-11.15.54.tgz"
-  integrity sha512-1RWYiq+5UfozGsU6MwJyFX6BtktcT10XRjvcAQmskCtMcW3tPske88lM/nHv7BQG1w9KBXI1zPGuu5PnNCX14g==
-
-"@types/node@^14.0.1":
-  version "14.17.21"
-  resolved "https://registry.npmjs.org/@types/node/-/node-14.17.21.tgz"
-  integrity sha512-zv8ukKci1mrILYiQOwGSV4FpkZhyxQtuFWGya2GujWg+zVAeRQ4qbaMmWp9vb9889CFA8JECH7lkwCL6Ygg8kA==
-
-"@types/shelljs@^0.8.3":
-  version "0.8.9"
-  resolved "https://registry.npmjs.org/@types/shelljs/-/shelljs-0.8.9.tgz"
-  integrity sha512-flVe1dvlrCyQJN/SGrnBxqHG+RzXrVKsmjD8WS/qYHpq5UPjfq7UWFBENP0ZuOl0g6OpAlL6iBoLSvKYUUmyQw==
-  dependencies:
-    "@types/glob" "*"
-    "@types/node" "*"
-
-ansi-regex@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz"
-  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
-
-ansi-styles@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz"
-  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
-
-ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
-archiver-utils@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz"
-  integrity sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==
-  dependencies:
-    glob "^7.1.4"
-    graceful-fs "^4.2.0"
-    lazystream "^1.0.0"
-    lodash.defaults "^4.2.0"
-    lodash.difference "^4.5.0"
-    lodash.flatten "^4.4.0"
-    lodash.isplainobject "^4.0.6"
-    lodash.union "^4.6.0"
-    normalize-path "^3.0.0"
-    readable-stream "^2.0.0"
-
-archiver@^5.0.0:
-  version "5.3.0"
-  resolved "https://registry.npmjs.org/archiver/-/archiver-5.3.0.tgz"
-  integrity sha512-iUw+oDwK0fgNpvveEsdQ0Ase6IIKztBJU2U0E9MzszMfmVVUyv1QJhS2ITW9ZCqx8dktAxVAjWWkKehuZE8OPg==
-  dependencies:
-    archiver-utils "^2.1.0"
-    async "^3.2.0"
-    buffer-crc32 "^0.2.1"
-    readable-stream "^3.6.0"
-    readdir-glob "^1.0.0"
-    tar-stream "^2.2.0"
-    zip-stream "^4.1.0"
-
-argparse@^1.0.7:
-  version "1.0.10"
-  resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz"
-  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
-  dependencies:
-    sprintf-js "~1.0.2"
-
-async@^3.2.0:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
-  integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
-
-balanced-match@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
-  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
-
-base64-js@^1.3.1:
-  version "1.5.1"
-  resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
-  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
-
-big-integer@^1.6.17:
-  version "1.6.49"
-  resolved "https://registry.npmjs.org/big-integer/-/big-integer-1.6.49.tgz"
-  integrity sha512-KJ7VhqH+f/BOt9a3yMwJNmcZjG53ijWMTjSAGMveQWyLwqIiwkjNP5PFgDob3Snnx86SjDj6I89fIbv0dkQeNw==
-
-binary@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz"
-  integrity sha1-n2BVO8XOjDOG87VTz/R0Yq3sqnk=
-  dependencies:
-    buffers "~0.1.1"
-    chainsaw "~0.1.0"
-
-bl@^4.0.3:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz"
-  integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
-  dependencies:
-    buffer "^5.5.0"
-    inherits "^2.0.4"
-    readable-stream "^3.4.0"
-
-bluebird@~3.4.1:
-  version "3.4.7"
-  resolved "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz"
-  integrity sha1-9y12C+Cbf3bQjtj66Ysomo0F+rM=
-
-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
-buffer-crc32@^0.2.1, buffer-crc32@^0.2.13:
-  version "0.2.13"
-  resolved "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz"
-  integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
-
-buffer-indexof-polyfill@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/buffer-indexof-polyfill/-/buffer-indexof-polyfill-1.0.2.tgz"
-  integrity sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==
-
-buffer@^5.5.0:
-  version "5.7.1"
-  resolved "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz"
-  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
-  dependencies:
-    base64-js "^1.3.1"
-    ieee754 "^1.1.13"
-
-buffers@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz"
-  integrity sha1-skV5w77U1tOWru5tmorn9Ugqt7s=
-
-builtin-modules@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz"
-  integrity sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=
-
-chainsaw@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz"
-  integrity sha1-XqtQsor+WAdNDVgpE4iCi15fvJg=
-  dependencies:
-    traverse ">=0.3.0 <0.4"
-
-chalk@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz"
-  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
-  dependencies:
-    ansi-styles "^2.2.1"
-    escape-string-regexp "^1.0.2"
-    has-ansi "^2.0.0"
-    strip-ansi "^3.0.0"
-    supports-color "^2.0.0"
-
-chalk@^2.0.0, chalk@^2.3.0:
-  version "2.4.2"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
-charm@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/charm/-/charm-1.0.1.tgz"
-  integrity sha1-aFZqelU9T+kXlwMN0YUtDdbvqC0=
-  dependencies:
-    inherits "^2.0.1"
-
-cli-cursor@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/cli-cursor/-/cli-cursor-1.0.2.tgz"
-  integrity sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=
-  dependencies:
-    restore-cursor "^1.0.1"
-
-cli-spinners@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-0.2.0.tgz"
-  integrity sha1-hQeHN5E7iA9uyf/ntl6D7Hd2KE8=
-
-color-convert@^1.9.0:
-  version "1.9.3"
-  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
-  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-
-colors@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz"
-  integrity sha1-FopHAXVran9RoSzgyXv6KMCE7WM=
-
-commander@^2.12.1:
-  version "2.20.3"
-  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
-compress-commons@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.1.tgz"
-  integrity sha512-QLdDLCKNV2dtoTorqgxngQCMA+gWXkM/Nwu7FpeBhk/RdkzimqC3jueb/FDmaZeXh+uby1jkBqE3xArsLBE5wQ==
-  dependencies:
-    buffer-crc32 "^0.2.13"
-    crc32-stream "^4.0.2"
-    normalize-path "^3.0.0"
-    readable-stream "^3.6.0"
-
-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
-
-core-util-is@~1.0.0:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz"
-  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
-
-crc-32@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz"
-  integrity sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==
-  dependencies:
-    exit-on-epipe "~1.0.1"
-    printj "~1.1.0"
-
-crc32-stream@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.2.tgz"
-  integrity sha512-DxFZ/Hk473b/muq1VJ///PMNLj0ZMnzye9thBpmjpJKCc5eMgB95aK8zCGrGfQ90cWo561Te6HK9D+j4KPdM6w==
-  dependencies:
-    crc-32 "^1.2.0"
-    readable-stream "^3.4.0"
-
-dayjs@^1.8.34:
-  version "1.10.7"
-  resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz"
-  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
-
-diff@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz"
-  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
-
-duplexer2@~0.1.4:
-  version "0.1.4"
-  resolved "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz"
-  integrity sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=
-  dependencies:
-    readable-stream "^2.0.2"
-
-end-of-stream@^1.4.1:
-  version "1.4.4"
-  resolved "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz"
-  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
-  dependencies:
-    once "^1.4.0"
-
-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
-  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-
-escape-string-regexp@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz"
-  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
-
-esprima@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz"
-  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
-
-exceljs@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.npmjs.org/exceljs/-/exceljs-4.3.0.tgz"
-  integrity sha512-hTAeo5b5TPvf8Z02I2sKIT4kSfCnOO2bCxYX8ABqODCdAjppI3gI9VYiGCQQYVcBaBSKlFDMKlAQRqC+kV9O8w==
-  dependencies:
-    archiver "^5.0.0"
-    dayjs "^1.8.34"
-    fast-csv "^4.3.1"
-    jszip "^3.5.0"
-    readable-stream "^3.6.0"
-    saxes "^5.0.1"
-    tmp "^0.2.0"
-    unzipper "^0.10.11"
-    uuid "^8.3.0"
-
-exit-hook@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz"
-  integrity sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g=
-
-exit-on-epipe@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz"
-  integrity sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw==
-
-fast-csv@^4.3.1:
-  version "4.3.6"
-  resolved "https://registry.npmjs.org/fast-csv/-/fast-csv-4.3.6.tgz"
-  integrity sha512-2RNSpuwwsJGP0frGsOmTb9oUF+VkFSM4SyLTDgwf2ciHWTarN0lQTC+F2f/t5J9QjW+c65VFIAAu85GsvMIusw==
-  dependencies:
-    "@fast-csv/format" "4.3.5"
-    "@fast-csv/parse" "4.3.6"
-
-fs-constants@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz"
-  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
-
-fs-extra@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz"
-  integrity sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^3.0.0"
-    universalify "^0.1.0"
-
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
-  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
-
-fstream@^1.0.12:
-  version "1.0.12"
-  resolved "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz"
-  integrity sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==
-  dependencies:
-    graceful-fs "^4.1.2"
-    inherits "~2.0.0"
-    mkdirp ">=0.5 0"
-    rimraf "2"
-
-function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
-
-glob@^7.0.0, glob@^7.1.1, glob@^7.1.3, glob@^7.1.4:
-  version "7.2.0"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz"
-  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
-  version "4.2.8"
-  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz"
-  integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
-
-has-ansi@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz"
-  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
-  dependencies:
-    ansi-regex "^2.0.0"
-
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz"
-  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
-
-has@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
-  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
-  dependencies:
-    function-bind "^1.1.1"
-
-ieee754@^1.1.13:
-  version "1.2.1"
-  resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
-  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
-
-immediate@~3.0.5:
-  version "3.0.6"
-  resolved "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz"
-  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
-
-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
-  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
-  dependencies:
-    once "^1.3.0"
-    wrappy "1"
-
-inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.0, inherits@~2.0.3:
-  version "2.0.4"
-  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-
-interpret@^1.0.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz"
-  integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
-
-is-core-module@^2.2.0:
-  version "2.7.0"
-  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.7.0.tgz"
-  integrity sha512-ByY+tjCciCr+9nLryBYcSD50EOGWt95c7tIsKTG1J2ixKKXPvF7Ej3AVd+UfDydAJom3biBGDBALaO79ktwgEQ==
-  dependencies:
-    has "^1.0.3"
-
-isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
-  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
-
-js-tokens@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
-  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
-
-js-yaml@^3.13.1:
-  version "3.14.1"
-  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz"
-  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
-jsonfile@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz"
-  integrity sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
-jszip@^3.5.0:
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
-  integrity sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==
-  dependencies:
-    lie "~3.3.0"
-    pako "~1.0.2"
-    readable-stream "~2.3.6"
-    setimmediate "^1.0.5"
-
-lazystream@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/lazystream/-/lazystream-1.0.0.tgz"
-  integrity sha1-9plf4PggOS9hOWvolGJAe7dxaOQ=
-  dependencies:
-    readable-stream "^2.0.5"
-
-lie@~3.3.0:
-  version "3.3.0"
-  resolved "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz"
-  integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
-  dependencies:
-    immediate "~3.0.5"
-
-listenercount@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz"
-  integrity sha1-hMinKrWcRyUyFIDJdeZQg0LnCTc=
-
-lodash.defaults@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz"
-  integrity sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=
-
-lodash.difference@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz"
-  integrity sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw=
-
-lodash.escaperegexp@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz"
-  integrity sha1-ZHYsSGGAglGKw99Mz11YhtriA0c=
-
-lodash.flatten@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz"
-  integrity sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=
-
-lodash.groupby@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.npmjs.org/lodash.groupby/-/lodash.groupby-4.6.0.tgz"
-  integrity sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E=
-
-lodash.isboolean@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz"
-  integrity sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY=
-
-lodash.isequal@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz"
-  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
-
-lodash.isfunction@^3.0.9:
-  version "3.0.9"
-  resolved "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz"
-  integrity sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==
-
-lodash.isnil@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/lodash.isnil/-/lodash.isnil-4.0.0.tgz"
-  integrity sha1-SeKM1VkBNFjIFMVHnTxmOiG/qmw=
-
-lodash.isplainobject@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz"
-  integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
-
-lodash.isundefined@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz"
-  integrity sha1-I+89lTVWUgOmbO/VuDD4SJEa+0g=
-
-lodash.union@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz"
-  integrity sha1-SLtQiECfFvGCFmZkHETdGqrjzYg=
-
-lodash.uniq@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
-  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
-
-lodash@^4.17.21:
-  version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
-minimatch@^3.0.4:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
-  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
-  dependencies:
-    brace-expansion "^1.1.7"
-
-minimist@^1.2.5:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
-  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
-
-"mkdirp@>=0.5 0", mkdirp@^0.5.3:
-  version "0.5.5"
-  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz"
-  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
-  dependencies:
-    minimist "^1.2.5"
-
-node-status@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/node-status/-/node-status-1.0.0.tgz"
-  integrity sha1-eQanxHplh9A0lr907GNKuqA/joA=
-  dependencies:
-    charm "1.0.1"
-    cli-cursor "^1.0.2"
-    cli-spinners "0.2.0"
-    colors "1.1.2"
-
-normalize-path@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
-  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
-
-once@^1.3.0, once@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
-  dependencies:
-    wrappy "1"
-
-onetime@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz"
-  integrity sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=
-
-pako@~1.0.2:
-  version "1.0.11"
-  resolved "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz"
-  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
-
-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
-
-path-parse@^1.0.6:
-  version "1.0.7"
-  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
-  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
-
-printj@~1.1.0:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz"
-  integrity sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==
-
-process-nextick-args@~2.0.0:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
-  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
-
-readable-stream@^2.0.0, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@~2.3.6:
-  version "2.3.7"
-  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz"
-  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
-readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
-readdir-glob@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.1.tgz"
-  integrity sha512-91/k1EzZwDx6HbERR+zucygRFfiPl2zkIYZtv3Jjr6Mn7SkKcVct8aVO+sSRiGMc6fLf72du3d92/uY63YPdEA==
-  dependencies:
-    minimatch "^3.0.4"
-
-rechoir@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz"
-  integrity sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=
-  dependencies:
-    resolve "^1.1.6"
-
-resolve@^1.1.6, resolve@^1.3.2:
-  version "1.20.0"
-  resolved "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz"
-  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
-  dependencies:
-    is-core-module "^2.2.0"
-    path-parse "^1.0.6"
-
-restore-cursor@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz"
-  integrity sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=
-  dependencies:
-    exit-hook "^1.0.0"
-    onetime "^1.0.0"
-
-rimraf@2:
-  version "2.7.1"
-  resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  dependencies:
-    glob "^7.1.3"
-
-rimraf@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
-  dependencies:
-    glob "^7.1.3"
-
-safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.2"
-  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
-  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
-
-safe-buffer@~5.2.0:
-  version "5.2.1"
-  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
-  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
-
-saxes@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz"
-  integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
-  dependencies:
-    xmlchars "^2.2.0"
-
-semver@^5.3.0:
-  version "5.7.2"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
-  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
-
-setimmediate@^1.0.5, setimmediate@~1.0.4:
-  version "1.0.5"
-  resolved "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz"
-  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
-
-shelljs@^0.8.5:
-  version "0.8.5"
-  resolved "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz"
-  integrity sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==
-  dependencies:
-    glob "^7.0.0"
-    interpret "^1.0.0"
-    rechoir "^0.6.2"
-
-sprintf-js@~1.0.2:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
-  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
-
-string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
-strip-ansi@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz"
-  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
-  dependencies:
-    ansi-regex "^2.0.0"
-
-supports-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
-  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
-
-supports-color@^5.3.0:
-  version "5.5.0"
-  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
-tar-stream@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz"
-  integrity sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==
-  dependencies:
-    bl "^4.0.3"
-    end-of-stream "^1.4.1"
-    fs-constants "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^3.1.1"
-
-tmp@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz"
-  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
-  dependencies:
-    rimraf "^3.0.0"
-
-"traverse@>=0.3.0 <0.4":
-  version "0.3.9"
-  resolved "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz"
-  integrity sha1-cXuPIgzAu3tE5AUUwisui7xw2Lk=
-
-tslib@^1.13.0, tslib@^1.8.1:
-  version "1.14.1"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
-  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
-
-tslint@^6.1.0:
-  version "6.1.3"
-  resolved "https://registry.npmjs.org/tslint/-/tslint-6.1.3.tgz"
-  integrity sha512-IbR4nkT96EQOvKE2PW/djGz8iGNeJ4rF2mBfiYaR/nvUWYKJhLwimoJKgjIFEIDibBtOevj7BqCRL4oHeWWUCg==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    builtin-modules "^1.1.1"
-    chalk "^2.3.0"
-    commander "^2.12.1"
-    diff "^4.0.1"
-    glob "^7.1.1"
-    js-yaml "^3.13.1"
-    minimatch "^3.0.4"
-    mkdirp "^0.5.3"
-    resolve "^1.3.2"
-    semver "^5.3.0"
-    tslib "^1.13.0"
-    tsutils "^2.29.0"
-
-tsutils@^2.29.0:
-  version "2.29.0"
-  resolved "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz"
-  integrity sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==
-  dependencies:
-    tslib "^1.8.1"
-
-typescript@^3.3.3333:
-  version "3.9.10"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz"
-  integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
-
-universalify@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz"
-  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
-
-unzipper@^0.10.11:
-  version "0.10.11"
-  resolved "https://registry.npmjs.org/unzipper/-/unzipper-0.10.11.tgz"
-  integrity sha512-+BrAq2oFqWod5IESRjL3S8baohbevGcVA+teAIOYWM3pDVdseogqbzhhvvmiyQrUNKFUnDMtELW3X8ykbyDCJw==
-  dependencies:
-    big-integer "^1.6.17"
-    binary "~0.3.0"
-    bluebird "~3.4.1"
-    buffer-indexof-polyfill "~1.0.0"
-    duplexer2 "~0.1.4"
-    fstream "^1.0.12"
-    graceful-fs "^4.2.2"
-    listenercount "~1.0.1"
-    readable-stream "~2.3.6"
-    setimmediate "~1.0.4"
-
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
-  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
-
-uuid@^8.3.0:
-  version "8.3.2"
-  resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
-  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
-
-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
-  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
-
-xmlchars@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz"
-  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
-
-yarn@^1.22.19:
-  version "1.22.19"
-  resolved "https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz"
-  integrity sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==
-
-zip-stream@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.0.tgz"
-  integrity sha512-zshzwQW7gG7hjpBlgeQP9RuyPGNxvJdzR8SUM3QhxCnLjWN2E7j3dOvpeDcQoETfHx0urRS7EtmVToql7YpU4A==
-  dependencies:
-    archiver-utils "^2.1.0"
-    compress-commons "^4.1.0"
-    readable-stream "^3.6.0"