diff --git a/netlify.toml b/netlify.toml
index 2e04d1c5..b880a3e6 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -11,4 +11,9 @@
 [[redirects]]
   status = 302
   from = "/discord/"
-  to = "https://discord.gg/dmDmjFCKuH"
\ No newline at end of file
+  to = "https://discord.gg/dmDmjFCKuH"
+
+[[redirects]]
+  status = 301
+  from = "/docs/plugins/typescript/"
+  to = "/docs/resources/typescript/"
\ No newline at end of file
diff --git a/src/pages/docs/content-as-data/collections.md b/src/pages/docs/content-as-data/collections.md
index d26b5d67..cfecbc87 100644
--- a/src/pages/docs/content-as-data/collections.md
+++ b/src/pages/docs/content-as-data/collections.md
@@ -6,9 +6,9 @@ tocHeading: 2
 
 # Collections
 
-Collections are a feature in Greenwood by which you can use [frontmatter](/docs/resources/markdown/#frontmatter) to group pages that can then be referenced through [JavaScript](/docs/content-as-data/data-client/) or [active frontmatter](/docs/content-as-data/active-frontmatter/).
+Collections are a feature in Greenwood by which you can use [frontmatter](/docs/resources/markdown/#frontmatter) to group pages that can then be referenced through [JavaScript](/docs/content-as-data/data-client/) or [active frontmatter](/docs/content-as-data/active-frontmatter/). This can be a useful way to group pages for things like navigation menus based on the content in your pages directory.
 
-This can be a useful way to group pages for things like navigation menus based on the content in your pages directory.
+See our [reference docs on Greenwood's available types](/docs/reference/appendix/#types) for more information on authoring with TypeScript.
 
 ## Usage
 
diff --git a/src/pages/docs/content-as-data/data-client.md b/src/pages/docs/content-as-data/data-client.md
index 098e2b3f..6bdf56c2 100644
--- a/src/pages/docs/content-as-data/data-client.md
+++ b/src/pages/docs/content-as-data/data-client.md
@@ -6,7 +6,9 @@ tocHeading: 2
 
 # Data Client
 
-To access your content as data with Greenwood, there are three pre-made APIs you can use, based on your use case. These are isomorphic in that they will consume live data during development, and statically build out each query at build time to its own JSON file that will be fetched client side without needing a. This way, you can serialize and / or hydrate from this data as needed based on your needs.
+To access your content as data with Greenwood, there are three pre-made APIs you can use, based on your use case. These are isomorphic in that they will consume live data during development, and statically build out each query at build time to its own JSON file that will be fetched client side without needing a server. This way, you can serialize and / or hydrate from this data as needed based on your needs.
+
+See our [reference docs on Greenwood's available types](/docs/reference/appendix/#types) for more information on authoring with TypeScript.
 
 > This feature works best when used for build time templating when combined with the [**static** optimization](/docs/reference/configuration/#optimization) setting.
 
diff --git a/src/pages/docs/plugins/css-modules.md b/src/pages/docs/plugins/css-modules.md
index 7eab7c46..d180e00f 100644
--- a/src/pages/docs/plugins/css-modules.md
+++ b/src/pages/docs/plugins/css-modules.md
@@ -2,7 +2,7 @@
 title: CSS Modules
 label: CSS Modules
 layout: docs
-order: 3
+order: 2
 tocHeading: 2
 ---
 
@@ -123,3 +123,46 @@ And reference that in your (Light DOM) HTML based Web Component:
 <!-- prettier-ignore-end -->
 
 From there, Greenwood will scope your CSS class names by prefixing them with the filename and a hash of the contents, inline that into a `<style>` tag in the HTML, and then strip the reference to the _module.css_ file from your JavaScript file.
+
+## Types
+
+Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```js
+  /** @type {import('@greenwood/plugin-css-modules').CssModulesPlugin} */
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```ts
+  import type { CssModulesPlugin } from '@greenwood/plugin-css-modules';
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+To support typing of `.module.css` imports, you can add this type definition to your project:
+
+<app-ctc-block variant="snippet" heading="src/types.d.ts">
+
+```ts
+declare module "*.module.css" {
+  const styles: { [className: string]: string };
+  export default styles;
+}
+```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
diff --git a/src/pages/docs/plugins/index.md b/src/pages/docs/plugins/index.md
index 0ee45117..5a87ce2b 100644
--- a/src/pages/docs/plugins/index.md
+++ b/src/pages/docs/plugins/index.md
@@ -13,7 +13,6 @@ tocHeading: 2
 ## Featured
 
 - [Lit SSR](/docs/plugins/lit-ssr/) - For Lit users, a custom renderer plugin to support Lit+SSR
-- [TypeScript](/docs/plugins/typescript/) - A plugin for transforming files written in TypeScript
 - [PostCSS](/docs/plugins/postcss/) - Leverage PostCSS plugins, like [Tailwind](/guides/ecosystem/tailwind/)
 - [CSS Modules](/docs/plugins/css-modules/) - Support for [CSS Modules](https://github.com/css-modules/css-modules) ™️ syntax
 - [Raw Loader](/docs/plugins/raw/) - Import arbitrary text files as ESM
@@ -25,7 +24,7 @@ Below is the official list of supported first-party plugins available by the Gre
 <br>
 
 | Name                                                                                                      | Description                                                                                                   |
-| --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | --- |
 | [Babel](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-babel)                  | Use [**Babel**](https://babeljs.io/) plugins, presets, and configuration in your project.                     |
 | [HTML Include](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-include-html)    | Inspired by the original [HTML Imports spec](https://www.html5rocks.com/en/tutorials/webcomponents/imports/). |
 | [Import Raw](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-import-raw)        | Enables usage of ESM syntax for loading arbitrary file contents as a string.                                  |
@@ -34,6 +33,5 @@ Below is the official list of supported first-party plugins available by the Gre
 | [Netlify](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-adapter-netlify)      | Deploy serverless and edge functions to [**Netlify**](https://www.netlify.com/).                              |
 | [Polyfills](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-polyfills)          | Web Component related polyfills for older browsers.                                                           |
 | [PostCSS](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-postcss)              | Allows usage of [**PostCSS**](https://postcss.org/) plugins and configuration in your project.                |
-| [Puppeteer](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-renderer-puppeteer) | A rendering plugin to support prerendering a Greenwood project using Puppeteer.                               |
-| [TypeScript](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-typescript)        | Allows usage of [**TypeScript**](https://www.typescriptlang.org/) syntax.                                     |
+| [Puppeteer](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-renderer-puppeteer) | A rendering plugin to support prerendering a Greenwood project using Puppeteer.                               |     |
 | [Vercel](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-adapter-vercel)        | Deploy serverless and edge functions with [**Vercel**](https://vercel.com/).                                  |
diff --git a/src/pages/docs/plugins/lit-ssr.md b/src/pages/docs/plugins/lit-ssr.md
index aedc195c..90de209f 100644
--- a/src/pages/docs/plugins/lit-ssr.md
+++ b/src/pages/docs/plugins/lit-ssr.md
@@ -2,7 +2,7 @@
 title: Lit SSR
 label: Lit SSR
 layout: docs
-order: 2
+order: 1
 tocHeading: 2
 ---
 
@@ -123,3 +123,33 @@ Below is an example of generating a page of LitElement based Web Components:
 <!-- prettier-ignore-end -->
 
 > Keep in mind you will need to make sure your Lit Web Components are isomorphic and [properly leveraging `LitElement`'s lifecycles](https://github.com/lit/lit/tree/main/packages/labs/ssr#notes-and-limitations) and browser / Node APIs accordingly for maximum compatibility and portability.
+
+## Types
+
+Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```js
+  /** @type {import('@greenwood/plugin-renderer-lit').LitRendererPlugin} */
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```ts
+  import type { LitRendererPlugin } from '@greenwood/plugin-renderer-lit';
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+> If you're using Lit with TypeScript, you'll most likely be using [their decorators](https://lit.dev/docs/components/decorators/#compiler-output-considerations), If so, make sure to enable the [`useTsc` option](/docs/reference/configuration/#use-typescript-compiler) in your Greenwood configuration file.
diff --git a/src/pages/docs/plugins/postcss.md b/src/pages/docs/plugins/postcss.md
index eeaee768..8bce1d35 100644
--- a/src/pages/docs/plugins/postcss.md
+++ b/src/pages/docs/plugins/postcss.md
@@ -2,7 +2,7 @@
 title: PostCSS
 label: PostCSS
 layout: docs
-order: 5
+order: 4
 tocHeading: 2
 ---
 
@@ -118,3 +118,31 @@ and see the results of the plugin in the generated styles
   }
 }
 ```
+
+## Types
+
+Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```js
+  /** @type {import('@greenwood/plugin-postcss').PostCssPlugin} */
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```ts
+  import type { PostCssPlugin } from '@greenwood/plugin-postcss';
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
diff --git a/src/pages/docs/plugins/raw.md b/src/pages/docs/plugins/raw.md
index 8e0f04ea..007b35a9 100644
--- a/src/pages/docs/plugins/raw.md
+++ b/src/pages/docs/plugins/raw.md
@@ -1,6 +1,6 @@
 ---
 layout: docs
-order: 4
+order: 3
 tocHeading: 2
 ---
 
@@ -111,3 +111,46 @@ Or perfect for statically embedding SVGs into HTML:
 </app-ctc-block>
 
 <!-- prettier-ignore-end -->
+
+## Types
+
+Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```js
+  /** @type {import('@greenwood/plugin-import-raw').ImportRawPlugin} */
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```ts
+  import type { ImportRawPlugin } from '@greenwood/plugin-import-raw';
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+To support typing of raw file imports, you can add this type definition to your project:
+
+<app-ctc-block variant="snippet" heading="src/types.d.ts">
+
+```ts
+declare module "*?type=raw" {
+  const content: string;
+  export default content;
+}
+```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
diff --git a/src/pages/docs/plugins/typescript.md b/src/pages/docs/plugins/typescript.md
deleted file mode 100644
index 0aa50df3..00000000
--- a/src/pages/docs/plugins/typescript.md
+++ /dev/null
@@ -1,122 +0,0 @@
----
-title: TypeScript
-label: TypeScript
-layout: docs
-order: 1
-tocHeading: 2
----
-
-# TypeScript
-
-A plugin for authoring in [**TypeScript**](https://www.typescriptlang.org/). See the [plugin's README](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-typescript) for complete usage information.
-
-## Installation
-
-You can use your favorite JavaScript package manager to install this plugin:
-
-<!-- prettier-ignore-start -->
-<app-ctc-block variant="runners">
-
-  ```shell
-  npm i -D @greenwood/plugin-typescript
-  ```
-
-  ```shell
-  yarn add @greenwood/plugin-typescript --save-dev
-  ```
-
-  ```shell
-  pnpm add -D @greenwood/plugin-typescript
-  ```
-
-</app-ctc-block>
-
-<!-- prettier-ignore-end -->
-
-And then add the plugin to your _greenwood.config.js_.
-
-<!-- prettier-ignore-start -->
-
-<app-ctc-block variant="snippet" heading="greenwood.config.js">
-
-  ```js
-  import { greenwoodPluginTypeScript } from "@greenwood/plugin-typescript";
-
-  export default {
-    plugins: [greenwoodPluginTypeScript()],
-  };
-  ```
-
-</app-ctc-block>
-
-<!-- prettier-ignore-end -->
-
-## Usage
-
-Now you can write some TypeScript!
-
-<!-- prettier-ignore-start -->
-
-<app-ctc-block variant="snippet">
-
-  ```ts
-  import { html, css, LitElement, customElement, property } from "lit-element";
-
-  @customElement("app-greeting")
-  export class GreetingComponent extends LitElement {
-    static styles = css`
-      p {
-        color: blue;
-      }
-    `;
-
-    @property()
-    name = "Somebody";
-
-    render() {
-      return html`<p>Hello, ${this.name}!</p>`;
-    }
-  }
-  ```
-
-</app-ctc-block>
-
-<!-- prettier-ignore-end -->
-
-And use it in your project like you would use a _.js_ file!
-
-<!-- prettier-ignore-start -->
-
-<app-ctc-block variant="snippet">
-
-  ```html
-  <script type="module" src="/components/greeting.ts"></script>
-  ```
-
-</app-ctc-block>
-
-<!-- prettier-ignore-end -->
-
-This is can also support SSR pages by passing the **servePage** option:
-
-<!-- prettier-ignore-start -->
-
-<app-ctc-block variant="snippet" heading="greenwood.config.js">
-
-  ```js
-  import { greenwoodPluginTypeScript } from "@greenwood/plugin-typescript";
-
-  export default {
-    plugins: [
-      greenwoodPluginTypeScript({
-        servePage: false,
-      }),
-    ],
-  };
-  ```
-
-</app-ctc-block>
-
-<!-- prettier-ignore-end -->
-
-> For server and pre-rendering use cases, make sure to enable [custom imports](/docs/pages/server-rendering/#custom-imports).
diff --git a/src/pages/docs/reference/appendix.md b/src/pages/docs/reference/appendix.md
index cbc93899..9f326bab 100644
--- a/src/pages/docs/reference/appendix.md
+++ b/src/pages/docs/reference/appendix.md
@@ -1,11 +1,61 @@
 ---
 layout: docs
-order: 5
+order: 4
 tocHeading: 2
 ---
 
 # Appendix
 
+## Types
+
+In addition to [supporting TypeScript](/docs/resources/typescript/) out of the box, Greenwood also exports a number of useful types that you can use when authoring your configuration files, plugins, data clients, etc as TypeScript. You can find all available types for the CLI [here](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/src/types/index.d.ts) including types for configuration, content as data APIs, graph and compilation objects, plugins, and more. Each of Greenwood's plugin will also provide their own set of types within their package at _src/types/index.d.ts_.
+
+For example, here is how to author a TypeScript based configuration file:
+
+```ts
+import type { Config } from "@greenwood/cli";
+
+const config: Config = {
+  prerender: true,
+};
+
+export default config;
+```
+
+Here's an example of authoring with Greenwood's Collection capability.
+
+```ts
+import { getContentByRoute } from "@greenwood/cli/src/data/client.js";
+import type { Page } from "@greenwood/cli";
+
+type BlogPost = Page & {
+  data: {
+    author: string;
+  };
+};
+
+export default class BlogPostsList extends HTMLElement {
+  async connectedCallback() {
+    const posts: BlogPost[] = await getContentByRoute("/blog/");
+
+    this.innerHTML = `
+      <div>
+        ${posts
+          .reverse()
+          .map((post) => {
+            return `
+              <li><a href="${post.route}">${post.title}</a><span>by: ${post.data.author}</span></li>
+            `;
+          })
+          .join("")}
+      </div>
+    `;
+  }
+}
+
+customElements.define("blog-posts-list", BlogPostsList);
+```
+
 ## Build Output
 
 Greenwood produces a consistent build output that typically mirrors the source directory as it persists all file naming, albeit with hashes included. For static content, this can be used by static hosting sites with no additional configuration, on serverless hosting with our adapters, or self-hosted.
@@ -88,11 +138,11 @@ It is fine-tuned for creating Light and Shadow DOM based custom elements. The fu
 - `customElements.define`
 - `attachShadow`
 - `innerHTML`
-- ` [get|set|has]Attribute`
+- `[get|set|has]Attribute`
 - `<template>` / DocumentFragment
 - `addEventListener` (as a no-op)
 - `CSSStyleSheet` (all methods act as no-ops on the server)
-- TypeScript
+- TypeScript (type stripping)
 
 While not all DOM APIs are supported, in general you can still use them and combine their usage with [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) for a quick "no-op".
 
diff --git a/src/pages/docs/reference/configuration.md b/src/pages/docs/reference/configuration.md
index dce420a5..d9a7f54c 100644
--- a/src/pages/docs/reference/configuration.md
+++ b/src/pages/docs/reference/configuration.md
@@ -11,6 +11,7 @@ This section details all the supported configuration options available with **Gr
 Below is a _greenwood.config.js_ file reflecting default values:
 
 ```js
+/** @type {import('@greenwood/cli').Config} */
 export default {
   activeContent: false,
   basePath: "",
@@ -35,6 +36,7 @@ export default {
   port: 8080,
   prerender: false,
   staticRouter: false,
+  useTsc: false,
   workspace: new URL("./src/", import.meta.url),
 };
 ```
@@ -460,6 +462,26 @@ Setting the `staticRouter` option to `true` will add a small router runtime in p
 
 <!-- prettier-ignore-end -->
 
+## Use TypeScript Compiler
+
+Depending on the TypeScript features / JavaScript syntax you're using, you may need more then just Greenwood's default capability of only type _stripping_. For these cases where you want to use the full TypeScript compiler for transpilation, you'll want to [setup TypeScript for Greenwood](/docs/resources/typescript/) and set the `useTsc` flag.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```js
+  export default {
+    useTsc: true,
+  };
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+> At this time, _greenwood.config.ts_ does not support `tsc` processing. You can follow along with [this discussion](https://github.com/ProjectEvergreen/greenwood/discussions/1453) to get updates and provide feedback on this capability.
+
 ## Workspace
 
 Path to where all your project files will be located, provided a valid `URL`. Default is `new URL('./src', import.meta.url)` relative to the project's root, where the _greenwood.config.js_ file is located.
diff --git a/src/pages/docs/reference/plugins-api.md b/src/pages/docs/reference/plugins-api.md
index baa8124d..6eab981a 100644
--- a/src/pages/docs/reference/plugins-api.md
+++ b/src/pages/docs/reference/plugins-api.md
@@ -10,6 +10,8 @@ tocHeading: 2
 
 Below are the various plugin types you can use to extend and further customize Greenwood.
 
+> Types are available for all plugin constructs. Please see our [reference docs](/docs/reference/appendix/#types) to learn more.
+
 ## Overview
 
 Each plugin must return a function that has the following three properties:
@@ -72,6 +74,7 @@ An adapter plugin is simply an `async` function that gets invoked by the Greenwo
 <app-ctc-block variant="snippet">
 
   ```js
+  /** @type {import("@greenwood/cli").AdapterPlugin} */
   const greenwoodPluginMyPlatformAdapter = () => {
     return {
       type: "adapter",
@@ -93,7 +96,7 @@ An adapter plugin is simply an `async` function that gets invoked by the Greenwo
 
 ### Example
 
-The most common use case is to "shim" in a hosting platform handler function in front of Greenwood's, which is based on two parameters of `Request` / `Response`. In addition, producing any hosting provided specific metadata is also doable at this stage.
+The most common use case is to "shim" in a hosting platform handler function in front of Greenwood's, which is based on standard `Request` / `Response` objects. In addition, producing any hosting provided specific metadata is also doable at this stage.
 
 Here is an example of the "generic adapter" created for Greenwood's own internal test suite.
 
@@ -224,6 +227,7 @@ Your plugin might look like this:
   *     acme-theme-pack.js
   *     package.json
   */
+  /** @type {import("@greenwood/cli").ContextPlugin} */
   export function myContextPlugin() {
     return {
       type: "context",
@@ -259,6 +263,7 @@ This plugin supports providing an array of "paired" URL objects that can either
 <app-ctc-block variant="snippet" heading="my-copy-plugin.js">
 
   ```js
+  /** @type {import("@greenwood/cli").CopyPlugin} */
   export function myCopyPlugin() {
     return {
       type: "copy",
@@ -344,6 +349,7 @@ This plugin expects to be given a path to a module that exports a function to ex
 <app-ctc-block variant="snippet" heading="my-renderer-plugin.js">
 
   ```js
+  /** @type {import("@greenwood/cli").RendererPlugin} */
   const greenwoodPluginMyCustomRenderer = () => {
     return {
       type: "renderer",
@@ -404,11 +410,8 @@ A [resource "interface"](https://github.com/ProjectEvergreen/greenwood/tree/mast
 <app-ctc-block variant="snippet" heading="my-resource-plugin.js">
 
   ```js
-  import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";
-
-  class ExampleResource extends ResourceInterface {
+  class ExampleResource {
     constructor(compilation, options = {}) {
-      super();
 
       this.compilation = compilation; // Greenwood's compilation object
       this.options = options; // any optional configuration provided by the user of your plugin
@@ -419,6 +422,7 @@ A [resource "interface"](https://github.com/ProjectEvergreen/greenwood/tree/mast
     // lifecycles go here
   }
 
+  /** @type {import("@greenwood/cli").ResourcePlugin} */
   export function myExampleResourcePlugin(options = {}) {
     return {
       type: "resource",
@@ -456,9 +460,8 @@ When requesting a resource like a file, such as _/main.js_, Greenwood needs to k
 
   ```js
   import fs from "fs";
-  import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";
 
-  class UserWorkspaceResource extends ResourceInterface {
+  class UserWorkspaceResource {
     async shouldResolve(url) {
       const { pathname } = url;
       const { userWorkspace } = this.compilation.context;
@@ -509,9 +512,8 @@ Below is an example from [Greenwood's codebase](https://github.com/ProjectEvergr
 
   ```js
   import fs from "fs";
-  import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";
 
-  class StandardJavaScriptResource extends ResourceInterface {
+  class StandardJavaScriptResource {
     async shouldServe(url) {
       return url.protocol === "file:" && url.pathname.split(".").pop() === "js";
     }
@@ -555,7 +557,6 @@ Below is an example of Greenwood's [**PostCSS** plugin](/docs/plugins/postcss/)
 <app-ctc-block variant="snippet">
 
   ```js
-  import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";
   import { normalizePathnameForWindows } from "@greenwood/cli/src/lib/resource-utils.js";
   import postcss from "postcss";
 
@@ -563,9 +564,10 @@ Below is an example of Greenwood's [**PostCSS** plugin](/docs/plugins/postcss/)
     // ...
   }
 
-  class PostCssResource extends ResourceInterface {
+  class PostCssResource {
     constructor(compilation, options) {
-      super(compilation, options);
+      this.compilation = compilation;
+      this.options = options;
       this.extensions = ["css"];
       this.contentType = "text/css";
     }
@@ -621,9 +623,7 @@ import styles from "./hero.css?type=raw";
 <app-ctc-block variant="snippet">
 
   ```js
-  import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";
-
-  class ImportRawResource extends ResourceInterface {
+  class ImportRawResource {
     async shouldIntercept(url) {
       const { protocol, searchParams } = url;
       const type = searchParams.get("type");
@@ -667,13 +667,11 @@ Below is an example from [Greenwood's codebase](https://github.com/ProjectEvergr
 <app-ctc-block variant="snippet" heading="my-resource-plugin.js">
 
   ```js
-  import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";
-
   function bundleCss() {
     // ..
   }
 
-  class StandardCssResource extends ResourceInterface {
+  class StandardCssResource {
     async shouldOptimize(url, response) {
       const { protocol, pathname } = url;
 
@@ -724,6 +722,7 @@ Simply use the `provider` method to return an array of Rollup plugins:
 
   const packageJson = JSON.parse(fs.readFileSync("./package.json", "utf-8"));
 
+  /** @type {import("@greenwood/cli").RollupPlugin} */
   export function myRollupPlugin() {
     const now = new Date().now();
 
@@ -785,12 +784,12 @@ The below is an excerpt of [Greenwood's internal LiveReload server](https://gith
 <app-ctc-block variant="snippet" heading="my-server-plugin.js">
 
   ```js
-  import { ServerInterface } from "@greenwood/cli/src/lib/server-interface.js";
   import livereload from "livereload";
 
-  class LiveReloadServer extends ServerInterface {
+  class LiveReloadServer {
     constructor(compilation, options = {}) {
-      super(compilation, options);
+      this.compilation = compilation;
+      this.options = options;
 
       this.liveReloadServer = livereload.createServer({
         /* options */
@@ -807,6 +806,7 @@ The below is an excerpt of [Greenwood's internal LiveReload server](https://gith
     }
   }
 
+  /** @type {import("@greenwood/cli").ServerPlugin} */
   export function myServerPlugin(options = {}) {
     return {
       type: "server",
@@ -833,6 +833,7 @@ This plugin supports providing an array of "page" objects that will be added as
 <app-ctc-block variant="snippet" heading="my-source-plugin.js">
 
   ```js
+  /** @type {import("@greenwood/cli").SourcePlugin} */
   export const customExternalSourcesPlugin = () => {
     return {
       type: "source",
diff --git a/src/pages/docs/resources/markdown.md b/src/pages/docs/resources/markdown.md
index adca0129..d6270dc4 100644
--- a/src/pages/docs/resources/markdown.md
+++ b/src/pages/docs/resources/markdown.md
@@ -1,6 +1,6 @@
 ---
 layout: docs
-order: 4
+order: 5
 tocHeading: 2
 ---
 
diff --git a/src/pages/docs/resources/typescript.md b/src/pages/docs/resources/typescript.md
new file mode 100644
index 00000000..bbddd9b7
--- /dev/null
+++ b/src/pages/docs/resources/typescript.md
@@ -0,0 +1,95 @@
+---
+title: TypeScript
+label: TypeScript
+layout: docs
+order: 4
+tocHeading: 2
+---
+
+# TypeScript
+
+Greenwood provides built-in support for TypeScript, either through type-stripping (default behavior) or with the ability to fallback to [using the TypeScript compiler](/docs/reference/configuration/#use-typescript-compiler) if you're leveraging certain transformation based TypeScript features (like [`enums` and `namespaces`](https://devblogs.microsoft.com/typescript/announcing-typescript-5-8/#the---erasablesyntaxonly-option)) or JavaScript syntax like Decorators. If you need these additional capabilities, you can set the [`useTsc` option](/docs/reference/configuration/#use-typescript-compiler) in your Greenwood configuration file.
+
+> You can read [this guide](https://nodejs.org/en/learn/typescript/run-natively) to learn more about running TypeScript with NodeJS, including the [`--experimental-transform-types`](https://nodejs.org/docs/latest-v23.x/api/cli.html#--experimental-transform-types) flag. You can see an example Greenwood TypeScript repo [here](https://github.com/thescientist13/greenwood-native-typescript).
+
+## Setup
+
+The below steps will help you get up and running with TypeScript in your Greenwood project. The general recommendation is to use type-stripping during development for faster live reload, and then run TypeScript during CI (e.g. GitHub Actions) to check and enforce all types, e.g. `tsc --project tsconfig.json`.
+
+1. You will need to use Node **>= 22.6.0** and set the `--experimental-strip-types` flag
+1. Install TypeScript into your project, e.g. `npm i typescript --save-dev`
+1. Create a _tsconfig.json_ file at the root of your project with these minimum configuration settings. We recommend adding the [`erasableSyntaxOnly` setting](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly)
+
+  <!-- prettier-ignore-start -->
+
+  <app-ctc-block variant="snippet" heading="tsconfig.json">
+
+```json
+{
+  "compilerOptions": {
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "noEmit": true
+  }
+}
+```
+
+  </app-ctc-block>
+
+  <!-- prettier-ignore-end -->
+
+> _If you're feeling adventurous, you can use **>=23.x** and omit the `--experimental-strip-types` flag_. Keep an eye on [this PR](https://github.com/nodejs/node/pull/57298) for when unflagged type-stripping support may come to Node LTS **22.x**. 👀
+
+## Types
+
+### Configuration
+
+In addition to being able to author your components, SSR pages, and API routes in TypeScript, you can also author your configuration file (and plugins) in TypeScript by using a _greenwood.config.ts_ file.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet" heading="greenwood.config.ts">
+
+  ```ts
+  import type { Config } from '@greenwood/cli';
+
+  const config: Config = {
+    // ...
+  }
+
+  export default config;
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+See our [reference docs on Greenwood's available types](/docs/reference/appendix/#types) for more information on authoring with TypeScript.
+
+### Import Attributes
+
+Currently TypeScript does not support types for standard [JSON and CSS Import Attributes](https://github.com/microsoft/TypeScript/issues/46135). You can use the below snippets as a reference for providing these types for your own project in the meantime.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet" heading="src/types.d.ts">
+
+  ```ts
+  declare module "*.css" {
+    const sheet: CSSStyleSheet;
+
+    export default sheet;
+  }
+
+  declare module "*.json" {
+    const data: object;
+
+    export default data;
+  }
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
diff --git a/src/pages/guides/ecosystem/web-test-runner.md b/src/pages/guides/ecosystem/web-test-runner.md
index 477a1f04..9af66724 100644
--- a/src/pages/guides/ecosystem/web-test-runner.md
+++ b/src/pages/guides/ecosystem/web-test-runner.md
@@ -203,6 +203,70 @@ You can create a custom middleware in your _web-test-runner.config.js_ to resolv
 
 <!-- prettier-ignore-end -->
 
+## TypeScript
+
+If leveraging's Greenwood's [built-in TypeScript support](/docs/resources/typescript/), there are a couple options for integrating your TS based source files with WTR for testing.
+
+### esbuild
+
+WTR has an [**esbuild** plugin](https://modern-web.dev/guides/test-runner/typescript/) that can be configured to handle basic type stripping.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet" heading="web-test-runner.config.js">
+
+  ```js
+  import { esbuildPlugin } from "@web/dev-server-esbuild";
+
+  export default {
+    plugins: [
+      esbuildPlugin({ ts: true }),
+    ],
+  };
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+### `tsc`
+
+If you need the full power of the TypeScript compiler, you can leverage `tsc` directly along with your _tsconfig.json_ `compilerOptions` to transform all _.ts_ files.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet" heading="web-test-runner.config.js">
+
+  ```js
+  import fs from "fs/promises";
+  import tsc from "typescript";
+
+  const compilerOptions = ((await import(new URL("./tsconfig.json", import.meta.url), { with: { type: "json" } })).default).compilerOptions;
+
+  export default {
+    plugins: [{
+      name: "transpile-typescript",
+      async transform(context) {
+        const { url } = context.request;
+
+        if (url.endsWith(".ts")) {
+          const contents = await fs.readFile(new URL(`.${url}`, import.meta.url), "utf-8");
+          const body = tsc.transpileModule(contents, { compilerOptions }).outputText;
+
+          return {
+            body,
+            type: "js"
+          };
+        }
+      }
+    }]
+  }
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
 ## Resource Plugins
 
 If you're using one of Greenwood's [resource plugins](/docs/plugins/), you'll need to customize WTR manually through [its plugins option](https://modern-web.dev/docs/test-runner/plugins/) so it can leverage the Greenwood plugins your using to automatically handle these custom transformations.
diff --git a/src/pages/guides/tutorials/theme-packs.md b/src/pages/guides/tutorials/theme-packs.md
index ecbe4193..305dbf0b 100644
--- a/src/pages/guides/tutorials/theme-packs.md
+++ b/src/pages/guides/tutorials/theme-packs.md
@@ -195,13 +195,13 @@ Additionally, we make sure to pass the flag from above for `__isDevelopment` to
   ```js
   import fs from "fs";
   import { myThemePackPlugin } from "./my-theme-pack.js";
-  import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";
 
   const packageName = JSON.parse(fs.readFileSync("./package.json", "utf-8")).name;
 
-  class MyThemePackDevelopmentResource extends ResourceInterface {
+  class MyThemePackDevelopmentResource {
     constructor(compilation, options) {
-      super(compilation, options);
+      this.compilation = compilation;
+      this.options = options;
       this.extensions = ["*"];
     }