diff --git a/packages/lit-dev-content/site/css/global.css b/packages/lit-dev-content/site/css/global.css
index e802d7bcb..2efc986ed 100644
--- a/packages/lit-dev-content/site/css/global.css
+++ b/packages/lit-dev-content/site/css/global.css
@@ -80,3 +80,13 @@ a {
height: 1px;
overflow: hidden;
}
+
+body[code-language-preference="ts"] [code-language]:not([code-language="ts"]) {
+ /* Hide JS content when preference is TS. */
+ display: none;
+}
+
+body[code-language-preference="js"] [code-language]:not([code-language="js"]) {
+ /* Hide TS content when preference is JS. */
+ display: none;
+}
\ No newline at end of file
diff --git a/packages/lit-dev-content/site/docs/v3/components/overview.md b/packages/lit-dev-content/site/docs/v3/components/overview.md
index c365610e2..9428d4981 100644
--- a/packages/lit-dev-content/site/docs/v3/components/overview.md
+++ b/packages/lit-dev-content/site/docs/v3/components/overview.md
@@ -26,3 +26,15 @@ Creating a Lit component involves a number of concepts:
Here's a sample component:
{% playground-example "v3-docs/components/overview/simple-greeting" "simple-greeting.ts" %}
+
+
+
+{% aside "info"%}
+
+This example uses TypeScript decorators.
+
+See the [Decorators](/docs/v3/components/decorators) documentation for more information on configuring TypeScript for decorators.
+
+{% endaside %}
+
+
diff --git a/packages/lit-dev-content/site/docs/v3/tools/development.md b/packages/lit-dev-content/site/docs/v3/tools/development.md
index 43eea8a59..226e94c41 100644
--- a/packages/lit-dev-content/site/docs/v3/tools/development.md
+++ b/packages/lit-dev-content/site/docs/v3/tools/development.md
@@ -202,12 +202,23 @@ For full installation and usage instructions, see the [Web Dev Server documentat
## TypeScript { #typescript }
-TypeScript extends the Javascript language by adding support for types. Types are useful for catching errors early and making code more readable and understandable.
+Lit support developing components in TypeScript, including full type declarations for the Lit APIs, standard and experimental decorators, and community tools for template type-checking and linting.
+
+Because Lit is just a library, and doesn't require a compiler or use non-standard langauge syntax, there are no specific TypeScript tools that are required. Lit works with the official TypeScript compiler, `tsc`, with TypeScript wrappers such as those for Rollup, Vite, or Webpack, and alternate compilers like `esbuild`.
+
+The main requirements of a TypeScript project are:
+- Enabling a modern JavaScript language level, like with the `"ES2021"` [lib](https://www.typescriptlang.org/tsconfig/#lib).
+- Enabling the DOM types with the `"DOM"` [lib](https://www.typescriptlang.org/tsconfig/#lib).
+- Optionally [enabling experimental decorators](https://www.typescriptlang.org/tsconfig/#experimentalDecorators) and [disabling "define" semantics for class fields](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields), if you choose to use TypeScript's experimental decorators.
+
+These options are generally set in your project's tsconfig.
+
+### Installation
To install TypeScript in your project:
```bash
-npm install typescript --save-dev
+npm i -D typescript
```
To build the code:
@@ -218,6 +229,10 @@ npx tsc --watch
For full installation and usage instructions, see the [TypeScript site](https://www.typescriptlang.org/). To get started, the sections on [installing TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html) and [using its features](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html) are particularly helpful.
+### Decorators
+
+TypeScript supports two versions of decorators: experimental and standard. See our [Decorators](/docs/v3/components/decorators/#decorators-typescript) documentation for more information.
+
## JavaScript and TypeScript linting { #linting }
Linting can help catch errors in your code. We recommend using [ESLint](https://eslint.org) for linting Lit code.