From 463df2118e4ebc6a09d4f533b366fe8908468689 Mon Sep 17 00:00:00 2001
From: Rick Butterfield <rick.butterfield@gmail.com>
Date: Thu, 13 Nov 2025 08:38:36 +0000
Subject: [PATCH 1/8] Updated documentation to match npm package

---
 .../developer/extending/README.md             | 17 ++++-
 .../developer/extending/adding-a-fieldtype.md | 69 +++++++------------
 .../developer/extending/README.md             | 17 ++++-
 .../developer/extending/adding-a-fieldtype.md | 69 +++++++------------
 17/umbraco-forms/release-notes.md             |  8 +++
 5 files changed, 90 insertions(+), 90 deletions(-)

diff --git a/16/umbraco-forms/developer/extending/README.md b/16/umbraco-forms/developer/extending/README.md
index 635b9fd8f8e..6e69c1c6ee9 100644
--- a/16/umbraco-forms/developer/extending/README.md
+++ b/16/umbraco-forms/developer/extending/README.md
@@ -1,9 +1,24 @@
 # Extending
 
-Umbraco Forms functionality can be extended in different ways. In this section we focus on techniques available to a back-end/C# developer.
+Umbraco Forms functionality can be extended in different ways.
 
 For front-end extensions, specifically via theming, see the [Themes](../themes.md) section.
 
+## Extending the Backoffice
+Umbraco Forms publishes an NPM package called `@umbraco-forms/backoffice` that holds typings and other niceties to build extensions.
+
+{% hint style="warning" %}
+Ensure that you install the version of the Backoffice package compatible with your Umbraco Forms installation. You can find the appropriate version on the [@umbraco-forms/backoffice npm page](https://www.npmjs.com/package/@umbraco-forms/backoffice).
+{% endhint %}
+
+You can install this package by running the command:
+
+```bash
+npm install -D @umbraco-forms/backoffice@x.x.x
+```
+
+This will add a package to your devDependencies containing the TypeScript definitions for Umbraco Forms.
+
 ## Developing Custom Providers
 
 Although the Forms package comes with many fields, workflows and other built-in types, you can still create and develop your own if needed.
diff --git a/16/umbraco-forms/developer/extending/adding-a-fieldtype.md b/16/umbraco-forms/developer/extending/adding-a-fieldtype.md
index 57b05eafd03..c3118120644 100644
--- a/16/umbraco-forms/developer/extending/adding-a-fieldtype.md
+++ b/16/umbraco-forms/developer/extending/adding-a-fieldtype.md
@@ -172,6 +172,18 @@ With Forms 14+, aspects of the presentation and functionality of the custom fiel
 
 To create custom backoffice components for Umbraco 14, it's recommended to use a front-end build setup using Vite, TypeScript, and Lit. For more information, see the [Extension with Vite, TypeScript, and Lit](https://app.gitbook.com/s/G1Byxw7XfiZAj8zDMCTD/tutorials/creating-your-first-extension#extension-with-vite-typescript-and-lit) article.
 
+The examples here are using the `@umbraco-forms/backoffice` package to get access to Forms-specific types and contexts. It is recommended to install this package as a development dependency in your project.
+
+{% hint style="warning" %}
+Ensure that you install the version of the Backoffice package compatible with your Umbraco Forms installation. You can find the appropriate version on the [@umbraco-forms/backoffice npm page](https://www.npmjs.com/package/@umbraco-forms/backoffice).
+{% endhint %}
+
+```bash
+npm install -D @umbraco-forms/backoffice@x.x.x
+```
+
+This will add a package to your devDependencies containing the TypeScript definitions for Umbraco Forms.
+
 To display a name and description on a custom field, you need to register a JavaScript file as shown in the [Localization](https://app.gitbook.com/s/7MBVdnTbFiAgWuRsHpNS/customizing/extending-overview/extension-types/localization) article.
 
 ### Field Preview
@@ -181,56 +193,25 @@ The alias of the preview to use is defined on the field type via the `PreviewVie
 A preview for our slider, representing the selected setting values could look as follows:
 
 ```javascript
-import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
-import {
-  LitElement,
-  css,
-  customElement,
-  html,
-  property,
-} from "@umbraco-cms/backoffice/external/lit";
-
-const elementName = "my-field-preview-slider";
-
-@customElement(elementName)
-export class MyFieldPreviewSliderElement extends UmbElementMixin(LitElement) {
-  @property()
-  settings = {};
-
-  @property({ type: Array })
-  prevalues = [];
+import type { UmbPropertyValueData } from "@umbraco-cms/backoffice/property";
+import type { FormsSettingValueConverterApi, Setting } from "@umbraco-forms/backoffice";
 
-  getSettingValue(key: string) {
-    return this.settings[key];
+export class SliderSettingValueConverter
+  implements FormsSettingValueConverterApi
+{
+  async getSettingValueForEditor(setting: Setting, alias: string, value: string) {
+    return Promise.resolve(value);
   }
 
-  render() {
-    return html`<div
-      style="background-color:${this.getSettingValue("BgColor")}"
-    >
-      <uui-slider
-        .min=${parseInt(this.getSettingValue("Min"))}
-        .max=${parseInt(this.getSettingValue("Max"))}
-        .step=${this.getSettingValue("Step")}
-        .value=${this.getSettingValue("DefaultValue")}
-        ?hide-step-values=${this.getSettingValue("HideStepValues") === "True"}
-      ></uui-slider>
-    </div>`;
+  async getSettingValueForPersistence(setting: Setting, valueData: UmbPropertyValueData) {
+    return Promise.resolve(valueData.value?.toString() || "");
   }
 
-  static styles = css`
-    div {
-      padding: var(--uui-size-4);
-    }
-  `;
-}
-
-export default MyFieldPreviewSliderElement;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    [elementName]: MyFieldPreviewSliderElement;
+  async getSettingPropertyConfig(setting: Setting, alias: string, values: UmbPropertyValueData[]) {
+    return Promise.resolve([]);
   }
+
+  destroy(): void { }
 }
 ```
 
diff --git a/17/umbraco-forms/developer/extending/README.md b/17/umbraco-forms/developer/extending/README.md
index 635b9fd8f8e..6e69c1c6ee9 100644
--- a/17/umbraco-forms/developer/extending/README.md
+++ b/17/umbraco-forms/developer/extending/README.md
@@ -1,9 +1,24 @@
 # Extending
 
-Umbraco Forms functionality can be extended in different ways. In this section we focus on techniques available to a back-end/C# developer.
+Umbraco Forms functionality can be extended in different ways.
 
 For front-end extensions, specifically via theming, see the [Themes](../themes.md) section.
 
+## Extending the Backoffice
+Umbraco Forms publishes an NPM package called `@umbraco-forms/backoffice` that holds typings and other niceties to build extensions.
+
+{% hint style="warning" %}
+Ensure that you install the version of the Backoffice package compatible with your Umbraco Forms installation. You can find the appropriate version on the [@umbraco-forms/backoffice npm page](https://www.npmjs.com/package/@umbraco-forms/backoffice).
+{% endhint %}
+
+You can install this package by running the command:
+
+```bash
+npm install -D @umbraco-forms/backoffice@x.x.x
+```
+
+This will add a package to your devDependencies containing the TypeScript definitions for Umbraco Forms.
+
 ## Developing Custom Providers
 
 Although the Forms package comes with many fields, workflows and other built-in types, you can still create and develop your own if needed.
diff --git a/17/umbraco-forms/developer/extending/adding-a-fieldtype.md b/17/umbraco-forms/developer/extending/adding-a-fieldtype.md
index 57b05eafd03..c3118120644 100644
--- a/17/umbraco-forms/developer/extending/adding-a-fieldtype.md
+++ b/17/umbraco-forms/developer/extending/adding-a-fieldtype.md
@@ -172,6 +172,18 @@ With Forms 14+, aspects of the presentation and functionality of the custom fiel
 
 To create custom backoffice components for Umbraco 14, it's recommended to use a front-end build setup using Vite, TypeScript, and Lit. For more information, see the [Extension with Vite, TypeScript, and Lit](https://app.gitbook.com/s/G1Byxw7XfiZAj8zDMCTD/tutorials/creating-your-first-extension#extension-with-vite-typescript-and-lit) article.
 
+The examples here are using the `@umbraco-forms/backoffice` package to get access to Forms-specific types and contexts. It is recommended to install this package as a development dependency in your project.
+
+{% hint style="warning" %}
+Ensure that you install the version of the Backoffice package compatible with your Umbraco Forms installation. You can find the appropriate version on the [@umbraco-forms/backoffice npm page](https://www.npmjs.com/package/@umbraco-forms/backoffice).
+{% endhint %}
+
+```bash
+npm install -D @umbraco-forms/backoffice@x.x.x
+```
+
+This will add a package to your devDependencies containing the TypeScript definitions for Umbraco Forms.
+
 To display a name and description on a custom field, you need to register a JavaScript file as shown in the [Localization](https://app.gitbook.com/s/7MBVdnTbFiAgWuRsHpNS/customizing/extending-overview/extension-types/localization) article.
 
 ### Field Preview
@@ -181,56 +193,25 @@ The alias of the preview to use is defined on the field type via the `PreviewVie
 A preview for our slider, representing the selected setting values could look as follows:
 
 ```javascript
-import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
-import {
-  LitElement,
-  css,
-  customElement,
-  html,
-  property,
-} from "@umbraco-cms/backoffice/external/lit";
-
-const elementName = "my-field-preview-slider";
-
-@customElement(elementName)
-export class MyFieldPreviewSliderElement extends UmbElementMixin(LitElement) {
-  @property()
-  settings = {};
-
-  @property({ type: Array })
-  prevalues = [];
+import type { UmbPropertyValueData } from "@umbraco-cms/backoffice/property";
+import type { FormsSettingValueConverterApi, Setting } from "@umbraco-forms/backoffice";
 
-  getSettingValue(key: string) {
-    return this.settings[key];
+export class SliderSettingValueConverter
+  implements FormsSettingValueConverterApi
+{
+  async getSettingValueForEditor(setting: Setting, alias: string, value: string) {
+    return Promise.resolve(value);
   }
 
-  render() {
-    return html`<div
-      style="background-color:${this.getSettingValue("BgColor")}"
-    >
-      <uui-slider
-        .min=${parseInt(this.getSettingValue("Min"))}
-        .max=${parseInt(this.getSettingValue("Max"))}
-        .step=${this.getSettingValue("Step")}
-        .value=${this.getSettingValue("DefaultValue")}
-        ?hide-step-values=${this.getSettingValue("HideStepValues") === "True"}
-      ></uui-slider>
-    </div>`;
+  async getSettingValueForPersistence(setting: Setting, valueData: UmbPropertyValueData) {
+    return Promise.resolve(valueData.value?.toString() || "");
   }
 
-  static styles = css`
-    div {
-      padding: var(--uui-size-4);
-    }
-  `;
-}
-
-export default MyFieldPreviewSliderElement;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    [elementName]: MyFieldPreviewSliderElement;
+  async getSettingPropertyConfig(setting: Setting, alias: string, values: UmbPropertyValueData[]) {
+    return Promise.resolve([]);
   }
+
+  destroy(): void { }
 }
 ```
 
diff --git a/17/umbraco-forms/release-notes.md b/17/umbraco-forms/release-notes.md
index a441caae57d..81966316cc1 100644
--- a/17/umbraco-forms/release-notes.md
+++ b/17/umbraco-forms/release-notes.md
@@ -16,6 +16,14 @@ If you are upgrading to a new major version, you can find information about the
 
 This section contains the release notes for Umbraco Forms 17 including all changes for this version.
 
+### 17.0.0-rc2 (November 13th 2025)
+
+* Update dependencies to 17.0.0-rc2
+
+### 17.0.0-rc1 (October 30th 2025)
+
+* Update dependencies to 17.0.0-rc1
+
 ## Legacy release notes
 
 You can find the release notes for versions out of support in the [Legacy documentation on GitHub](https://github.com/umbraco/UmbracoDocs/blob/umbraco-eol-versions/12/umbraco-forms/release-notes.md) and [Umbraco Forms Package page](https://our.umbraco.com/packages/developer-tools/umbraco-forms/).

From 1b865746bd6d5820f7c5351928fa373882226781 Mon Sep 17 00:00:00 2001
From: Rick Butterfield <rick.butterfield@gmail.com>
Date: Thu, 13 Nov 2025 09:11:47 +0000
Subject: [PATCH 2/8] Updated documentation to show how to use npm package

---
 .../developer/extending/adding-a-fieldtype.md | 87 ++++++++++++------
 .../developer/extending/adding-a-fieldtype.md | 88 +++++++++++++------
 2 files changed, 119 insertions(+), 56 deletions(-)

diff --git a/16/umbraco-forms/developer/extending/adding-a-fieldtype.md b/16/umbraco-forms/developer/extending/adding-a-fieldtype.md
index c3118120644..ab5293c810a 100644
--- a/16/umbraco-forms/developer/extending/adding-a-fieldtype.md
+++ b/16/umbraco-forms/developer/extending/adding-a-fieldtype.md
@@ -193,25 +193,56 @@ The alias of the preview to use is defined on the field type via the `PreviewVie
 A preview for our slider, representing the selected setting values could look as follows:
 
 ```javascript
-import type { UmbPropertyValueData } from "@umbraco-cms/backoffice/property";
-import type { FormsSettingValueConverterApi, Setting } from "@umbraco-forms/backoffice";
+import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
+import {
+  LitElement,
+  css,
+  customElement,
+  html,
+  property,
+} from "@umbraco-cms/backoffice/external/lit";
 
-export class SliderSettingValueConverter
-  implements FormsSettingValueConverterApi
-{
-  async getSettingValueForEditor(setting: Setting, alias: string, value: string) {
-    return Promise.resolve(value);
-  }
+const elementName = "my-field-preview-slider";
 
-  async getSettingValueForPersistence(setting: Setting, valueData: UmbPropertyValueData) {
-    return Promise.resolve(valueData.value?.toString() || "");
+@customElement(elementName)
+export class MyFieldPreviewSliderElement extends UmbElementMixin(LitElement) {
+  @property()
+  settings = {};
+
+  @property({ type: Array })
+  prevalues = [];
+
+  getSettingValue(key: string) {
+    return this.settings[key];
   }
 
-  async getSettingPropertyConfig(setting: Setting, alias: string, values: UmbPropertyValueData[]) {
-    return Promise.resolve([]);
+  render() {
+    return html`<div
+      style="background-color:${this.getSettingValue("BgColor")}"
+    >
+      <uui-slider
+        .min=${parseInt(this.getSettingValue("Min"))}
+        .max=${parseInt(this.getSettingValue("Max"))}
+        .step=${this.getSettingValue("Step")}
+        .value=${this.getSettingValue("DefaultValue")}
+        ?hide-step-values=${this.getSettingValue("HideStepValues") === "True"}
+      ></uui-slider>
+    </div>`;
   }
 
-  destroy(): void { }
+  static styles = css`
+    div {
+      padding: var(--uui-size-4);
+    }
+  `;
+}
+
+export default MyFieldPreviewSliderElement;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [elementName]: MyFieldPreviewSliderElement;
+  }
 }
 ```
 
@@ -221,14 +252,13 @@ And it is registered via a manifest:
 import MyFieldPreviewSliderElement from './slider-preview.element.js';
 
 const sliderPreviewManifest = {
-    type: "formsFieldPreview",
-    alias: "My.FieldPreview.Slider",
-    name: "Forms UUI Slider Field Preview",
-    api: MyFieldPreviewSliderElement,
-    element: () => import('./slider-preview.element.js')
-  };
-
-  export const manifests = [sliderPreviewManifest];
+  type: "formsFieldPreview",
+  alias: "My.FieldPreview.Slider",
+  name: "Forms UUI Slider Field Preview",
+  element: MyFieldPreviewSliderElement
+};
+
+export const manifests = [sliderPreviewManifest];
 ```
 
 ### Field Editor
@@ -384,20 +414,23 @@ The following code shows the structure for these converter elements.
 
 ```javascript
 import type { UmbPropertyValueData } from "@umbraco-cms/backoffice/property";
+import type { FormsSettingValueConverterApi, Setting } from "@umbraco-forms/backoffice";
 
-export class SliderSettingValueConverter {
-
-  async getSettingValueForEditor(setting, alias: string, value: string) {
+export class SliderSettingValueConverter
+  implements FormsSettingValueConverterApi {
+  async getSettingValueForEditor(setting: Setting, alias: string, value: string) {
     return Promise.resolve(value);
   }
 
-  async getSettingValueForPersistence(setting, valueData: UmbPropertyValueData) {
-    return Promise.resolve(valueData.value);
+  async getSettingValueForPersistence(setting: Setting, valueData: UmbPropertyValueData) {
+    return Promise.resolve(valueData.value?.toString() || "");
   }
 
-  async getSettingPropertyConfig(setting, alias: string, values: UmbPropertyValueData[]) {
+  async getSettingPropertyConfig(setting: Setting, alias: string, values: UmbPropertyValueData[]) {
     return Promise.resolve([]);
   }
+
+  destroy(): void { }
 }
 ```
 
diff --git a/17/umbraco-forms/developer/extending/adding-a-fieldtype.md b/17/umbraco-forms/developer/extending/adding-a-fieldtype.md
index c3118120644..f6bfda4432b 100644
--- a/17/umbraco-forms/developer/extending/adding-a-fieldtype.md
+++ b/17/umbraco-forms/developer/extending/adding-a-fieldtype.md
@@ -193,25 +193,51 @@ The alias of the preview to use is defined on the field type via the `PreviewVie
 A preview for our slider, representing the selected setting values could look as follows:
 
 ```javascript
-import type { UmbPropertyValueData } from "@umbraco-cms/backoffice/property";
-import type { FormsSettingValueConverterApi, Setting } from "@umbraco-forms/backoffice";
+import {
+  css,
+  customElement,
+  html,
+  property,
+} from "@umbraco-cms/backoffice/external/lit";
+import { FormsFieldPreviewBaseElement } from "@umbraco-forms/backoffice";
 
-export class SliderSettingValueConverter
-  implements FormsSettingValueConverterApi
-{
-  async getSettingValueForEditor(setting: Setting, alias: string, value: string) {
-    return Promise.resolve(value);
-  }
+const elementName = "my-field-preview-slider";
 
-  async getSettingValueForPersistence(setting: Setting, valueData: UmbPropertyValueData) {
-    return Promise.resolve(valueData.value?.toString() || "");
+@customElement(elementName)
+export class MyFieldPreviewSliderElement extends FormsFieldPreviewBaseElement {
+  @property()
+  settings = {};
+
+  @property({ type: Array })
+  prevalues = [];
+
+  render() {
+    return html`<div
+      style="background-color:${this.getSettingValue("BgColor")}"
+    >
+      <uui-slider
+        .min=${parseInt(this.getSettingValue("Min"))}
+        .max=${parseInt(this.getSettingValue("Max"))}
+        .step=${this.getSettingValue("Step")}
+        .value=${this.getSettingValue("DefaultValue")}
+        ?hide-step-values=${this.getSettingValue("HideStepValues") === "True"}
+      ></uui-slider>
+    </div>`;
   }
 
-  async getSettingPropertyConfig(setting: Setting, alias: string, values: UmbPropertyValueData[]) {
-    return Promise.resolve([]);
-  }
+  static styles = css`
+    div {
+      padding: var(--uui-size-4);
+    }
+  `;
+}
 
-  destroy(): void { }
+export default MyFieldPreviewSliderElement;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [elementName]: MyFieldPreviewSliderElement;
+  }
 }
 ```
 
@@ -219,16 +245,16 @@ And it is registered via a manifest:
 
 ```javascript
 import MyFieldPreviewSliderElement from './slider-preview.element.js';
+import { ManifestFormsFieldPreview } from '@umbraco-forms/backoffice';
 
-const sliderPreviewManifest = {
-    type: "formsFieldPreview",
-    alias: "My.FieldPreview.Slider",
-    name: "Forms UUI Slider Field Preview",
-    api: MyFieldPreviewSliderElement,
-    element: () => import('./slider-preview.element.js')
-  };
+const sliderPreviewManifest: ManifestFormsFieldPreview = {
+  type: "formsFieldPreview",
+  alias: "My.FieldPreview.Slider",
+  name: "Forms UUI Slider Field Preview",
+  element: MyFieldPreviewSliderElement
+};
 
-  export const manifests = [sliderPreviewManifest];
+export const manifests = [sliderPreviewManifest];
 ```
 
 ### Field Editor
@@ -384,20 +410,23 @@ The following code shows the structure for these converter elements.
 
 ```javascript
 import type { UmbPropertyValueData } from "@umbraco-cms/backoffice/property";
+import type { FormsSettingValueConverterApi, Setting } from "@umbraco-forms/backoffice";
 
-export class SliderSettingValueConverter {
-
-  async getSettingValueForEditor(setting, alias: string, value: string) {
+export class SliderSettingValueConverter
+  implements FormsSettingValueConverterApi {
+  async getSettingValueForEditor(setting: Setting, alias: string, value: string) {
     return Promise.resolve(value);
   }
 
-  async getSettingValueForPersistence(setting, valueData: UmbPropertyValueData) {
-    return Promise.resolve(valueData.value);
+  async getSettingValueForPersistence(setting: Setting, valueData: UmbPropertyValueData) {
+    return Promise.resolve(valueData.value?.toString() || "");
   }
 
-  async getSettingPropertyConfig(setting, alias: string, values: UmbPropertyValueData[]) {
+  async getSettingPropertyConfig(setting: Setting, alias: string, values: UmbPropertyValueData[]) {
     return Promise.resolve([]);
   }
+
+  destroy(): void { }
 }
 ```
 
@@ -405,8 +434,9 @@ It's registered as follows. The `propertyEditorUiAlias` matches with the propert
 
 ```javascript
 import { SliderSettingValueConverter } from "./slider-setting-value-converter.api";
+import { ManifestFormsSettingValueConverterPreview } from "@umbraco-forms/backoffice";
 
-const sliderValueConverterManifest = {
+const sliderValueConverterManifest: ManifestFormsSettingValueConverterPreview = {
   type: "formsSettingValueConverter",
   alias: "My.SettingValueConverter.Slider",
   name: "Slider Value Converter",

From b6de3d5fbb11cc367b51f144723a93696e4d9f82 Mon Sep 17 00:00:00 2001
From: Rick Butterfield <rick.butterfield@gmail.com>
Date: Thu, 13 Nov 2025 09:31:00 +0000
Subject: [PATCH 3/8] Undo change to v16 docs

---
 16/umbraco-forms/developer/extending/adding-a-fieldtype.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/16/umbraco-forms/developer/extending/adding-a-fieldtype.md b/16/umbraco-forms/developer/extending/adding-a-fieldtype.md
index ab5293c810a..c4d157bcad1 100644
--- a/16/umbraco-forms/developer/extending/adding-a-fieldtype.md
+++ b/16/umbraco-forms/developer/extending/adding-a-fieldtype.md
@@ -255,7 +255,8 @@ const sliderPreviewManifest = {
   type: "formsFieldPreview",
   alias: "My.FieldPreview.Slider",
   name: "Forms UUI Slider Field Preview",
-  element: MyFieldPreviewSliderElement
+  api: MyFieldPreviewSliderElement,
+  element: () => import('./slider-preview.element.js')
 };
 
 export const manifests = [sliderPreviewManifest];

From 6c5645b0178dceb9e8eed4cebf94daac6ee2d143 Mon Sep 17 00:00:00 2001
From: Rick Butterfield <rick.butterfield@gmail.com>
Date: Thu, 13 Nov 2025 11:38:21 +0000
Subject: [PATCH 4/8] Add TSConfig / Vite config info

---
 .../developer/extending/README.md             | 41 +++++++++++++++++++
 .../developer/extending/README.md             | 41 +++++++++++++++++++
 2 files changed, 82 insertions(+)

diff --git a/16/umbraco-forms/developer/extending/README.md b/16/umbraco-forms/developer/extending/README.md
index 6e69c1c6ee9..7f988c260cc 100644
--- a/16/umbraco-forms/developer/extending/README.md
+++ b/16/umbraco-forms/developer/extending/README.md
@@ -19,6 +19,47 @@ npm install -D @umbraco-forms/backoffice@x.x.x
 
 This will add a package to your devDependencies containing the TypeScript definitions for Umbraco Forms.
 
+**TSConfig**
+
+Make sure to configure your TypeScript compiler so it includes the Global Types from the package. This enables you to utilize the declared Extension Types. If your project is using other Packages that provide their Extension Types, list these as well.
+
+In your `tsconfig.json` file, add the array `types` inside `compilerOptions`, with the entry of `@umbraco-forms/backoffice`:
+
+```json
+{
+    "compilerOptions": {
+        ...
+        "types": [
+            ...
+            "@umbraco-forms/backoffice"
+        ]
+    }
+}
+```
+
+**Take extra care when using Vite**
+
+It is important that this namespace is ignored in your bundler. If you are using Vite, you can add the following to your `vite.config.ts` file:
+
+```ts
+import { defineConfig } from "vite";
+
+export default defineConfig({
+    // other config
+    // ...
+    // add this to your config
+    build: {
+        rollupOptions: {
+            external: [/^@umbraco/],
+        },
+    }
+});
+```
+
+This ensures that the Umbraco Backoffice packages are not bundled with your package.
+
+Read more about using Vite with Umbraco in the [Vite Package Setup](umbraco-cms/customizing/development-flow/vite-package-setup.md) article.
+
 ## Developing Custom Providers
 
 Although the Forms package comes with many fields, workflows and other built-in types, you can still create and develop your own if needed.
diff --git a/17/umbraco-forms/developer/extending/README.md b/17/umbraco-forms/developer/extending/README.md
index 6e69c1c6ee9..7f988c260cc 100644
--- a/17/umbraco-forms/developer/extending/README.md
+++ b/17/umbraco-forms/developer/extending/README.md
@@ -19,6 +19,47 @@ npm install -D @umbraco-forms/backoffice@x.x.x
 
 This will add a package to your devDependencies containing the TypeScript definitions for Umbraco Forms.
 
+**TSConfig**
+
+Make sure to configure your TypeScript compiler so it includes the Global Types from the package. This enables you to utilize the declared Extension Types. If your project is using other Packages that provide their Extension Types, list these as well.
+
+In your `tsconfig.json` file, add the array `types` inside `compilerOptions`, with the entry of `@umbraco-forms/backoffice`:
+
+```json
+{
+    "compilerOptions": {
+        ...
+        "types": [
+            ...
+            "@umbraco-forms/backoffice"
+        ]
+    }
+}
+```
+
+**Take extra care when using Vite**
+
+It is important that this namespace is ignored in your bundler. If you are using Vite, you can add the following to your `vite.config.ts` file:
+
+```ts
+import { defineConfig } from "vite";
+
+export default defineConfig({
+    // other config
+    // ...
+    // add this to your config
+    build: {
+        rollupOptions: {
+            external: [/^@umbraco/],
+        },
+    }
+});
+```
+
+This ensures that the Umbraco Backoffice packages are not bundled with your package.
+
+Read more about using Vite with Umbraco in the [Vite Package Setup](umbraco-cms/customizing/development-flow/vite-package-setup.md) article.
+
 ## Developing Custom Providers
 
 Although the Forms package comes with many fields, workflows and other built-in types, you can still create and develop your own if needed.

From a1671ffe9c89daf8e6c887d749bd497e81489902 Mon Sep 17 00:00:00 2001
From: Rick Butterfield <rick.butterfield@gmail.com>
Date: Thu, 13 Nov 2025 11:46:11 +0000
Subject: [PATCH 5/8] Add links for Vite Package Setup article

---
 16/umbraco-forms/developer/extending/README.md | 2 +-
 17/umbraco-forms/developer/extending/README.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/16/umbraco-forms/developer/extending/README.md b/16/umbraco-forms/developer/extending/README.md
index 7f988c260cc..f0e16bf3437 100644
--- a/16/umbraco-forms/developer/extending/README.md
+++ b/16/umbraco-forms/developer/extending/README.md
@@ -58,7 +58,7 @@ export default defineConfig({
 
 This ensures that the Umbraco Backoffice packages are not bundled with your package.
 
-Read more about using Vite with Umbraco in the [Vite Package Setup](umbraco-cms/customizing/development-flow/vite-package-setup.md) article.
+Read more about using Vite with Umbraco in the [Vite Package Setup](../../../umbraco-cms/customizing/development-flow/vite-package-setup.md) article.
 
 ## Developing Custom Providers
 
diff --git a/17/umbraco-forms/developer/extending/README.md b/17/umbraco-forms/developer/extending/README.md
index 7f988c260cc..f0e16bf3437 100644
--- a/17/umbraco-forms/developer/extending/README.md
+++ b/17/umbraco-forms/developer/extending/README.md
@@ -58,7 +58,7 @@ export default defineConfig({
 
 This ensures that the Umbraco Backoffice packages are not bundled with your package.
 
-Read more about using Vite with Umbraco in the [Vite Package Setup](umbraco-cms/customizing/development-flow/vite-package-setup.md) article.
+Read more about using Vite with Umbraco in the [Vite Package Setup](../../../umbraco-cms/customizing/development-flow/vite-package-setup.md) article.
 
 ## Developing Custom Providers
 

From 228aa190873396e6d6fb3308c66c28f9eef455b6 Mon Sep 17 00:00:00 2001
From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com>
Date: Fri, 14 Nov 2025 09:45:32 +0100
Subject: [PATCH 6/8] Apply suggestions from code review

---
 16/umbraco-forms/developer/extending/README.md            | 8 ++++----
 .../developer/extending/adding-a-fieldtype.md             | 2 +-
 17/umbraco-forms/developer/extending/README.md            | 8 ++++----
 .../developer/extending/adding-a-fieldtype.md             | 2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/16/umbraco-forms/developer/extending/README.md b/16/umbraco-forms/developer/extending/README.md
index f0e16bf3437..682c111810a 100644
--- a/16/umbraco-forms/developer/extending/README.md
+++ b/16/umbraco-forms/developer/extending/README.md
@@ -8,7 +8,7 @@ For front-end extensions, specifically via theming, see the [Themes](../themes.m
 Umbraco Forms publishes an NPM package called `@umbraco-forms/backoffice` that holds typings and other niceties to build extensions.
 
 {% hint style="warning" %}
-Ensure that you install the version of the Backoffice package compatible with your Umbraco Forms installation. You can find the appropriate version on the [@umbraco-forms/backoffice npm page](https://www.npmjs.com/package/@umbraco-forms/backoffice).
+Ensure that you install the version of the Backoffice package that is compatible with your Umbraco Forms installation. You can find the appropriate version on the [`@umbraco-forms/backoffice` npm page](https://www.npmjs.com/package/@umbraco-forms/backoffice).
 {% endhint %}
 
 You can install this package by running the command:
@@ -19,9 +19,9 @@ npm install -D @umbraco-forms/backoffice@x.x.x
 
 This will add a package to your devDependencies containing the TypeScript definitions for Umbraco Forms.
 
-**TSConfig**
+### TSConfig
 
-Make sure to configure your TypeScript compiler so it includes the Global Types from the package. This enables you to utilize the declared Extension Types. If your project is using other Packages that provide their Extension Types, list these as well.
+Make sure to configure your TypeScript compiler so it includes the Global Types from the package. This enables you to utilize the declared Extension Types. If your project uses other Packages that provide their Extension Types, list those as well.
 
 In your `tsconfig.json` file, add the array `types` inside `compilerOptions`, with the entry of `@umbraco-forms/backoffice`:
 
@@ -37,7 +37,7 @@ In your `tsconfig.json` file, add the array `types` inside `compilerOptions`, wi
 }
 ```
 
-**Take extra care when using Vite**
+### Take extra care when using Vite
 
 It is important that this namespace is ignored in your bundler. If you are using Vite, you can add the following to your `vite.config.ts` file:
 
diff --git a/16/umbraco-forms/developer/extending/adding-a-fieldtype.md b/16/umbraco-forms/developer/extending/adding-a-fieldtype.md
index c4d157bcad1..ff8b1a44b24 100644
--- a/16/umbraco-forms/developer/extending/adding-a-fieldtype.md
+++ b/16/umbraco-forms/developer/extending/adding-a-fieldtype.md
@@ -175,7 +175,7 @@ To create custom backoffice components for Umbraco 14, it's recommended to use a
 The examples here are using the `@umbraco-forms/backoffice` package to get access to Forms-specific types and contexts. It is recommended to install this package as a development dependency in your project.
 
 {% hint style="warning" %}
-Ensure that you install the version of the Backoffice package compatible with your Umbraco Forms installation. You can find the appropriate version on the [@umbraco-forms/backoffice npm page](https://www.npmjs.com/package/@umbraco-forms/backoffice).
+Ensure that you install the version of the Backoffice package that is compatible with your Umbraco Forms installation. You can find the appropriate version on the [`@umbraco-forms/backoffice` npm page](https://www.npmjs.com/package/@umbraco-forms/backoffice).
 {% endhint %}
 
 ```bash
diff --git a/17/umbraco-forms/developer/extending/README.md b/17/umbraco-forms/developer/extending/README.md
index f0e16bf3437..682c111810a 100644
--- a/17/umbraco-forms/developer/extending/README.md
+++ b/17/umbraco-forms/developer/extending/README.md
@@ -8,7 +8,7 @@ For front-end extensions, specifically via theming, see the [Themes](../themes.m
 Umbraco Forms publishes an NPM package called `@umbraco-forms/backoffice` that holds typings and other niceties to build extensions.
 
 {% hint style="warning" %}
-Ensure that you install the version of the Backoffice package compatible with your Umbraco Forms installation. You can find the appropriate version on the [@umbraco-forms/backoffice npm page](https://www.npmjs.com/package/@umbraco-forms/backoffice).
+Ensure that you install the version of the Backoffice package that is compatible with your Umbraco Forms installation. You can find the appropriate version on the [`@umbraco-forms/backoffice` npm page](https://www.npmjs.com/package/@umbraco-forms/backoffice).
 {% endhint %}
 
 You can install this package by running the command:
@@ -19,9 +19,9 @@ npm install -D @umbraco-forms/backoffice@x.x.x
 
 This will add a package to your devDependencies containing the TypeScript definitions for Umbraco Forms.
 
-**TSConfig**
+### TSConfig
 
-Make sure to configure your TypeScript compiler so it includes the Global Types from the package. This enables you to utilize the declared Extension Types. If your project is using other Packages that provide their Extension Types, list these as well.
+Make sure to configure your TypeScript compiler so it includes the Global Types from the package. This enables you to utilize the declared Extension Types. If your project uses other Packages that provide their Extension Types, list those as well.
 
 In your `tsconfig.json` file, add the array `types` inside `compilerOptions`, with the entry of `@umbraco-forms/backoffice`:
 
@@ -37,7 +37,7 @@ In your `tsconfig.json` file, add the array `types` inside `compilerOptions`, wi
 }
 ```
 
-**Take extra care when using Vite**
+### Take extra care when using Vite
 
 It is important that this namespace is ignored in your bundler. If you are using Vite, you can add the following to your `vite.config.ts` file:
 
diff --git a/17/umbraco-forms/developer/extending/adding-a-fieldtype.md b/17/umbraco-forms/developer/extending/adding-a-fieldtype.md
index f6bfda4432b..1655a41d47c 100644
--- a/17/umbraco-forms/developer/extending/adding-a-fieldtype.md
+++ b/17/umbraco-forms/developer/extending/adding-a-fieldtype.md
@@ -175,7 +175,7 @@ To create custom backoffice components for Umbraco 14, it's recommended to use a
 The examples here are using the `@umbraco-forms/backoffice` package to get access to Forms-specific types and contexts. It is recommended to install this package as a development dependency in your project.
 
 {% hint style="warning" %}
-Ensure that you install the version of the Backoffice package compatible with your Umbraco Forms installation. You can find the appropriate version on the [@umbraco-forms/backoffice npm page](https://www.npmjs.com/package/@umbraco-forms/backoffice).
+Ensure that you install the version of the Backoffice package that is compatible with your Umbraco Forms installation. You can find the appropriate version on the [`@umbraco-forms/backoffice` npm page](https://www.npmjs.com/package/@umbraco-forms/backoffice).
 {% endhint %}
 
 ```bash

From 0dc49ef5bad429f4ce80de26ba905f40d4fcb4bd Mon Sep 17 00:00:00 2001
From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com>
Date: Fri, 14 Nov 2025 09:51:08 +0100
Subject: [PATCH 7/8] Update 16/umbraco-forms/developer/extending/README.md

---
 16/umbraco-forms/developer/extending/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/16/umbraco-forms/developer/extending/README.md b/16/umbraco-forms/developer/extending/README.md
index 682c111810a..5e9204b570c 100644
--- a/16/umbraco-forms/developer/extending/README.md
+++ b/16/umbraco-forms/developer/extending/README.md
@@ -58,7 +58,7 @@ export default defineConfig({
 
 This ensures that the Umbraco Backoffice packages are not bundled with your package.
 
-Read more about using Vite with Umbraco in the [Vite Package Setup](../../../umbraco-cms/customizing/development-flow/vite-package-setup.md) article.
+Read more about using Vite with Umbraco in the [Vite Package Setup](https://docs.umbraco.com/umbraco-cms/customizing/development-flow/vite-package-setup) article.
 
 ## Developing Custom Providers
 

From ec4bc19049dca566a9cbf6100546560a380fa5b2 Mon Sep 17 00:00:00 2001
From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com>
Date: Fri, 14 Nov 2025 09:51:15 +0100
Subject: [PATCH 8/8] Update 17/umbraco-forms/developer/extending/README.md

---
 17/umbraco-forms/developer/extending/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/17/umbraco-forms/developer/extending/README.md b/17/umbraco-forms/developer/extending/README.md
index 682c111810a..5e9204b570c 100644
--- a/17/umbraco-forms/developer/extending/README.md
+++ b/17/umbraco-forms/developer/extending/README.md
@@ -58,7 +58,7 @@ export default defineConfig({
 
 This ensures that the Umbraco Backoffice packages are not bundled with your package.
 
-Read more about using Vite with Umbraco in the [Vite Package Setup](../../../umbraco-cms/customizing/development-flow/vite-package-setup.md) article.
+Read more about using Vite with Umbraco in the [Vite Package Setup](https://docs.umbraco.com/umbraco-cms/customizing/development-flow/vite-package-setup) article.
 
 ## Developing Custom Providers