diff --git a/change/@microsoft-fast-element-ffdf0a73-daa4-462a-bc2f-60a25ce2066f.json b/change/@microsoft-fast-element-ffdf0a73-daa4-462a-bc2f-60a25ce2066f.json
new file mode 100644
index 00000000000..8a942f4ff8c
--- /dev/null
+++ b/change/@microsoft-fast-element-ffdf0a73-daa4-462a-bc2f-60a25ce2066f.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add working with decorators doc and updated api-report markdown",
+  "packageName": "@microsoft/fast-element",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/web-components/fast-element/api-extractor.context.json b/packages/web-components/fast-element/api-extractor.context.json
index 96748e457b0..b9c3b28e30b 100644
--- a/packages/web-components/fast-element/api-extractor.context.json
+++ b/packages/web-components/fast-element/api-extractor.context.json
@@ -5,7 +5,7 @@
     "apiReport": {
         "enabled": true,
         "reportFolder": "<projectFolder>/docs/context",
-        "reportFileName": "api-report.md"
+        "reportFileName": "api-report"
     },
     "docModel": {
         "enabled": true,
diff --git a/packages/web-components/fast-element/api-extractor.di.json b/packages/web-components/fast-element/api-extractor.di.json
index eb937082a00..3deb3f8f9f7 100644
--- a/packages/web-components/fast-element/api-extractor.di.json
+++ b/packages/web-components/fast-element/api-extractor.di.json
@@ -5,7 +5,7 @@
     "apiReport": {
         "enabled": true,
         "reportFolder": "<projectFolder>/docs/di",
-        "reportFileName": "api-report.md"
+        "reportFileName": "api-report"
     },
     "docModel": {
         "enabled": true,
diff --git a/packages/web-components/fast-element/docs/context/api-report.md b/packages/web-components/fast-element/docs/context/api-report.api.md
similarity index 98%
rename from packages/web-components/fast-element/docs/context/api-report.md
rename to packages/web-components/fast-element/docs/context/api-report.api.md
index 8e3e2f53b22..f7d84f5f86e 100644
--- a/packages/web-components/fast-element/docs/context/api-report.md
+++ b/packages/web-components/fast-element/docs/context/api-report.api.md
@@ -27,7 +27,7 @@ export const Context: Readonly<{
 // @public
 export type ContextCallback<ValueType> = (value: ValueType, dispose?: () => void) => void;
 
-// Warning: (ae-forgotten-export) The symbol "ParameterDecorator" needs to be exported by the entry point context.d.ts
+// Warning: (ae-forgotten-export) The symbol "ParameterDecorator_2" needs to be exported by the entry point context.d.ts
 //
 // @public
 export type ContextDecorator<T = any> = Readonly<Context<T>> & PropertyDecorator & ParameterDecorator_2;
diff --git a/packages/web-components/fast-element/docs/di/api-report.md b/packages/web-components/fast-element/docs/di/api-report.api.md
similarity index 100%
rename from packages/web-components/fast-element/docs/di/api-report.md
rename to packages/web-components/fast-element/docs/di/api-report.api.md
diff --git a/sites/website/sidebars.js b/sites/website/sidebars.js
index a3c2373393e..af651d2218a 100644
--- a/sites/website/sidebars.js
+++ b/sites/website/sidebars.js
@@ -41,6 +41,7 @@ module.exports = {
             },
             items: [
                 "advanced/working-with-custom-elements",
+                "advanced/working-without-decorators",
                 "advanced/dependency-injection",
             ],
         },
diff --git a/sites/website/src/docs/advanced/working-without-decorators.md b/sites/website/src/docs/advanced/working-without-decorators.md
new file mode 100644
index 00000000000..527a4077ed0
--- /dev/null
+++ b/sites/website/src/docs/advanced/working-without-decorators.md
@@ -0,0 +1,90 @@
+---
+id: working-without-decorators
+title: Working without Decorators
+sidebar_label: Working without Decorators
+keywords:
+  - decorators
+---
+
+Most of our documented examples include the use of TypeScript decorators. However, as decorators are an unimplemented feature in JavaScript, using them may not be right for your project. See [TypeScript documentation](https://www.typescriptlang.org/docs/handbook/decorators.html) for details on our implementation.
+
+The static `definition` accepts the same configuration options as the `@attr` decorator. For example, to bind a property name that is different from an attribute name:
+
+```javascript
+import { FASTElement, html, css } from '@microsoft/fast-element';
+
+export class MyElement extends FASTElement {
+  static definition = {
+    name: 'my-element',
+    template: html`<div>${(x) => x.count}</div>`,
+    styles: css`div { background: red }`,
+    attributes: [
+      'count',
+    ],
+  };
+}
+
+FASTElement.define(MyElement);
+```
+
+```html
+<my-element count="42">
+```
+
+This accepts the same configuration options as the `@attr` so for example to bind a property name that is different from an attribute name:
+
+```javascript
+import { FASTElement, html, css } from '@microsoft/fast-element';
+
+export class MyElement extends FASTElement {
+  static definition = {
+    name: 'my-element',
+    template: html`<div>${(x) => x.currentCount}</div>`,
+    styles: css`div { background: red }`,
+    attributes: [
+      {
+        attribute: 'current-count',
+        property: 'currentCount'
+      },
+    ],
+  };
+  
+  currentCount = 42;
+}
+
+FASTElement.define(MyElement);
+```
+
+If you need to add a converter to your attribute:
+
+```javascript
+import { FASTElement, html, css } from '@microsoft/fast-element';
+
+const converter = {
+  toView: (value) => {
+    return value / 2;
+  },
+  fromView: (value) => {
+    return value / 2;
+  },
+};
+
+export class MyElement extends FASTElement {
+  static definition = {
+    name: 'my-element',
+    template: html`<div>${(x) => x.currentCount}</div>`,
+    styles: css`div { background: red }`,
+    attributes: [
+      {
+        attribute: 'current-count',
+        property: 'currentCount',
+        converter
+      },
+    ],
+  };
+  
+  currentCount = 42;
+}
+
+FASTElement.define(MyElement);
+```
\ No newline at end of file
diff --git a/sites/website/src/docs/integrations.md b/sites/website/src/docs/integrations.md
index ea63699f5a4..a8ec92becd6 100644
--- a/sites/website/src/docs/integrations.md
+++ b/sites/website/src/docs/integrations.md
@@ -243,7 +243,7 @@ Here's an example starter `taconfig.json` that you can use:
     "target": "ES2015",
     "module": "ES2015",
     "moduleResolution": "node",
-    "importHelpers": true,
+    "importHelpers": true, // when using decorators this allows for the smallest footprint using tslib
     "experimentalDecorators": true,
     "declaration": true,
     "declarationMap": true,