diff --git a/.gitignore b/.gitignore
index 8f464b6da..35c4ebb08 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,10 @@ packages/lit-dev-content/site/fonts/manrope
 packages/lit-dev-content/temp
 packages/lit-dev-content/samples/js
 packages/lit-dev-content/src/public-vars.ts
+# The unversioned docs are generated by:
+#
+# `npm run build:unversioned-docs -w lit-dev-content`
+packages/lit-dev-content/site/docs/unversioned
 
 packages/lit-dev-api/api-data/*/repo/
 packages/lit-dev-api/api-data/*/INSTALLED
diff --git a/packages/lit-dev-api/api-data/lit-2/pages.json b/packages/lit-dev-api/api-data/lit-2/pages.json
index e4c34714b..81406b2b1 100644
--- a/packages/lit-dev-api/api-data/lit-2/pages.json
+++ b/packages/lit-dev-api/api-data/lit-2/pages.json
@@ -12,7 +12,7 @@
         "name": "LitElement",
         "comment": {
           "shortText": "Base element class that manages element properties and attributes, and\nrenders a lit-html template.",
-          "text": "To define a component, subclass `LitElement` and implement a\n`render` method to provide the component's template. Define properties\nusing the [`properties`](/docs/api/LitElement/#LitElement.properties) property or the\n[`property`](/docs/api/decorators/#property) decorator.\n"
+          "text": "To define a component, subclass `LitElement` and implement a\n`render` method to provide the component's template. Define properties\nusing the [`properties`](/docs/v2/api/LitElement/#LitElement.properties) property or the\n[`property`](/docs/v2/api/decorators/#property) decorator.\n"
         },
         "sources": [
           {
@@ -949,7 +949,7 @@
                       "tag": "@nocollapse"
                     }
                   ],
-                  "shortText": "Creates a property accessor on the element prototype if one does not exist\nand stores a [`PropertyDeclaration`](/docs/api/ReactiveElement/#PropertyDeclaration) for the property with the\ngiven options. The property setter calls the property's `hasChanged`\nproperty option or uses a strict identity check to determine whether or not\nto request an update.",
+                  "shortText": "Creates a property accessor on the element prototype if one does not exist\nand stores a [`PropertyDeclaration`](/docs/v2/api/ReactiveElement/#PropertyDeclaration) for the property with the\ngiven options. The property setter calls the property's `hasChanged`\nproperty option or uses a strict identity check to determine whether or not\nto request an update.",
                   "text": "This method may be overridden to customize properties; however,\nwhen doing so, it's important to call `super.createProperty` to ensure\nthe property is setup correctly. This method calls\n`getPropertyDescriptor` internally to get a descriptor to install.\nTo customize what properties do when they are get or set, override\n`getPropertyDescriptor`. To customize the options for a property,\nimplement `createProperty` like this:\n```ts\nstatic createProperty(name, options) {\n  options = Object.assign(options, {myOption: true});\n  super.createProperty(name, options);\n}\n```\n"
                 },
                 "sources": [
@@ -1222,7 +1222,7 @@
                     }
                   ],
                   "shortText": "Returns the property options associated with the given property.\nThese options are defined with a `PropertyDeclaration` via the `properties`\nobject or the `@property` decorator and are registered in\n`createProperty(...)`.",
-                  "text": "Note, this method should be considered \"final\" and not overridden. To\ncustomize the options for a given property, override\n[`createProperty`](/docs/api/LitElement/#LitElement.createProperty).\n"
+                  "text": "Note, this method should be considered \"final\" and not overridden. To\ncustomize the options for a given property, override\n[`createProperty`](/docs/v2/api/LitElement/#LitElement.createProperty).\n"
                 },
                 "sources": [
                   {
@@ -1760,7 +1760,7 @@
                       "tag": "@nocollapse"
                     }
                   ],
-                  "shortText": "Array of styles to apply to the element. The styles should be defined\nusing the [`css`](/docs/api/styles/#css) tag function, via constructible stylesheets, or\nimported from native CSS module scripts.",
+                  "shortText": "Array of styles to apply to the element. The styles should be defined\nusing the [`css`](/docs/v2/api/styles/#css) tag function, via constructible stylesheets, or\nimported from native CSS module scripts.",
                   "text": "Note on Content Security Policy:\nElement styles are implemented with `<style>` tags when the browser doesn't\nsupport adopted StyleSheets. To use such `<style>` tags with the style-src\nCSP directive, the style-src value must either include 'unsafe-inline' or\n`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated\nnonce.\nTo provide a nonce to use on generated `<style>` elements, set\n`window.litNonce` to a server-generated nonce in your page's HTML, before\nloading application code:\n```html\n<script>\n  // Generated and unique per request:\n  window.litNonce = 'a1b2c3d4';\n</script>\n```\n"
                 },
                 "sources": [
@@ -3974,7 +3974,7 @@
                       "tag": "@nocollapse"
                     }
                   ],
-                  "shortText": "Creates a property accessor on the element prototype if one does not exist\nand stores a [`PropertyDeclaration`](/docs/api/ReactiveElement/#PropertyDeclaration) for the property with the\ngiven options. The property setter calls the property's `hasChanged`\nproperty option or uses a strict identity check to determine whether or not\nto request an update.",
+                  "shortText": "Creates a property accessor on the element prototype if one does not exist\nand stores a [`PropertyDeclaration`](/docs/v2/api/ReactiveElement/#PropertyDeclaration) for the property with the\ngiven options. The property setter calls the property's `hasChanged`\nproperty option or uses a strict identity check to determine whether or not\nto request an update.",
                   "text": "This method may be overridden to customize properties; however,\nwhen doing so, it's important to call `super.createProperty` to ensure\nthe property is setup correctly. This method calls\n`getPropertyDescriptor` internally to get a descriptor to install.\nTo customize what properties do when they are get or set, override\n`getPropertyDescriptor`. To customize the options for a property,\nimplement `createProperty` like this:\n```ts\nstatic createProperty(name, options) {\n  options = Object.assign(options, {myOption: true});\n  super.createProperty(name, options);\n}\n```\n"
                 },
                 "sources": [
@@ -4215,7 +4215,7 @@
                     }
                   ],
                   "shortText": "Returns the property options associated with the given property.\nThese options are defined with a `PropertyDeclaration` via the `properties`\nobject or the `@property` decorator and are registered in\n`createProperty(...)`.",
-                  "text": "Note, this method should be considered \"final\" and not overridden. To\ncustomize the options for a given property, override\n[`createProperty`](/docs/api/ReactiveElement/#ReactiveElement.createProperty).\n"
+                  "text": "Note, this method should be considered \"final\" and not overridden. To\ncustomize the options for a given property, override\n[`createProperty`](/docs/v2/api/ReactiveElement/#ReactiveElement.createProperty).\n"
                 },
                 "sources": [
                   {
@@ -4620,7 +4620,7 @@
                       "tag": "@nocollapse"
                     }
                   ],
-                  "shortText": "Array of styles to apply to the element. The styles should be defined\nusing the [`css`](/docs/api/styles/#css) tag function, via constructible stylesheets, or\nimported from native CSS module scripts.",
+                  "shortText": "Array of styles to apply to the element. The styles should be defined\nusing the [`css`](/docs/v2/api/styles/#css) tag function, via constructible stylesheets, or\nimported from native CSS module scripts.",
                   "text": "Note on Content Security Policy:\nElement styles are implemented with `<style>` tags when the browser doesn't\nsupport adopted StyleSheets. To use such `<style>` tags with the style-src\nCSP directive, the style-src value must either include 'unsafe-inline' or\n`nonce-<base64-value>` with `<base64-value>` replaced be a server-generated\nnonce.\nTo provide a nonce to use on generated `<style>` elements, set\n`window.litNonce` to a server-generated nonce in your page's HTML, before\nloading application code:\n```html\n<script>\n  // Generated and unique per request:\n  window.litNonce = 'a1b2c3d4';\n</script>\n```\n"
                 },
                 "sources": [
@@ -6963,7 +6963,7 @@
         "name": "css",
         "comment": {
           "shortText": "A template literal tag which can be used with LitElement's\n`styles` property to set element styles.",
-          "text": "For security reasons, only literal string values and number may be used in\nembedded expressions. To incorporate non-literal values [`unsafeCSS`](/docs/api/styles/#unsafeCSS)\nmay be used inside an expression.\n"
+          "text": "For security reasons, only literal string values and number may be used in\nembedded expressions. To incorporate non-literal values [`unsafeCSS`](/docs/v2/api/styles/#unsafeCSS)\nmay be used inside an expression.\n"
         },
         "sources": [
           {
@@ -7295,7 +7295,7 @@
       {
         "name": "unsafeCSS",
         "comment": {
-          "shortText": "Wrap a value for interpolation in a [`css`](/docs/api/styles/#css) tagged template literal.",
+          "shortText": "Wrap a value for interpolation in a [`css`](/docs/v2/api/styles/#css) tagged template literal.",
           "text": "This is unsafe because untrusted CSS text can be used to phone home\nor exfiltrate data to an attacker controlled site. Take care to only use\nthis with trusted input.\n"
         },
         "sources": [
@@ -7723,7 +7723,7 @@
               "tag": "@ExportDecoratedItems"
             }
           ],
-          "shortText": "A property decorator which creates a reactive property that reflects a\ncorresponding attribute value. When a decorated property is set\nthe element will update and render. A [`PropertyDeclaration`](/docs/api/ReactiveElement/#PropertyDeclaration) may\noptionally be supplied to configure property features.",
+          "shortText": "A property decorator which creates a reactive property that reflects a\ncorresponding attribute value. When a decorated property is set\nthe element will update and render. A [`PropertyDeclaration`](/docs/v2/api/ReactiveElement/#PropertyDeclaration) may\noptionally be supplied to configure property features.",
           "text": "This decorator should only be used for public fields. As public fields,\nproperties should be considered as primarily settable by element users,\neither via attribute or the property itself.\nGenerally, properties that are changed by the element should be private or\nprotected fields and should use the `state` decorator.\nHowever, sometimes element code does need to set a public property. This\nshould typically only be done in response to user interaction, and an event\nshould be fired informing the user; for example, a checkbox sets its\n`checked` property when clicked and fires a `changed` event. Mutating public\nproperties should typically not be done for non-primitive (object or array)\nproperties. In other cases when an element needs to manage state, a private\nproperty decorated via the `state` decorator should be used. When\nneeded, state properties can be initialized via public properties to\nfacilitate complex interactions.\n```ts\nclass MyElement {\n  @property({ type: Boolean })\n  clicked = false;\n}\n```\n"
         },
         "sources": [
@@ -8082,7 +8082,7 @@
         "name": "queryAssignedElements",
         "comment": {
           "shortText": "A property decorator that converts a class property into a getter that\nreturns the `assignedElements` of the given `slot`. Provides a declarative\nway to use\n[`HTMLSlotElement.assignedElements`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedElements).",
-          "text": "Can be passed an optional [`QueryAssignedElementsOptions`](/docs/api/decorators/#QueryAssignedElementsOptions) object.\nExample usage:\n```ts\nclass MyElement {\n  @queryAssignedElements({ slot: 'list' })\n  listItems!: Array<HTMLElement>;\n  @queryAssignedElements()\n  unnamedSlotEls!: Array<HTMLElement>;\n  render() {\n    return html`\n      <slot name=\"list\"></slot>\n      <slot></slot>\n    `;\n  }\n}\n```\nNote, the type of this property should be annotated as `Array<HTMLElement>`.\n"
+          "text": "Can be passed an optional [`QueryAssignedElementsOptions`](/docs/v2/api/decorators/#QueryAssignedElementsOptions) object.\nExample usage:\n```ts\nclass MyElement {\n  @queryAssignedElements({ slot: 'list' })\n  listItems!: Array<HTMLElement>;\n  @queryAssignedElements()\n  unnamedSlotEls!: Array<HTMLElement>;\n  render() {\n    return html`\n      <slot name=\"list\"></slot>\n      <slot></slot>\n    `;\n  }\n}\n```\nNote, the type of this property should be annotated as `Array<HTMLElement>`.\n"
         },
         "sources": [
           {
@@ -8198,7 +8198,7 @@
         "name": "queryAssignedNodes",
         "comment": {
           "shortText": "A property decorator that converts a class property into a getter that\nreturns the `assignedNodes` of the given `slot`.",
-          "text": "Can be passed an optional [`QueryAssignedNodesOptions`](/docs/api/decorators/#QueryAssignedNodesOptions) object.\nExample usage:\n```ts\nclass MyElement {\n  @queryAssignedNodes({slot: 'list', flatten: true})\n  listItems!: Array<Node>;\n  render() {\n    return html`\n      <slot name=\"list\"></slot>\n    `;\n  }\n}\n```\nNote the type of this property should be annotated as `Array<Node>`.\n"
+          "text": "Can be passed an optional [`QueryAssignedNodesOptions`](/docs/v2/api/decorators/#QueryAssignedNodesOptions) object.\nExample usage:\n```ts\nclass MyElement {\n  @queryAssignedNodes({slot: 'list', flatten: true})\n  listItems!: Array<Node>;\n  render() {\n    return html`\n      <slot name=\"list\"></slot>\n    `;\n  }\n}\n```\nNote the type of this property should be annotated as `Array<Node>`.\n"
         },
         "sources": [
           {
@@ -8709,7 +8709,7 @@
       {
         "name": "QueryAssignedElementsOptions",
         "comment": {
-          "shortText": "Options for the [`queryAssignedElements`](/docs/api/decorators/#queryAssignedElements) decorator. Extends the\noptions that can be passed into\n[HTMLSlotElement.assignedElements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedElements)."
+          "shortText": "Options for the [`queryAssignedElements`](/docs/v2/api/decorators/#queryAssignedElements) decorator. Extends the\noptions that can be passed into\n[HTMLSlotElement.assignedElements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedElements)."
         },
         "children": [
           {
@@ -8830,7 +8830,7 @@
       {
         "name": "QueryAssignedNodesOptions",
         "comment": {
-          "shortText": "Options for the [`queryAssignedNodes`](/docs/api/decorators/#queryAssignedNodes) decorator. Extends the options\nthat can be passed into [HTMLSlotElement.assignedNodes](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedNodes)."
+          "shortText": "Options for the [`queryAssignedNodes`](/docs/v2/api/decorators/#queryAssignedNodes) decorator. Extends the options\nthat can be passed into [HTMLSlotElement.assignedNodes](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedNodes)."
         },
         "children": [
           {
@@ -28227,7 +28227,7 @@
       {
         "name": "PropertyValueMap",
         "comment": {
-          "shortText": "Do not use, instead prefer [`PropertyValues`](/docs/api/ReactiveElement/#PropertyValues)."
+          "shortText": "Do not use, instead prefer [`PropertyValues`](/docs/v2/api/ReactiveElement/#PropertyValues)."
         },
         "children": [
           {
diff --git a/packages/lit-dev-content/.eleventy.js b/packages/lit-dev-content/.eleventy.js
index 8f7e453e5..2266c7480 100644
--- a/packages/lit-dev-content/.eleventy.js
+++ b/packages/lit-dev-content/.eleventy.js
@@ -42,6 +42,10 @@ const DEV = ENV.eleventyMode === 'dev';
 
 const cspInlineScriptHashes = new Set();
 
+/**
+ * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
+ * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
+ */
 module.exports = function (eleventyConfig) {
   // https://github.com/JordanShurmer/eleventy-plugin-toc#readme
   eleventyConfig.addPlugin(pluginTOC, {
@@ -158,6 +162,48 @@ ${content}
     return content.replace(/<a class="anchor".*<\/a>/g, '');
   });
 
+  /**
+   * For the latest versioned urls, this filter returns the unversioned url
+   * which is used in the rel=canonical link.
+   */
+  eleventyConfig.addFilter(
+    'removeLatestVersionFromUrl',
+    function (url, latestVersion) {
+      if (!latestVersion) {
+        throw new Error(
+          `No latestVersion provided to 'removeLatestVersionFromUrl`
+        );
+      }
+      if (!url.includes(`/${latestVersion}/`)) {
+        throw new Error(
+          `'${url}' does not include the latestVersion versioned path segment`
+        );
+      }
+      return url.replace(`/${latestVersion}/`, '/');
+    }
+  );
+
+  /**
+   * All docs/* content on lit.dev is versioned. So all cross links are
+   * versioned. We automatically generate unversioned docs from the latest Lit
+   * version. This filter fixes the cross linking such that links on unversioned
+   * pages link to other unversioned pages.
+   */
+  eleventyConfig.addFilter(
+    'fixUnversionedCrossLinks',
+    function (content, isUnversionedUrl, latestVersion) {
+      if (!isUnversionedUrl) {
+        return content;
+      }
+      if (!latestVersion) {
+        throw new Error(
+          `latestVersion not provided to 'fixUnversionedCrossLinks`
+        );
+      }
+      return content.replaceAll(`/docs/${latestVersion}/`, '/docs/');
+    }
+  );
+
   eleventyConfig.addFilter('removeExtension', function (url) {
     const extension = path.extname(url);
     return url.substring(0, url.length - extension.length);
@@ -194,7 +240,19 @@ ${content}
 
   eleventyConfig.addCollection('docs-v2', function (collection) {
     const docs = collection
-      .getFilteredByGlob(['site/docs/*', 'site/docs/!(v1)/**'])
+      .getFilteredByGlob(['site/docs/v2/**'])
+      .sort(sortDocs);
+    for (const page of docs) {
+      documentByUrl.set(page.url, page);
+    }
+    return docs;
+  });
+
+  // Collection that contains the built duplicate docs for the current
+  // recommended version of Lit.
+  eleventyConfig.addCollection('docs-unversioned', function (collection) {
+    const docs = collection
+      .getFilteredByGlob(['site/docs/unversioned/**'])
       .sort(sortDocs);
     for (const page of docs) {
       documentByUrl.set(page.url, page);
@@ -379,7 +437,7 @@ ${content}
 
   addApiShortcode(
     'api',
-    '/docs/api',
+    '/docs/v2/api',
     // Don't use require() because of Node caching in watch mode.
     JSON.parse(
       fsSync.readFileSync('../lit-dev-api/api-data/lit-2/symbols.json', 'utf8')
@@ -487,8 +545,10 @@ ${content}
           ENV.eleventyOutDir + '/docs/*/index.html',
           ENV.eleventyOutDir + '/docs/v1/introduction.html',
           ENV.eleventyOutDir + '/docs/v1/*/index.html',
+          ENV.eleventyOutDir + '/docs/v2/introduction.html',
+          ENV.eleventyOutDir + '/docs/v2/*/index.html',
         ],
-        {ignore: ENV.eleventyOutDir + '/docs/v1/index.html'}
+        {ignore: ENV.eleventyOutDir + '/docs/(v1|v2)/index.html'}
       )
     ).filter(
       // TODO(aomarks) This is brittle, we need a way to annotate inside an md
diff --git a/packages/lit-dev-content/package.json b/packages/lit-dev-content/package.json
index 5ee0a1080..6dc04edbf 100644
--- a/packages/lit-dev-content/package.json
+++ b/packages/lit-dev-content/package.json
@@ -12,6 +12,7 @@
     "build:ts": "wireit",
     "build:rollup": "wireit",
     "build:samples": "wireit",
+    "build:unversioned-docs": "wireit",
     "dev:build": "wireit",
     "dev:serve": "wireit",
     "prod:build": "wireit",
@@ -36,6 +37,7 @@
       "dependencies": [
         "build:ts",
         "fonts:manrope",
+        "build:unversioned-docs",
         {
           "script": "build:samples",
           "cascade": false
@@ -86,7 +88,8 @@
         "build:ts",
         "build:samples",
         "build:rollup",
-        "fonts:manrope"
+        "fonts:manrope",
+        "build:unversioned-docs"
       ]
     },
     "fonts:manrope": {
@@ -135,6 +138,19 @@
       "output": [
         "samples/js/**"
       ]
+    },
+    "build:unversioned-docs": {
+      "command": "node ../lit-dev-tools-esm/lib/build-unversioned-docs.js",
+      "dependencies": [
+        "../lit-dev-tools-esm:build"
+      ],
+      "files": [
+        "site/docs/**",
+        "!site/docs/unversioned"
+      ],
+      "output": [
+        "site/docs/unversioned/**"
+      ]
     }
   },
   "devDependencies": {
diff --git a/packages/lit-dev-content/site/_includes/docs.html b/packages/lit-dev-content/site/_includes/docs.html
index d35c3a7f9..3db9c029b 100644
--- a/packages/lit-dev-content/site/_includes/docs.html
+++ b/packages/lit-dev-content/site/_includes/docs.html
@@ -7,6 +7,8 @@
 {% if not versionLinks %}
   {% set versionLinks = data.versionLinks %}
 {% endif %}
+{% set isLatestVersionedUrl = selectedVersion == latestVersion and page.url.includes("/" + latestVersion + "/") %}
+{% set isUnversionedPage = page.inputPath.includes("/unversioned/") %}
 
 {% block head %}
   {% include "social-tags.html" %}
@@ -20,6 +22,13 @@
     <script type="module" src="{{ site.baseurl }}/js/components/litdev-example.js"></script>
     <script type="module" src="{{ site.baseurl }}/js/components/litdev-switchable-sample.js"></script>
   {% endif %}
+  {% if isLatestVersionedUrl %}
+  <!-- We have versioned permalinks for our documentation. E.g., docs/v1/* and
+       docs/v2/*. In addition, the latest documentation also has unversioned
+       duplicate pages, generated under docs/*. The latest versioned docs
+       reference the duplicate unversioned page as the canonical page.  -->
+    <link rel="canonical" href="https://lit.dev{{ page.url | removeLatestVersionFromUrl(latestVersion) }}">
+  {% endif %}
 {% endblock %}
 
 {% block content %}
@@ -56,7 +65,7 @@ <h1>{{ title }}</h1>
         </nav>
       {% endif %}
 
-      {{ content | safe }}
+      {{ content | fixUnversionedCrossLinks(isUnversionedPage, latestVersion) | safe }}
 
       {% set nonEditableDocumentRegex = r/.+\/api\/.+/ %}
       {% if not nonEditableDocumentRegex.test(page.inputPath) %}
diff --git a/packages/lit-dev-content/site/docs/components/components.json b/packages/lit-dev-content/site/docs/components/components.json
deleted file mode 100644
index 0967ef424..000000000
--- a/packages/lit-dev-content/site/docs/components/components.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/packages/lit-dev-content/site/docs/components/overview.md b/packages/lit-dev-content/site/docs/components/overview.md
deleted file mode 100644
index 87ddcdc22..000000000
--- a/packages/lit-dev-content/site/docs/components/overview.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Components overview
-eleventyNavigation:
-  key: Overview
-  parent: Components
-  order: 0
-versionLinks:
-  v1: components/templates/
----
-
-A Lit component is a reusable piece of UI. You can think of a Lit component as a container that has some state and that displays a UI based on its state. It can also react to user input, fire events—anything you'd expect a UI component to do. And a Lit component is an HTML element, so it has all of the standard element APIs.
-
-Creating a Lit component involves a number of concepts:
-
- *   [Defining a component](/docs/components/defining/). A Lit component is implemented as a *custom element*, registered  with the browser.
-
- *   [Rendering](/docs/components/rendering/). A component has *render method* that's called to render the component's contents. In the render method, you define a *template* for the component.
-
-*   [Reactive properties](/docs/components/properties/). Properties hold the state of the component. Changing one or more of the components' _reactive properties_ triggers an update cycle, re-rendering the component.
-
-*   [Styles](/docs/components/styles/). A component can define _encapsulated styles_ to control its own appearance.
-
-*   [Lifecycle](/docs/components/lifecycle/). Lit defines a set of callbacks that you can override to hook into the component's lifecycle—for example, to run code when the element's added to a page, or whenever the component updates.
-
-Here's a sample component:
-
-{% playground-example "docs/components/overview/simple-greeting" "simple-greeting.ts" %}
diff --git a/packages/lit-dev-content/site/docs/docs.json b/packages/lit-dev-content/site/docs/docs.json
index 8d90bcdb3..891f1b7c3 100644
--- a/packages/lit-dev-content/site/docs/docs.json
+++ b/packages/lit-dev-content/site/docs/docs.json
@@ -1,4 +1,3 @@
 {
-  "layout": "docs",
-  "collection": "docs-v2"
-}
+    "layout": "docs"
+}
\ No newline at end of file
diff --git a/packages/lit-dev-content/site/docs/tools/overview.md b/packages/lit-dev-content/site/docs/tools/overview.md
deleted file mode 100644
index 4a8136442..000000000
--- a/packages/lit-dev-content/site/docs/tools/overview.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Tools and workflows overview
-eleventyNavigation:
-  key: Overview
-  parent: Tools
-  order: 1
-versionLinks:
-  v1: lit-html/tools/
----
-
-Lit components are written using plain JavaScript or TypeScript and run out-of-the box on modern browsers with minimal tooling, so you don't _need_ any Lit-specific compilers, tools, or workflows.
-
-However, Lit uses very _modern_ web platform features, so it does require some tooling and polyfills to run on older browsers. Some tools also require configuration options to handle modern JavaScript. And, while Lit is "just JavaScript" there are some tools that make working with web components  much nicer.
-
-The tools and workflows docs cover the different phases of development:
-
-* [Requirements](/docs/tools/requirements/): Common requirements for tools and browsers to work with Lit out of the box, as well as compiler options and polyfills required for legacy browsers.
-* [Development](/docs/tools/development/): Setting up your local development environment, including dev server, linting, formatting, syntax highlighting and type-checking.
-* [Testing](/docs/tools/testing/): Recommendations for testing Lit projects in modern and legacy browsers.
-* [Publishing](/docs/tools/publishing/): Guidelines for publishing your component packages to npm.
-* [Building for production](/docs/tools/production/): Building applications for production, including bundling, optimizations, and differential serving for modern and legacy browsers.
-* [Starter Kits](/docs/tools/starter-kits): Instructions on using our Lit component starter kits for JavaScript and TypeScript.
-* [Adding Lit](/docs/tools/adding-lit): Installing and adding Lit to an existing project.
diff --git a/packages/lit-dev-content/site/docs/api/api.html b/packages/lit-dev-content/site/docs/v2/api/api.html
similarity index 78%
rename from packages/lit-dev-content/site/docs/api/api.html
rename to packages/lit-dev-content/site/docs/v2/api/api.html
index 11299de03..b0cd8cebc 100644
--- a/packages/lit-dev-content/site/docs/api/api.html
+++ b/packages/lit-dev-content/site/docs/v2/api/api.html
@@ -7,12 +7,12 @@
     alias: data
     addAllPagesToCollections: true
 
-permalink: "docs/api/{{ data.slug }}/"
+permalink: "docs/v2/api/{{ data.slug }}/"
 
 eleventyComputed:
     title: "{{ data.title }}"
     eleventyNavigation:
         key: "{{ data.title }}"
         parent: API
-    apiPath: /docs/api
+    apiPath: /docs/v2/api
 ---
diff --git a/packages/lit-dev-content/site/docs/api/index.md b/packages/lit-dev-content/site/docs/v2/api/index.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/api/index.md
rename to packages/lit-dev-content/site/docs/v2/api/index.md
diff --git a/packages/lit-dev-content/site/docs/components/decorators.md b/packages/lit-dev-content/site/docs/v2/components/decorators.md
similarity index 89%
rename from packages/lit-dev-content/site/docs/components/decorators.md
rename to packages/lit-dev-content/site/docs/v2/components/decorators.md
index 0460230f8..0fa98a81a 100644
--- a/packages/lit-dev-content/site/docs/components/decorators.md
+++ b/packages/lit-dev-content/site/docs/v2/components/decorators.md
@@ -45,21 +45,21 @@ customElements.define('my-element', MyElement);
 
 The `@property` decorator declares a reactive property.
 
-See [Reactive properties](/docs/components/properties/) for more information about configuring properties.
+See [Reactive properties](/docs/v2/components/properties/) for more information about configuring properties.
 
 ## Built-in decorators
 
 | Decorator | Summary | More Info |
 |-----------|---------|--------------|
 | {% api "@customElement" "customElement" %} | Defines a custom element | [Above](#custom-element) |
-| {% api "@eventOptions" "eventOptions" %} | Adds event listener options. | [Events](/docs/components/events/#event-options-decorator) |
-| {% api "@property" "property" %} | Defines a public property. | [Properties](/docs/components/properties/#declare-with-decorators) |
-| {% api "@state" "state" %} | Defines a private state property | [Properties](/docs/components/properties/#declare-with-decorators) |
-| {% api "@query" "query" %} | Defines a property that returns an element in the component template. | [Shadow DOM](/docs/components/shadow-dom/#query) |
-| {% api "@queryAll" "queryAll" %} | Defines a property that returns a list of elements in the component template. | [Shadow DOM](/docs/components/shadow-dom/#query-all) |
-| {% api "@queryAsync" "queryAsync" %} | Defines a property that returns a promise that resolves to an element in the component template. | [Shadow DOM](/docs/components/shadow-dom/#query-async) |
-| {% api "@queryAssignedElements" "queryAssignedElements" %} | Defines a property that returns the child elements assigned to a specific slot. | [Shadow DOM](/docs/components/shadow-dom/#query-assigned-nodes) |
-| {% api "@queryAssignedNodes" "queryAssignedNodes" %} | Defines a property that returns the child nodes assigned to a specific slot. | [Shadow DOM](/docs/components/shadow-dom/#query-assigned-nodes) |
+| {% api "@eventOptions" "eventOptions" %} | Adds event listener options. | [Events](/docs/v2/components/events/#event-options-decorator) |
+| {% api "@property" "property" %} | Defines a public property. | [Properties](/docs/v2/components/properties/#declare-with-decorators) |
+| {% api "@state" "state" %} | Defines a private state property | [Properties](/docs/v2/components/properties/#declare-with-decorators) |
+| {% api "@query" "query" %} | Defines a property that returns an element in the component template. | [Shadow DOM](/docs/v2/components/shadow-dom/#query) |
+| {% api "@queryAll" "queryAll" %} | Defines a property that returns a list of elements in the component template. | [Shadow DOM](/docs/v2/components/shadow-dom/#query-all) |
+| {% api "@queryAsync" "queryAsync" %} | Defines a property that returns a promise that resolves to an element in the component template. | [Shadow DOM](/docs/v2/components/shadow-dom/#query-async) |
+| {% api "@queryAssignedElements" "queryAssignedElements" %} | Defines a property that returns the child elements assigned to a specific slot. | [Shadow DOM](/docs/v2/components/shadow-dom/#query-assigned-nodes) |
+| {% api "@queryAssignedNodes" "queryAssignedNodes" %} | Defines a property that returns the child nodes assigned to a specific slot. | [Shadow DOM](/docs/v2/components/shadow-dom/#query-assigned-nodes) |
 
 ## Importing decorators
 
@@ -162,7 +162,7 @@ constructor() {
 
 ### Avoiding issues with class fields and decorators {#avoiding-issues-with-class-fields}
 
-[Class fields](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields) have a problematic interaction with declaring reactive properties. See [Avoiding issues with class fields when declaring properties](/docs/components/properties/#avoiding-issues-with-class-fields) for more information.
+[Class fields](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields) have a problematic interaction with declaring reactive properties. See [Avoiding issues with class fields when declaring properties](/docs/v2/components/properties/#avoiding-issues-with-class-fields) for more information.
 
 The current decorators [stage 3 proposal](https://github.com/tc39/proposal-decorators) does not directly address this issue, but it should be solved as the proposal evolves and matures.
 
diff --git a/packages/lit-dev-content/site/docs/components/defining.md b/packages/lit-dev-content/site/docs/v2/components/defining.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/components/defining.md
rename to packages/lit-dev-content/site/docs/v2/components/defining.md
diff --git a/packages/lit-dev-content/site/docs/components/events.md b/packages/lit-dev-content/site/docs/v2/components/events.md
similarity index 98%
rename from packages/lit-dev-content/site/docs/components/events.md
rename to packages/lit-dev-content/site/docs/v2/components/events.md
index 7b9ca7e26..73c369f70 100644
--- a/packages/lit-dev-content/site/docs/components/events.md
+++ b/packages/lit-dev-content/site/docs/v2/components/events.md
@@ -38,7 +38,7 @@ private _handleTouchStart(e) { console.log(e.type) }
 
 <div class="alert alert-info">
 
-**Using decorators.** Decorators are a proposed JavaScript feature, so you’ll need to use a compiler like Babel or TypeScript to use decorators. See [Enabling decorators](/docs/components/decorators/#enabling-decorators) for details.
+**Using decorators.** Decorators are a proposed JavaScript feature, so you’ll need to use a compiler like Babel or TypeScript to use decorators. See [Enabling decorators](/docs/v2/components/decorators/#enabling-decorators) for details.
 
 </div>
 
@@ -115,7 +115,7 @@ To add an event listener after rendering, use the `firstUpdated` method. This is
 
 The `firstUpdated` callback fires after the first time your component has been updated and called its `render` method, but **before** the browser has had a chance to paint.
 
-See [firstUpdated](/docs/components/lifecycle/#firstupdated) in the Lifecycle documentation for more information.
+See [firstUpdated](/docs/v2/components/lifecycle/#firstupdated) in the Lifecycle documentation for more information.
 
 To ensure the listener is added after the user can see the component, you can await a Promise that resolves after the browser paints.
 
diff --git a/packages/lit-dev-content/site/docs/components/index.md b/packages/lit-dev-content/site/docs/v2/components/index.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/components/index.md
rename to packages/lit-dev-content/site/docs/v2/components/index.md
diff --git a/packages/lit-dev-content/site/docs/components/lifecycle.md b/packages/lit-dev-content/site/docs/v2/components/lifecycle.md
similarity index 96%
rename from packages/lit-dev-content/site/docs/components/lifecycle.md
rename to packages/lit-dev-content/site/docs/v2/components/lifecycle.md
index 892af6df4..cee810f78 100644
--- a/packages/lit-dev-content/site/docs/components/lifecycle.md
+++ b/packages/lit-dev-content/site/docs/v2/components/lifecycle.md
@@ -31,7 +31,7 @@ Saves any properties already set on the element. This ensures values set before
 
 #### Use cases
 
-Perform one time initialization tasks that must be done before the first [update](#reactive-update-cycle). For example, when not using decorators, default values for properties can be set in the constructor, as shown in [Declaring properties in a static properties field](/docs/components/properties/#declaring-properties-in-a-static-properties-field).
+Perform one time initialization tasks that must be done before the first [update](#reactive-update-cycle). For example, when not using decorators, default values for properties can be set in the constructor, as shown in [Declaring properties in a static properties field](/docs/v2/components/properties/#declaring-properties-in-a-static-properties-field).
 
 ```js
 constructor() {
@@ -177,7 +177,7 @@ An update is triggered when a reactive property changes or the `requestUpdate()`
 
 #### hasChanged() {#haschanged}
 
-Called when a reactive property is set. By default `hasChanged()` does a strict equality check and if it returns `true`, an update is scheduled. See [configuring `hasChanged()`](/docs/components/properties/#haschanged) for more information.
+Called when a reactive property is set. By default `hasChanged()` does a strict equality check and if it returns `true`, an update is scheduled. See [configuring `hasChanged()`](/docs/v2/components/properties/#haschanged) for more information.
 
 #### requestUpdate() {#requestUpdate}
 
@@ -197,7 +197,7 @@ disconnectedCallback() {
 
 The list of properties that have changed is stored in a `changedProperties` map that’s passed to subsequent lifecycle methods. The map keys are the property names and its values are the previous property values.
 
-Optionally, you can pass a property name and a previous value when calling `requestUpdate()`, which will be stored in the `changedProperties` map. This can be useful if you implement a custom getter and setter for a property. See [Reactive properties](/docs/components/properties/) for more information about implementing custom getters and setters.
+Optionally, you can pass a property name and a previous value when calling `requestUpdate()`, which will be stored in the `changedProperties` map. This can be useful if you implement a custom getter and setter for a property. See [Reactive properties](/docs/v2/components/properties/) for more information about implementing custom getters and setters.
 
 ```js
   this.requestUpdate('state', this._previousState);
@@ -311,7 +311,7 @@ Called by `update()` and should be implemented to return a renderable result (su
 | Call super? | Not necessary. |
 | Called on server? | Yes. |
 
-The `render()` method has no arguments, but typically it references component properties. See [Rendering](/docs/components/rendering/) for more information.
+The `render()` method has no arguments, but typically it references component properties. See [Rendering](/docs/v2/components/rendering/) for more information.
 
 ```js
 render() {
@@ -504,7 +504,7 @@ class MyElement extends LitElement {
 
 ## External lifecycle hooks: controllers and decorators
 
-In addition to component classes implementing lifecycle callbacks, external code, such as [decorators](/docs/components/decorators/) may need to hook into a component's lifecycle.
+In addition to component classes implementing lifecycle callbacks, external code, such as [decorators](/docs/v2/components/decorators/) may need to hook into a component's lifecycle.
 
 Lit offers two concepts for external code to integrate with the reactive update lifecycle: `static addInitializer()` and `addController()`:
 
@@ -512,7 +512,7 @@ Lit offers two concepts for external code to integrate with the reactive update
 
 `addInitializer()` allows code that has access to a Lit class definition to run code when instances of the class are constructed.
 
-This is very useful when writing custom decorators. Decorators are run at class definition time, and can do things like replace field and method definitions. If they also need to do work when an instance is created, they must call `addInitializer()`. It will be common to use this to add a [reactive controller](/docs/composition/controllers/) so decorators can hook into the component lifecycle:
+This is very useful when writing custom decorators. Decorators are run at class definition time, and can do things like replace field and method definitions. If they also need to do work when an instance is created, they must call `addInitializer()`. It will be common to use this to add a [reactive controller](/docs/v2/composition/controllers/) so decorators can hook into the component lifecycle:
 
 {% switchable-sample %}
 
@@ -560,7 +560,7 @@ starting with superclasses and progressing to the instance's class.
 
 #### addController() {#addController}
 
-`addController()` adds a reactive controller to a Lit component so that the component invokes the controller's lifecycle callbacks. See the [Reactive Controller](/docs/composition/controllers/) docs for more information.
+`addController()` adds a reactive controller to a Lit component so that the component invokes the controller's lifecycle callbacks. See the [Reactive Controller](/docs/v2/composition/controllers/) docs for more information.
 
 #### removeController() {#removeController}
 
@@ -570,7 +570,7 @@ starting with superclasses and progressing to the instance's class.
 
 <div class="alert alert-info">
 
-Lit's [server-side rendering package](/docs/ssr/overview/) is currently under active development so the following information is subject to change.
+Lit's [server-side rendering package](/docs/v2/ssr/overview/) is currently under active development so the following information is subject to change.
 
 </div>
 
diff --git a/packages/lit-dev-content/site/docs/v2/components/overview.md b/packages/lit-dev-content/site/docs/v2/components/overview.md
new file mode 100644
index 000000000..ebf9b5f0e
--- /dev/null
+++ b/packages/lit-dev-content/site/docs/v2/components/overview.md
@@ -0,0 +1,27 @@
+---
+title: Components overview
+eleventyNavigation:
+  key: Overview
+  parent: Components
+  order: 0
+versionLinks:
+  v1: components/templates/
+---
+
+A Lit component is a reusable piece of UI. You can think of a Lit component as a container that has some state and that displays a UI based on its state. It can also react to user input, fire events—anything you'd expect a UI component to do. And a Lit component is an HTML element, so it has all of the standard element APIs.
+
+Creating a Lit component involves a number of concepts:
+
+ *   [Defining a component](/docs/v2/components/defining/). A Lit component is implemented as a *custom element*, registered  with the browser.
+
+ *   [Rendering](/docs/v2/components/rendering/). A component has *render method* that's called to render the component's contents. In the render method, you define a *template* for the component.
+
+*   [Reactive properties](/docs/v2/components/properties/). Properties hold the state of the component. Changing one or more of the components' _reactive properties_ triggers an update cycle, re-rendering the component.
+
+*   [Styles](/docs/v2/components/styles/). A component can define _encapsulated styles_ to control its own appearance.
+
+*   [Lifecycle](/docs/v2/components/lifecycle/). Lit defines a set of callbacks that you can override to hook into the component's lifecycle—for example, to run code when the element's added to a page, or whenever the component updates.
+
+Here's a sample component:
+
+{% playground-example "docs/components/overview/simple-greeting" "simple-greeting.ts" %}
diff --git a/packages/lit-dev-content/site/docs/components/properties.md b/packages/lit-dev-content/site/docs/v2/components/properties.md
similarity index 96%
rename from packages/lit-dev-content/site/docs/components/properties.md
rename to packages/lit-dev-content/site/docs/v2/components/properties.md
index 239f6216d..8102ce867 100644
--- a/packages/lit-dev-content/site/docs/components/properties.md
+++ b/packages/lit-dev-content/site/docs/v2/components/properties.md
@@ -40,7 +40,7 @@ Lit manages your reactive properties and their corresponding attributes. In part
 
 Public properties are part of the component's public API. In general, public properties—especially public reactive properties—should be treated as _input_.
 
-The component shouldn't change its own public properties, except in response to user input. For example, a menu component might have a public `selected` property that can be initialized to a given value by the owner of the element, but that is updated by the component itself when the user selects an item. In these instances, the component should dispatch an event to indicate to the component's owner that the `selected` property changed. See [Dispatching events](/docs/components/events/#dispatching-events) for more details.
+The component shouldn't change its own public properties, except in response to user input. For example, a menu component might have a public `selected` property that can be initialized to a given value by the owner of the element, but that is updated by the component itself when the user selects an item. In these instances, the component should dispatch an event to indicate to the component's owner that the `selected` property changed. See [Dispatching events](/docs/v2/components/events/#dispatching-events) for more details.
 
 Lit also supports _internal reactive state_. Internal reactive state refers to reactive properties that _aren't_ part of the component's API. These properties don't have a corresponding attribute, and are typically marked protected or private in TypeScript.
 
@@ -93,7 +93,7 @@ The argument to the `@property`  decorators is an [options object](#property-opt
 
 <div class="alert alert-info">
 
-**Using decorators.** Decorators are a proposed JavaScript feature, so you'll need to use a compiler like Babel or the TypeScript compiler to use decorators. See [Enabling decorators](/docs/components/decorators/#enabling-decorators) for details.
+**Using decorators.** Decorators are a proposed JavaScript feature, so you'll need to use a compiler like Babel or the TypeScript compiler to use decorators. See [Enabling decorators](/docs/v2/components/decorators/#enabling-decorators) for details.
 
 </div>
 
@@ -146,7 +146,7 @@ plugins = [
 ];
 ```
 
-For information about using class fields with **decorators**, see [Avoiding issues with class fields and decorators](/docs/components/decorators/#avoiding-issues-with-class-fields).
+For information about using class fields with **decorators**, see [Avoiding issues with class fields and decorators](/docs/v2/components/decorators/#avoiding-issues-with-class-fields).
 
 ### Property options
 
@@ -274,7 +274,7 @@ When a property changes, the following sequence occurs:
 
 Note that if you mutate an object or array property, it won't trigger an update, because the object itself hasn't changed. For more information, see [Mutating object and array properties](#mutating-properties).
 
-There are many ways to hook into and modify the reactive update cycle. For more information, see [Reactive update cycle](/docs/components/lifecycle/#reactive-update-cycle).
+There are many ways to hook into and modify the reactive update cycle. For more information, see [Reactive update cycle](/docs/v2/components/lifecycle/#reactive-update-cycle).
 
 For more information about property change detection, see [Customizing change detection](#haschanged).
 
@@ -604,7 +604,7 @@ To use custom property accessors with the `@property` or `@state` decorators, pu
 
 The setters that Lit generates automatically call `requestUpdate()`. If you write your own setter you must call `requestUpdate()` manually, supplying the property name and its old value.
 
-In most cases, **you do not need to create custom property accessors.** To compute values from existing properties, we recommend using the [`willUpdate`](/docs/components/lifecycle/#willupdate) callback, which allows you to set values during the update cycle without triggering an additional update. To perform a custom action after the element updates, we recommend using the [`updated`](/docs/components/lifecycle/#updated) callback. A custom setter can be used in rare cases when it's important to synchronously validate any value the user sets.
+In most cases, **you do not need to create custom property accessors.** To compute values from existing properties, we recommend using the [`willUpdate`](/docs/v2/components/lifecycle/#willupdate) callback, which allows you to set values during the update cycle without triggering an additional update. To perform a custom action after the element updates, we recommend using the [`updated`](/docs/v2/components/lifecycle/#updated) callback. A custom setter can be used in rare cases when it's important to synchronously validate any value the user sets.
 
 If your class defines its own accessors for a property, Lit will not overwrite them with generated accessors. If your class does not define accessors for a property, Lit will generate them, even if a superclass has defined the property or accessors.
 
@@ -626,7 +626,7 @@ You don't need to set `noAccessor` when defining your own accessors.
 
 All reactive properties have a function, `hasChanged()`, which is called when the property is set.
 
-`hasChanged` compares the property's old and new values, and evaluates whether or not the property has changed. If `hasChanged()` returns true, Lit starts an element update if one is not already scheduled. For more information on updates, see [Reactive update cycle](/docs/components/lifecycle/#reactive-update-cycle) .
+`hasChanged` compares the property's old and new values, and evaluates whether or not the property has changed. If `hasChanged()` returns true, Lit starts an element update if one is not already scheduled. For more information on updates, see [Reactive update cycle](/docs/v2/components/lifecycle/#reactive-update-cycle) .
 
 The default implementation of `hasChanged()` uses a strict inequality comparison: `hasChanged()` returns `true` if `newVal !== oldVal`.
 
diff --git a/packages/lit-dev-content/site/docs/components/rendering.md b/packages/lit-dev-content/site/docs/v2/components/rendering.md
similarity index 81%
rename from packages/lit-dev-content/site/docs/components/rendering.md
rename to packages/lit-dev-content/site/docs/v2/components/rendering.md
index 707606aa3..c22615b21 100644
--- a/packages/lit-dev-content/site/docs/components/rendering.md
+++ b/packages/lit-dev-content/site/docs/v2/components/rendering.md
@@ -14,7 +14,7 @@ To define a template for a Lit component, add a `render()` method:
 
 {% playground-example "docs/templates/define" "my-element.ts" %}
 
-Write your template in HTML inside a JavaScript [tagged template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) using Lit's [`html`](/docs/api/templates/#html) tag function.
+Write your template in HTML inside a JavaScript [tagged template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) using Lit's [`html`](/docs/v2/api/templates/#html) tag function.
 
 Lit templates can include JavaScript _expressions_. You can use expressions to set text content, attributes, properties, and event listeners. The `render()` method can also include any JavaScript—for example, you can create local variables for use in expressions.
 
@@ -25,10 +25,10 @@ Typically, the component's `render()` method returns a single `TemplateResult` o
 *   Primitive values like string, number, or boolean.
 *   `TemplateResult` objects created by the `html` function.
 *   DOM Nodes.
-*   The sentinel values [`nothing`](/docs/templates/conditionals/#conditionally-rendering-nothing) and [`noChange`](/docs/templates/custom-directives/#signaling-no-change).
+*   The sentinel values [`nothing`](/docs/v2/templates/conditionals/#conditionally-rendering-nothing) and [`noChange`](/docs/v2/templates/custom-directives/#signaling-no-change).
 *   Arrays or iterables of any of the supported types.
 
-This is *almost identical* to the set of values that can be rendered to a Lit [child expression](/docs/templates/expressions/#child-expressions). The one difference is that a child expression can render an `SVGTemplateResult`, returned by the [`svg`](/docs/api/templates/#svg) function. This kind of template result can only be rendered as the descendant of an `<svg>` element.
+This is *almost identical* to the set of values that can be rendered to a Lit [child expression](/docs/v2/templates/expressions/#child-expressions). The one difference is that a child expression can render an `SVGTemplateResult`, returned by the [`svg`](/docs/v2/api/templates/#svg) function. This kind of template result can only be rendered as the descendant of an `<svg>` element.
 
 ## Writing a good render() method
 
@@ -45,7 +45,7 @@ In most cases you should avoid making DOM updates outside of `render()`. Instead
 
 For example, if your component needs to update its UI when it receives an event, have the event listener set a reactive property that is used in `render()`, rather than manipulate the DOM directly.
 
-For more information, see [Reactive properties](/docs/components/properties/).
+For more information, see [Reactive properties](/docs/v2/components/properties/).
 
 ## Composing templates
 
@@ -74,7 +74,7 @@ Lit batches updates to maximize performance and efficiency. Setting multiple pro
 
 During an update, only the parts of the DOM that change are re-rendered. Although Lit templates look like string interpolation, Lit parses and creates static HTML once, and then only updates changed values in expressions after that, making updates very efficient.
 
-For more information about the update cycle, see [What happens when properties change](/docs/components/properties/#when-properties-change).
+For more information about the update cycle, see [What happens when properties change](/docs/v2/components/properties/#when-properties-change).
 
 ## DOM encapsulation
 
@@ -83,12 +83,12 @@ Lit uses shadow DOM to encapsulate the DOM a component renders. Shadow DOM lets
 For more information about shadow DOM, see [Shadow DOM v1: Self-Contained Web Components
 ](https://developers.google.com/web/fundamentals/web-components/shadowdom) on Web Fundamentals.
 
-For more information about working with shadow DOM in your component, see [Working with shadow DOM](/docs/components/shadow-dom/).
+For more information about working with shadow DOM in your component, see [Working with shadow DOM](/docs/v2/components/shadow-dom/).
 
 ## See also
 
-* [Shadow DOM](/docs/components/shadow-dom/)
-* [Templates overview](/docs/templates/overview/)
-* [Template expressions](/docs/templates/expressions/)
+* [Shadow DOM](/docs/v2/components/shadow-dom/)
+* [Templates overview](/docs/v2/templates/overview/)
+* [Template expressions](/docs/v2/templates/expressions/)
 
 
diff --git a/packages/lit-dev-content/site/docs/components/shadow-dom.md b/packages/lit-dev-content/site/docs/v2/components/shadow-dom.md
similarity index 97%
rename from packages/lit-dev-content/site/docs/components/shadow-dom.md
rename to packages/lit-dev-content/site/docs/v2/components/shadow-dom.md
index b3319663f..8265e2ac0 100644
--- a/packages/lit-dev-content/site/docs/components/shadow-dom.md
+++ b/packages/lit-dev-content/site/docs/v2/components/shadow-dom.md
@@ -26,7 +26,7 @@ For more information on shadow DOM:
 
 <div class="alert alert-info">
 
-**Older browsers.** On older browsers where native shadow DOM isn't available, the [web components polyfills](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs) may be used. Please note that Lit's `polyfill-support` module must be loaded along with the web components polyfills. See [Requirements for legacy browsers](/docs/tools/requirements/#building-for-legacy-browsers) for details.
+**Older browsers.** On older browsers where native shadow DOM isn't available, the [web components polyfills](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs) may be used. Please note that Lit's `polyfill-support` module must be loaded along with the web components polyfills. See [Requirements for legacy browsers](/docs/v2/tools/requirements/#building-for-legacy-browsers) for details.
 
 </div>
 
@@ -57,7 +57,7 @@ The `@query`, `@queryAll`, and `@queryAsync` decorators all provide a convenient
 
 <div class="alert alert-info">
 
-**Using decorators.** Decorators are a proposed JavaScript feature, so you’ll need to use a compiler like Babel or TypeScript to use decorators. See [Using decorators](/docs/components/decorators/) for details.
+**Using decorators.** Decorators are a proposed JavaScript feature, so you’ll need to use a compiler like Babel or TypeScript to use decorators. See [Using decorators](/docs/v2/components/decorators/) for details.
 
 </div>
 
@@ -169,7 +169,7 @@ You can specify fallback content for a slot. The fallback content is shown when
 
 <div class="alert alert-info">
 
-**Rendering fallback content.** If any child nodes are assigned to a slot, its fallback content doesn't render. A default slot with no name accepts any child nodes. It won't render fallback content even if the only assigned nodes are text nodes containing whitespace, for example `<example-element> </example-element>`. When using a Lit expression as a child of a custom element, make sure to use a non-rendering value when appropriate so that any slot fallback content is rendered. See [removing child content](/docs/templates/expressions/#removing-child) for more information.
+**Rendering fallback content.** If any child nodes are assigned to a slot, its fallback content doesn't render. A default slot with no name accepts any child nodes. It won't render fallback content even if the only assigned nodes are text nodes containing whitespace, for example `<example-element> </example-element>`. When using a Lit expression as a child of a custom element, make sure to use a non-rendering value when appropriate so that any slot fallback content is rendered. See [removing child content](/docs/v2/templates/expressions/#removing-child) for more information.
 
 </div>
 
@@ -223,7 +223,7 @@ Deciding which decorator to use depends on whether you want to query for text no
 
 <div class="alert alert-info">
 
-**Using decorators.** Decorators are a proposed JavaScript feature, so you’ll need to use a compiler like Babel or TypeScript to use decorators. See [Using decorators](/docs/components/decorators/) for details.
+**Using decorators.** Decorators are a proposed JavaScript feature, so you’ll need to use a compiler like Babel or TypeScript to use decorators. See [Using decorators](/docs/v2/components/decorators/) for details.
 
 </div>
 
@@ -281,7 +281,7 @@ See [Element.attachShadow()](https://developer.mozilla.org/en-US/docs/Web/API/El
 
 ### Implementing `createRenderRoot`
 
-The default implementation of `createRenderRoot` creates an open shadow root and adds to it any styles set in the `static styles` class field. For more information on styling see [Styles](/docs/components/styles/).
+The default implementation of `createRenderRoot` creates an open shadow root and adds to it any styles set in the `static styles` class field. For more information on styling see [Styles](/docs/v2/components/styles/).
 
 To customize a component's render root, implement `createRenderRoot` and return the node you want the template to render into.
 
diff --git a/packages/lit-dev-content/site/docs/components/styles.md b/packages/lit-dev-content/site/docs/v2/components/styles.md
similarity index 98%
rename from packages/lit-dev-content/site/docs/components/styles.md
rename to packages/lit-dev-content/site/docs/v2/components/styles.md
index b41aa834c..a8a010194 100644
--- a/packages/lit-dev-content/site/docs/components/styles.md
+++ b/packages/lit-dev-content/site/docs/v2/components/styles.md
@@ -172,7 +172,7 @@ my-element {
 
 ### Styling the component's children {#slotted}
 
-Your component may accept children (like a `<ul>` element can have `<li>` children). To render children, your template needs to include one or more `<slot>` elements, as described in [Render children with the slot element](/docs/components/shadow-dom/#slots).
+Your component may accept children (like a `<ul>` element can have `<li>` children). To render children, your template needs to include one or more `<slot>` elements, as described in [Render children with the slot element](/docs/v2/components/shadow-dom/#slots).
 
 The `<slot>` element acts as a placeholder in a shadow tree where the host element's children are displayed.
 
@@ -296,7 +296,7 @@ One way to make styles dynamic is to add expressions to the `class` or `style` a
 
 Lit offers two directives, `classMap` and `styleMap`, to conveniently apply classes and styles in HTML templates.
 
-For more information on these and other directives, see the documentation on [built-in directives](/docs/templates/directives/).
+For more information on these and other directives, see the documentation on [built-in directives](/docs/v2/templates/directives/).
 
 To use `styleMap` and/or `classMap`:
 
@@ -311,7 +311,7 @@ To use `styleMap` and/or `classMap`:
 
 {% playground-example "docs/components/style/maps" "my-element.ts" %}
 
-See [classMap](/docs/templates/directives/#classmap) and [styleMap](/docs/templates/directives/#stylemap) for more information.
+See [classMap](/docs/v2/templates/directives/#classmap) and [styleMap](/docs/v2/templates/directives/#stylemap) for more information.
 
 ## Theming {#theming}
 
diff --git a/packages/lit-dev-content/site/docs/composition/component-composition.md b/packages/lit-dev-content/site/docs/v2/composition/component-composition.md
similarity index 97%
rename from packages/lit-dev-content/site/docs/composition/component-composition.md
rename to packages/lit-dev-content/site/docs/v2/composition/component-composition.md
index 8b78ce638..68cb2921e 100644
--- a/packages/lit-dev-content/site/docs/composition/component-composition.md
+++ b/packages/lit-dev-content/site/docs/v2/composition/component-composition.md
@@ -68,7 +68,7 @@ When the user selects an item, the `my-menu` element should update its `selected
 - The `my-menu` element gets the event, and updates its `selectedItem` property. It may also change some state so that the selected item is highlighted.
 - The `my-menu` element fires a semantic event indicating that the selection has changed. This event might be called `selected-item-changed`, for example. Since this event is part of the API for `my-menu`, it should be semantically meaningful in that context.
 
-For more information on dispatching and listening for events, see [Events](/docs/components/events/).
+For more information on dispatching and listening for events, see [Events](/docs/v2/components/events/).
 
 
 ## Passing data across the tree
@@ -105,7 +105,7 @@ Interacting with light DOM children is different from interacting with nodes in
 
 The component has control over whether and where the child nodes are rendered, using the `<slot>` element in its shadow DOM. And it can receive notifications when child nodes are added and removed by listening for the `slotchange` event.
 
-For more information, see the sections on [rendering children with slots](/docs/components/shadow-dom/#slots) and [accessing slotted children](/docs/components/shadow-dom/#accessing-slotted-children).
+For more information, see the sections on [rendering children with slots](/docs/v2/components/shadow-dom/#slots) and [accessing slotted children](/docs/v2/components/shadow-dom/#accessing-slotted-children).
 
 
 _Meerkat photo by [Anggit Rizkianto](https://unsplash.com/@anggit_mr) on [Unsplash](https://unsplash.com/photos/x3-OP_X0aH0)._
diff --git a/packages/lit-dev-content/site/docs/composition/controllers.md b/packages/lit-dev-content/site/docs/v2/composition/controllers.md
similarity index 95%
rename from packages/lit-dev-content/site/docs/composition/controllers.md
rename to packages/lit-dev-content/site/docs/v2/composition/controllers.md
index da930a96f..efcfef3f5 100644
--- a/packages/lit-dev-content/site/docs/composition/controllers.md
+++ b/packages/lit-dev-content/site/docs/v2/composition/controllers.md
@@ -8,7 +8,7 @@ eleventyNavigation:
 
 Lit 2 introduces a new concept for code reuse and composition called _reactive controllers_.
 
-A reactive controller is an object that can hook into a component's [reactive update cycle](/docs/components/lifecycle/#reactive-update-cycle). Controllers can bundle state and behavior related to a feature, making it reusable across multiple component definitions.
+A reactive controller is an object that can hook into a component's [reactive update cycle](/docs/v2/components/lifecycle/#reactive-update-cycle). Controllers can bundle state and behavior related to a feature, making it reusable across multiple component definitions.
 
 You can use controllers to implement features that require their own state and access to the component's lifecycle, such as:
 
@@ -21,7 +21,7 @@ Reactive controllers allow you to build components by composing smaller pieces t
 
 {% playground-ide "docs/controllers/overview" "clock-controller.ts" %}
 
-Reactive controllers are similar in many ways to class mixins. The main difference is that they have their own identity and don't add to the component's prototype, which helps contain their APIs and lets you use multiple controller instances per host component. See [Controllers and mixins](/docs/composition/overview/#controllers-and-mixins) for more details.
+Reactive controllers are similar in many ways to class mixins. The main difference is that they have their own identity and don't add to the component's prototype, which helps contain their APIs and lets you use multiple controller instances per host component. See [Controllers and mixins](/docs/v2/composition/overview/#controllers-and-mixins) for more details.
 
 ## Using a controller
 
@@ -133,7 +133,7 @@ The reactive controller lifecycle, defined in the {% api "ReactiveController" %}
   * Called when the host is disconnected.
   * Useful for cleaning up things added in `hostConnected()`, such as event listeners and observers.
 
-For more information, see [Reactive update cycle](/docs/components/lifecycle/#reactive-update-cycle).
+For more information, see [Reactive update cycle](/docs/v2/components/lifecycle/#reactive-update-cycle).
 ### Controller host API
 
 A reactive controller host implements a small API for adding controllers and requesting updates, and is responsible for calling its controller's lifecycle methods.
@@ -192,7 +192,7 @@ There are two main patterns of using controllers with directives:
 * Controller directives. These are directives that themselves are controllers in order to hook into the host lifecycle.
 * Controllers that own directives. These are controllers that create one or more directives for use in the host's template.
 
-For more information about writing directives, see [Custom directives](/docs/templates/custom-directives/).
+For more information about writing directives, see [Custom directives](/docs/v2/templates/custom-directives/).
 
 #### Controller directives
 
@@ -292,5 +292,5 @@ You can use `Task` to create a custom controller with an API tailored for your s
 
 ## See also
 
-* [Reactive update cycle](/docs/components/lifecycle/#reactive-update-cycle)
+* [Reactive update cycle](/docs/v2/components/lifecycle/#reactive-update-cycle)
 * [@lit-labs/task](https://www.npmjs.com/package/@lit-labs/task)
diff --git a/packages/lit-dev-content/site/docs/composition/index.md b/packages/lit-dev-content/site/docs/v2/composition/index.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/composition/index.md
rename to packages/lit-dev-content/site/docs/v2/composition/index.md
diff --git a/packages/lit-dev-content/site/docs/composition/mixins.md b/packages/lit-dev-content/site/docs/v2/composition/mixins.md
similarity index 95%
rename from packages/lit-dev-content/site/docs/composition/mixins.md
rename to packages/lit-dev-content/site/docs/v2/composition/mixins.md
index e1b1ffcb1..99f7bd651 100644
--- a/packages/lit-dev-content/site/docs/composition/mixins.md
+++ b/packages/lit-dev-content/site/docs/v2/composition/mixins.md
@@ -7,7 +7,7 @@ eleventyNavigation:
 ---
 
 Class mixins are a pattern for sharing code between classes using standard JavaScript. As opposed to "has-a" composition patterns like [reactive
-controllers](/docs/composition/controllers/), where a class can _own_ a controller to add
+controllers](/docs/v2/composition/controllers/), where a class can _own_ a controller to add
 behavior, mixins implement "is-a" composition, where the mixin causes the class
 itself to _be_ an instance of the behavior being shared.
 
@@ -83,9 +83,9 @@ code reuse. For more reading on mixins, here are a few good references:
 ## Creating mixins for LitElement
 
 Mixins applied to LitElement can implement or override any of the standard
-[custom element lifecycle](/docs/components/lifecycle/#custom-element-lifecycle)
+[custom element lifecycle](/docs/v2/components/lifecycle/#custom-element-lifecycle)
 callbacks like the `constructor()` or `connectedCallback()`, as well as any of
-the [reactive update lifecycle](/docs/components/lifecycle/#reactive-update-cycle)
+the [reactive update lifecycle](/docs/v2/components/lifecycle/#reactive-update-cycle)
 callbacks like `render()` or `updated()`.
 
 For example, the following mixin would log when the element is created,
@@ -118,8 +118,8 @@ Also note that mixins can choose to do work either before or after the base
 implementation of the standard lifecycle callbacks via its choice of when to
 make the super call.
 
-Mixins can also add [reactive properties](/docs/components/properties/),
-[styles](/docs/components/styles/), and API to the subclassed element.
+Mixins can also add [reactive properties](/docs/v2/components/properties/),
+[styles](/docs/v2/components/styles/), and API to the subclassed element.
 
 The mixin in the example below adds a `highlight` reactive property to the
 element and a `renderHighlight()` method that the user can call to wrap some
diff --git a/packages/lit-dev-content/site/docs/composition/overview.md b/packages/lit-dev-content/site/docs/v2/composition/overview.md
similarity index 75%
rename from packages/lit-dev-content/site/docs/composition/overview.md
rename to packages/lit-dev-content/site/docs/v2/composition/overview.md
index 1640e88a1..8e80c1a4a 100644
--- a/packages/lit-dev-content/site/docs/composition/overview.md
+++ b/packages/lit-dev-content/site/docs/v2/composition/overview.md
@@ -12,13 +12,13 @@ Composition is a strategy for managing complexity and organizing code into reusa
 *   Reactive controllers.
 *   Class mixins.
 
-[_Component composition_](/docs/composition/component-composition/) is the process of assembling complex components from simpler components. A component can use subcomponents in its template. Components can use standard DOM mechanisms to communicate: setting properties on subcomponents, and listening for events from subcomponents.
+[_Component composition_](/docs/v2/composition/component-composition/) is the process of assembling complex components from simpler components. A component can use subcomponents in its template. Components can use standard DOM mechanisms to communicate: setting properties on subcomponents, and listening for events from subcomponents.
 
 Although component composition is the default way to think about breaking a complex Lit project down into smaller units, there are two other notable code patterns useful for factoring your Lit code:
 
-[_Reactive controllers_](/docs/composition/controllers/) are objects that can hook into the update lifecycle of a Lit component, encapsulating state and behavior related to a feature into a separate unit of code.
+[_Reactive controllers_](/docs/v2/composition/controllers/) are objects that can hook into the update lifecycle of a Lit component, encapsulating state and behavior related to a feature into a separate unit of code.
 
-[_Class mixins_](/docs/composition/mixins/) let you write reusable partial component definitions and "mix them in" to a component's inheritance chain.
+[_Class mixins_](/docs/v2/composition/mixins/) let you write reusable partial component definitions and "mix them in" to a component's inheritance chain.
 
 Both mixins and reactive controllers let you factor component logic related to a given feature into a reusable unit. See the next section for a comparison of controllers and mixins.
 
diff --git a/packages/lit-dev-content/site/docs/data/context.md b/packages/lit-dev-content/site/docs/v2/data/context.md
similarity index 99%
rename from packages/lit-dev-content/site/docs/data/context.md
rename to packages/lit-dev-content/site/docs/v2/data/context.md
index 9dee65cfb..fdfb12e74 100644
--- a/packages/lit-dev-content/site/docs/data/context.md
+++ b/packages/lit-dev-content/site/docs/v2/data/context.md
@@ -11,7 +11,7 @@ eleventyNavigation:
 
 Context is a way of making data available to entire component subtrees without having to manually bind properties to every component. The data is "contextually" available, such that ancestor elements in between a provider of data and consumer of data aren't even aware of it.
 
-Lit's context implementation is part of [Lit Labs](/docs/libraries/labs/) and available in the `@lit-labs/context` package:
+Lit's context implementation is part of [Lit Labs](/docs/v2/libraries/labs/) and available in the `@lit-labs/context` package:
 
 ```bash
 npm i @lit-labs/context
diff --git a/packages/lit-dev-content/site/docs/data/index.md b/packages/lit-dev-content/site/docs/v2/data/index.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/data/index.md
rename to packages/lit-dev-content/site/docs/v2/data/index.md
diff --git a/packages/lit-dev-content/site/docs/frameworks/index.md b/packages/lit-dev-content/site/docs/v2/frameworks/index.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/frameworks/index.md
rename to packages/lit-dev-content/site/docs/v2/frameworks/index.md
diff --git a/packages/lit-dev-content/site/docs/frameworks/react.md b/packages/lit-dev-content/site/docs/v2/frameworks/react.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/frameworks/react.md
rename to packages/lit-dev-content/site/docs/v2/frameworks/react.md
diff --git a/packages/lit-dev-content/site/docs/getting-started.md b/packages/lit-dev-content/site/docs/v2/getting-started.md
similarity index 95%
rename from packages/lit-dev-content/site/docs/getting-started.md
rename to packages/lit-dev-content/site/docs/v2/getting-started.md
index 8f2233518..514736a2f 100644
--- a/packages/lit-dev-content/site/docs/getting-started.md
+++ b/packages/lit-dev-content/site/docs/v2/getting-started.md
@@ -20,7 +20,7 @@ Take our [step-by-step tutorial](/tutorials/intro-to-lit) to learn how to build
 
 ## Lit starter kits
 
-We provide TypeScript and JavaScript component starter kits for creating standalone reusable components. See [Starter Kits](/docs/tools/starter-kits/).
+We provide TypeScript and JavaScript component starter kits for creating standalone reusable components. See [Starter Kits](/docs/v2/tools/starter-kits/).
 
 ## Install locally from npm
 
@@ -98,7 +98,7 @@ are two types of bundles:
 
 ## Add Lit to an existing project
 
-See [Adding Lit to an existing project](/docs/tools/adding-lit) for instructions on adding Lit to an existing project or application.
+See [Adding Lit to an existing project](/docs/v2/tools/adding-lit) for instructions on adding Lit to an existing project or application.
 
 ## Open WC project generator
 
diff --git a/packages/lit-dev-content/site/docs/index.md b/packages/lit-dev-content/site/docs/v2/index.md
similarity index 80%
rename from packages/lit-dev-content/site/docs/index.md
rename to packages/lit-dev-content/site/docs/v2/index.md
index 56501fb6b..5bb5c4753 100644
--- a/packages/lit-dev-content/site/docs/index.md
+++ b/packages/lit-dev-content/site/docs/v2/index.md
@@ -41,12 +41,12 @@ Here’s a small but non-trivial component (a countdown timer) that illustrates
 Some things to note:
 
 * Lit's main feature is the `LitElement` base class, a convenient and versatile extension of the native `HTMLElement`. You extend from it to define your own components.
-* Lit’s [expressive, declarative templates](/docs/templates/overview/) (utilizing JavaScript tagged template literals) make it easy to describe how a component should be rendered.
-* [Reactive properties](/docs/components/properties/) represent a component’s public API and/or internal state; your component automatically re-renders whenever a reactive property changes.
-* [Styles](/docs/components/styles) are scoped by default, keeping your CSS selectors simple and ensuring that your component’s styling won’t pollute (or be polluted by) the surrounding context.
+* Lit’s [expressive, declarative templates](/docs/v2/templates/overview/) (utilizing JavaScript tagged template literals) make it easy to describe how a component should be rendered.
+* [Reactive properties](/docs/v2/components/properties/) represent a component’s public API and/or internal state; your component automatically re-renders whenever a reactive property changes.
+* [Styles](/docs/v2/components/styles) are scoped by default, keeping your CSS selectors simple and ensuring that your component’s styling won’t pollute (or be polluted by) the surrounding context.
 * Lit works great in vanilla JavaScript, or you can use TypeScript for even better ergonomics by using decorators and type declarations.
 
-Lit doesn’t require compilation or building during development, so it can be used virtually tool-free if you prefer. First-class [IDE support](/docs/tools/development/#ide-plugins) (code-completion, linting, etc.) and [tooling for production](/docs/tools/production/) (localization, template minification, etc.) are readily available.
+Lit doesn’t require compilation or building during development, so it can be used virtually tool-free if you prefer. First-class [IDE support](/docs/v2/tools/development/#ide-plugins) (code-completion, linting, etc.) and [tooling for production](/docs/v2/tools/production/) (localization, template minification, etc.) are readily available.
 
 ## Why should I choose Lit?
 
@@ -64,7 +64,7 @@ Every Lit feature is carefully designed with web platform evolution in mind; we
 
 ## Next steps
 
-* [Getting started](/docs/getting-started/): Get set up to start developing with Lit.
-* [Components](/docs/components/overview/): Learn about the Lit component model.
-* [Templates](/docs/templates/overview/): Write templates with lit-html syntax.
-* [Code organization](/docs/composition/overview/): Write reusable, maintainable code.
+* [Getting started](/docs/v2/getting-started/): Get set up to start developing with Lit.
+* [Components](/docs/v2/components/overview/): Learn about the Lit component model.
+* [Templates](/docs/v2/templates/overview/): Write templates with lit-html syntax.
+* [Code organization](/docs/v2/composition/overview/): Write reusable, maintainable code.
diff --git a/packages/lit-dev-content/site/docs/internal/demos.md b/packages/lit-dev-content/site/docs/v2/internal/demos.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/internal/demos.md
rename to packages/lit-dev-content/site/docs/v2/internal/demos.md
diff --git a/packages/lit-dev-content/site/docs/internal/styles.md b/packages/lit-dev-content/site/docs/v2/internal/styles.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/internal/styles.md
rename to packages/lit-dev-content/site/docs/v2/internal/styles.md
diff --git a/packages/lit-dev-content/site/docs/introduction.md b/packages/lit-dev-content/site/docs/v2/introduction.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/introduction.md
rename to packages/lit-dev-content/site/docs/v2/introduction.md
diff --git a/packages/lit-dev-content/site/docs/libraries/index.md b/packages/lit-dev-content/site/docs/v2/libraries/index.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/libraries/index.md
rename to packages/lit-dev-content/site/docs/v2/libraries/index.md
diff --git a/packages/lit-dev-content/site/docs/libraries/labs.md b/packages/lit-dev-content/site/docs/v2/libraries/labs.md
similarity index 94%
rename from packages/lit-dev-content/site/docs/libraries/labs.md
rename to packages/lit-dev-content/site/docs/v2/libraries/labs.md
index e7f8c22be..414ff15b5 100644
--- a/packages/lit-dev-content/site/docs/libraries/labs.md
+++ b/packages/lit-dev-content/site/docs/v2/libraries/labs.md
@@ -41,7 +41,7 @@ A package containing controllers and decorators for using the [Context Protocol]
 </td>
 <td class="labs-table-links">
 
-[📄&nbsp;Docs](/docs/data/context/ "Docs")<br>[💬&nbsp;Feedback](https://github.com/lit/lit/discussions/3302 "Feedback")<br>[🐞&nbsp;Issues](https://github.com/lit/lit/issues?q=is%3Aissue+is%3Aopen+in%3Atitle+%5Blabs%2Fcontext%5D "Issues")
+[📄&nbsp;Docs](/docs/v2/data/context/ "Docs")<br>[💬&nbsp;Feedback](https://github.com/lit/lit/discussions/3302 "Feedback")<br>[🐞&nbsp;Issues](https://github.com/lit/lit/issues?q=is%3Aissue+is%3Aopen+in%3Atitle+%5Blabs%2Fcontext%5D "Issues")
 
 </td>
 </tr>
@@ -135,7 +135,7 @@ A plugin for [Eleventy](https://www.11ty.dev) that pre-renders Lit components at
 <td>A package for server-side rendering Lit templates and components.</td>
 <td class="labs-table-links">
 
-[📄&nbsp;Docs](/docs/ssr/overview "Docs")<br>[💬&nbsp;Feedback](https://github.com/lit/lit/discussions/3353 "Feedback")<br>[🐞&nbsp;Issues](https://github.com/lit/lit/issues?q=is%3Aissue+is%3Aopen+in%3Atitle+%5Blabs%2Fssr%5D "Issues")
+[📄&nbsp;Docs](/docs/v2/ssr/overview "Docs")<br>[💬&nbsp;Feedback](https://github.com/lit/lit/discussions/3353 "Feedback")<br>[🐞&nbsp;Issues](https://github.com/lit/lit/issues?q=is%3Aissue+is%3Aopen+in%3Atitle+%5Blabs%2Fssr%5D "Issues")
 
 </td>
 </tr>
diff --git a/packages/lit-dev-content/site/docs/libraries/standalone-templates.md b/packages/lit-dev-content/site/docs/v2/libraries/standalone-templates.md
similarity index 84%
rename from packages/lit-dev-content/site/docs/libraries/standalone-templates.md
rename to packages/lit-dev-content/site/docs/v2/libraries/standalone-templates.md
index d7af92962..ba907b133 100644
--- a/packages/lit-dev-content/site/docs/libraries/standalone-templates.md
+++ b/packages/lit-dev-content/site/docs/v2/libraries/standalone-templates.md
@@ -23,16 +23,16 @@ import {html, render} from 'lit-html';
 
 The standalone `lit-html` package also includes modules for the following features described in the full `Lit` developer guide:
 
-* `lit-html/directives/*` - [Built-in directives](/docs/templates/directives/)
-* `lit-html/directive.js` - [Custom directives](/docs/templates/custom-directives/)
-* `lit-html/async-directive.js` - [Custom async directives](/docs/templates/custom-directives/#async-directives)
-* `lit-html/directive-helpers.js` - [Directive helpers for imperative updates](/docs/templates/custom-directives/#imperative-dom-access:-update())
-* `lit-html/static.js` - [Static html tag](/docs/templates/expressions/#static-expressions)
+* `lit-html/directives/*` - [Built-in directives](/docs/v2/templates/directives/)
+* `lit-html/directive.js` - [Custom directives](/docs/v2/templates/custom-directives/)
+* `lit-html/async-directive.js` - [Custom async directives](/docs/v2/templates/custom-directives/#async-directives)
+* `lit-html/directive-helpers.js` - [Directive helpers for imperative updates](/docs/v2/templates/custom-directives/#imperative-dom-access:-update())
+* `lit-html/static.js` - [Static html tag](/docs/v2/templates/expressions/#static-expressions)
 * `lit-html/polyfill-support.js` - Support for interfacing with the web components polyfills (see [Styles and lit-html templates](#styles-and-lit-html-templates))
 
 ## Rendering lit-html templates
 
-Lit templates are written using JavaScript template literals tagged with the `html` tag. The contents of the literal are mostly plain, declarative HTML, and may include expressions to insert and update the dynamic parts of a template (see [Templates](/docs/templates/overview/) for a full reference on Lit's templating syntax).
+Lit templates are written using JavaScript template literals tagged with the `html` tag. The contents of the literal are mostly plain, declarative HTML, and may include expressions to insert and update the dynamic parts of a template (see [Templates](/docs/v2/templates/overview/) for a full reference on Lit's templating syntax).
 
 ```html
 html`<h1>Hello ${name}</h1>`
@@ -76,7 +76,7 @@ When you call `render`, **lit-html only updates the parts of the template that h
 
 The `render` method also takes an `options` argument that allows you to specify the following options:
 
-*   `host`: The `this` value to use when invoking event listeners registered with the `@eventName` syntax. This option only applies when you specify an event listener as a plain function. If you specify the event listener using an event listener object, the listener object is used as the `this` value. See [Event listener expressions](/docs/templates/expressions/#event-listener-expressions) for more on event listeners.
+*   `host`: The `this` value to use when invoking event listeners registered with the `@eventName` syntax. This option only applies when you specify an event listener as a plain function. If you specify the event listener using an event listener object, the listener object is used as the `this` value. See [Event listener expressions](/docs/v2/templates/expressions/#event-listener-expressions) for more on event listeners.
 
 *   `renderBefore`: An optional reference node within the `container` before which lit-html will render. By default, lit-html will append to the end of the container. Setting `renderBefore` allows rendering to a specific spot within the container.
 
@@ -117,11 +117,11 @@ In general, how you style HTML will depend on whether you're using shadow DOM:
 
 <div class="alert alert-info">
 
-**Styling shadow roots on legacy browsers requires polyfills.** Using the [ShadyCSS](https://github.com/webcomponents/polyfills/tree/master/packages/shadycss) polyfill with standalone `lit-html` requires loading `lit-html/polyfill-support.js` and passing a `scope` option in `RenderOptions` with the host tag name for scoping the rendered content. Although this approach is possible, we recommend using [LitElement](/docs/components/overview/) if you want to support rendering lit-html templates to shadow DOM on legacy browsers.
+**Styling shadow roots on legacy browsers requires polyfills.** Using the [ShadyCSS](https://github.com/webcomponents/polyfills/tree/master/packages/shadycss) polyfill with standalone `lit-html` requires loading `lit-html/polyfill-support.js` and passing a `scope` option in `RenderOptions` with the host tag name for scoping the rendered content. Although this approach is possible, we recommend using [LitElement](/docs/v2/components/overview/) if you want to support rendering lit-html templates to shadow DOM on legacy browsers.
 
 </div>
 
 To help with dynamic styling, lit-html provides two directives for manipulating an element's `class` and `style` attributes:
 
-*   [`classMap`](/docs/templates/directives/#classmap) sets classes on an element based on the properties of an object.
-*   [`styleMap`](/docs/templates/directives/#stylemap) sets the styles on an element based on a map of style properties and values.
+*   [`classMap`](/docs/v2/templates/directives/#classmap) sets classes on an element based on the properties of an object.
+*   [`styleMap`](/docs/v2/templates/directives/#stylemap) sets the styles on an element based on a map of style properties and values.
diff --git a/packages/lit-dev-content/site/docs/localization/best-practices.md b/packages/lit-dev-content/site/docs/v2/localization/best-practices.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/localization/best-practices.md
rename to packages/lit-dev-content/site/docs/v2/localization/best-practices.md
diff --git a/packages/lit-dev-content/site/docs/localization/cli-and-config.md b/packages/lit-dev-content/site/docs/v2/localization/cli-and-config.md
similarity index 99%
rename from packages/lit-dev-content/site/docs/localization/cli-and-config.md
rename to packages/lit-dev-content/site/docs/v2/localization/cli-and-config.md
index 8c39442ee..8f398c882 100644
--- a/packages/lit-dev-content/site/docs/localization/cli-and-config.md
+++ b/packages/lit-dev-content/site/docs/v2/localization/cli-and-config.md
@@ -19,7 +19,7 @@ lit-localize command [--flags]
 | Command   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `extract` | Extract `msg` calls from all input files and create or update XLIFF (`.xlf`) files.                                                                                                                                                                                                                                                                               |
-| `build`   | Incorporate translations back into your app using the configured [mode](/docs/localization/overview/#output-modes). |
+| `build`   | Incorporate translations back into your app using the configured [mode](/docs/v2/localization/overview/#output-modes). |
 
 ### Flags
 
diff --git a/packages/lit-dev-content/site/docs/localization/index.md b/packages/lit-dev-content/site/docs/v2/localization/index.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/localization/index.md
rename to packages/lit-dev-content/site/docs/v2/localization/index.md
diff --git a/packages/lit-dev-content/site/docs/localization/overview.md b/packages/lit-dev-content/site/docs/v2/localization/overview.md
similarity index 96%
rename from packages/lit-dev-content/site/docs/localization/overview.md
rename to packages/lit-dev-content/site/docs/v2/localization/overview.md
index e6c0f5e08..03e059f33 100644
--- a/packages/lit-dev-content/site/docs/localization/overview.md
+++ b/packages/lit-dev-content/site/docs/v2/localization/overview.md
@@ -239,7 +239,7 @@ export const templates = {
 };
 ```
 
-See the [runtime mode](/docs/localization/runtime-mode) page for full details
+See the [runtime mode](/docs/v2/localization/runtime-mode) page for full details
 about runtime mode.
 
 ### Transform mode
@@ -268,7 +268,7 @@ render() {
 }
 ```
 
-See the [transform mode](/docs/localization/transform-mode) page for full
+See the [transform mode](/docs/v2/localization/transform-mode) page for full
 details about transform mode.
 
 ### Differences
@@ -338,7 +338,7 @@ details about transform mode.
 
 The `lit-localize` command-line tool looks for a config file called
 `lit-localize.json` in the current directory. Copy-paste the example below for a
-quick start, and see the [CLI and config](/docs/localization/cli-and-config)
+quick start, and see the [CLI and config](/docs/v2/localization/cli-and-config)
 page for a full reference of all options.
 
 <div class="alert alert-info">
@@ -397,7 +397,7 @@ href="https://docs.oasis-open.org/xliff/v1.2/os/xliff-core.html" target="_blank"
 rel="noopener">XLIFF</a> file for each target locale. XLIFF is an XML format
 supported by most localization tools and services. XLIFF files will be written
 to the directory specified by the `interchange.xliffDir` [config
-option](/docs/localization/cli-and-config/#xliff-mode-settings).
+option](/docs/v2/localization/cli-and-config/#xliff-mode-settings).
 
 ```sh
 lit-localize extract
@@ -472,8 +472,8 @@ you have configured.
 lit-localize build
 ```
 
-See the [runtime mode](/docs/localization/runtime-mode) and [transform
-mode](/docs/localization/transform-mode) pages for details of how building in
+See the [runtime mode](/docs/v2/localization/runtime-mode) and [transform
+mode](/docs/v2/localization/transform-mode) pages for details of how building in
 each mode works.
 
 ## Message descriptions
diff --git a/packages/lit-dev-content/site/docs/localization/runtime-mode.md b/packages/lit-dev-content/site/docs/v2/localization/runtime-mode.md
similarity index 98%
rename from packages/lit-dev-content/site/docs/localization/runtime-mode.md
rename to packages/lit-dev-content/site/docs/v2/localization/runtime-mode.md
index 93ef1fcb0..069a76f90 100644
--- a/packages/lit-dev-content/site/docs/localization/runtime-mode.md
+++ b/packages/lit-dev-content/site/docs/v2/localization/runtime-mode.md
@@ -11,7 +11,7 @@ for each of your locales. Each generated module contains the localized templates
 for that locale. When your application switches locales, the module for that
 locale is imported, and all localized components are re-rendered.
 
-See [output modes](/docs/localization/overview/#output-modes) for a comparison
+See [output modes](/docs/v2/localization/overview/#output-modes) for a comparison
 of Lit Localize output modes.
 
 #### Example output
@@ -40,7 +40,7 @@ of Lit Localize runtime mode that you can use as templates.
 In your `lit-localize.json` config, set the `output.mode` property to `runtime`,
 and set the `output.outputDir` property to the location where you would like
 your localized template modules to be generated. See [runtime mode
-settings](/docs/localization/cli-and-config#runtime-mode-settings) for more
+settings](/docs/v2/localization/cli-and-config#runtime-mode-settings) for more
 details.
 
 Next, set `output.localeCodesModule` to a filepath of your chosing. Lit Localize
diff --git a/packages/lit-dev-content/site/docs/localization/transform-mode.md b/packages/lit-dev-content/site/docs/v2/localization/transform-mode.md
similarity index 99%
rename from packages/lit-dev-content/site/docs/localization/transform-mode.md
rename to packages/lit-dev-content/site/docs/v2/localization/transform-mode.md
index 2c72d6237..ef80b1cf7 100644
--- a/packages/lit-dev-content/site/docs/localization/transform-mode.md
+++ b/packages/lit-dev-content/site/docs/v2/localization/transform-mode.md
@@ -47,7 +47,7 @@ render() {
 In your `lit-localize.json` config, set the `mode` property to `transform`, and
 set the `output.outputDir` property to the location where you would like your
 localized app folders to be generated. See [transform mode
-settings](/docs/localization/cli-and-config#transform-mode-settings) for more
+settings](/docs/v2/localization/cli-and-config#transform-mode-settings) for more
 details.
 
 In your JavaScript or TypeScript project, optionally call
diff --git a/packages/lit-dev-content/site/docs/releases/index.md b/packages/lit-dev-content/site/docs/v2/releases/index.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/releases/index.md
rename to packages/lit-dev-content/site/docs/v2/releases/index.md
diff --git a/packages/lit-dev-content/site/docs/releases/release-notes/1.2.0.md b/packages/lit-dev-content/site/docs/v2/releases/release-notes/1.2.0.md
similarity index 79%
rename from packages/lit-dev-content/site/docs/releases/release-notes/1.2.0.md
rename to packages/lit-dev-content/site/docs/v2/releases/release-notes/1.2.0.md
index 664a4ed58..5c5652497 100644
--- a/packages/lit-dev-content/site/docs/releases/release-notes/1.2.0.md
+++ b/packages/lit-dev-content/site/docs/v2/releases/release-notes/1.2.0.md
@@ -9,7 +9,7 @@ See the [changelog](https://github.com/lit/lit/blob/master/CHANGELOG.md) for a c
 
 ### `live` directive
 
-[Documentation](/docs/templates/directives/#live)
+[Documentation](/docs/v2/templates/directives/#live)
 
 The `live` directive solves the problem of DOM state changing from underneath lit-html, for example with an `<input>` that a user can type into:
 
@@ -38,7 +38,7 @@ go();
 
 ### `templateContent` directive
 
-[Documentation](/docs/templates/directives/#templatecontent)
+[Documentation](/docs/v2/templates/directives/#templatecontent)
 
 The `templateContent` directive lets you stamp out HTML templates into lit-html templates. This is useful in a number of cases where HTML `<template>` elements are provided by users of elements or parts of a build system.
 
@@ -60,9 +60,9 @@ html`
 
 ### `unsafeSVG` directive
 
-[Documentation](/docs/templates/directives/#unsafesvg)
+[Documentation](/docs/v2/templates/directives/#unsafesvg)
 
-`unsaveSVG` is the missing partner of [`unsafeHTML`](/docs/templates/directives/#unsafehtml). It lets you render a fragment of SVG text as SVG elements rather than text. As with `unsafeHTML` this directive not safe to use with user-provided input, since if the input has `<script>` tags in it, there may be ways to get them to execute, etc.
+`unsaveSVG` is the missing partner of [`unsafeHTML`](/docs/v2/templates/directives/#unsafehtml). It lets you render a fragment of SVG text as SVG elements rather than text. As with `unsafeHTML` this directive not safe to use with user-provided input, since if the input has `<script>` tags in it, there may be ways to get them to execute, etc.
 
 `unsafeSVG` creates elements in the SVG namespace, so it's for use inside of `<svg>` tags or inside of lit-html {% api "svg" "svg" %} templates. If the input contains an `<svg>` tag itself, continue to use `unsafeHTML`.
 
diff --git a/packages/lit-dev-content/site/docs/releases/release-notes/1.3.0.md b/packages/lit-dev-content/site/docs/v2/releases/release-notes/1.3.0.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/releases/release-notes/1.3.0.md
rename to packages/lit-dev-content/site/docs/v2/releases/release-notes/1.3.0.md
diff --git a/packages/lit-dev-content/site/docs/releases/release-notes/release-notes.json b/packages/lit-dev-content/site/docs/v2/releases/release-notes/release-notes.json
similarity index 100%
rename from packages/lit-dev-content/site/docs/releases/release-notes/release-notes.json
rename to packages/lit-dev-content/site/docs/v2/releases/release-notes/release-notes.json
diff --git a/packages/lit-dev-content/site/docs/releases/upgrade.md b/packages/lit-dev-content/site/docs/v2/releases/upgrade.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/releases/upgrade.md
rename to packages/lit-dev-content/site/docs/v2/releases/upgrade.md
diff --git a/packages/lit-dev-content/site/docs/resources/community.md b/packages/lit-dev-content/site/docs/v2/resources/community.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/resources/community.md
rename to packages/lit-dev-content/site/docs/v2/resources/community.md
diff --git a/packages/lit-dev-content/site/docs/resources/index.md b/packages/lit-dev-content/site/docs/v2/resources/index.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/resources/index.md
rename to packages/lit-dev-content/site/docs/v2/resources/index.md
diff --git a/packages/lit-dev-content/site/docs/ssr/authoring.md b/packages/lit-dev-content/site/docs/v2/ssr/authoring.md
similarity index 98%
rename from packages/lit-dev-content/site/docs/ssr/authoring.md
rename to packages/lit-dev-content/site/docs/v2/ssr/authoring.md
index 1b96cd4d4..e7eccd6f4 100644
--- a/packages/lit-dev-content/site/docs/ssr/authoring.md
+++ b/packages/lit-dev-content/site/docs/v2/ssr/authoring.md
@@ -14,7 +14,7 @@ Note: The restrictions listed on this page are subject to change as we make impr
 
 ## Browser-only code
 
-Most browser DOM APIs are not available in the Node environment. Lit SSR utilizes a DOM shim that's the bare minimum required for rendering Lit templates and components. For a full list of what APIs are available, see the [DOM Emulation](/docs/ssr/dom-emulation) page.
+Most browser DOM APIs are not available in the Node environment. Lit SSR utilizes a DOM shim that's the bare minimum required for rendering Lit templates and components. For a full list of what APIs are available, see the [DOM Emulation](/docs/v2/ssr/dom-emulation) page.
 
 When authoring components, perform imperative DOM operations from lifecycle methods that are called **only on the client**, and not on the server. For example, use `updated()` if you need to measure the updated DOM. This callback is only run on the browser, so it is safe to access the DOM.
 
diff --git a/packages/lit-dev-content/site/docs/ssr/client-usage.md b/packages/lit-dev-content/site/docs/v2/ssr/client-usage.md
similarity index 98%
rename from packages/lit-dev-content/site/docs/ssr/client-usage.md
rename to packages/lit-dev-content/site/docs/v2/ssr/client-usage.md
index 4db561795..220346263 100644
--- a/packages/lit-dev-content/site/docs/ssr/client-usage.md
+++ b/packages/lit-dev-content/site/docs/v2/ssr/client-usage.md
@@ -54,7 +54,7 @@ For example:
   </body>
 ```
 
-If you are [bundling](/docs/tools/production/) your code, make sure the `lit/expriemntal-hydrate-support.js` is imported first:
+If you are [bundling](/docs/v2/tools/production/) your code, make sure the `lit/expriemntal-hydrate-support.js` is imported first:
 ```js
 // index.js
 import 'lit/experimental-hydrate-support.js';
diff --git a/packages/lit-dev-content/site/docs/ssr/dom-emulation.md b/packages/lit-dev-content/site/docs/v2/ssr/dom-emulation.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/ssr/dom-emulation.md
rename to packages/lit-dev-content/site/docs/v2/ssr/dom-emulation.md
diff --git a/packages/lit-dev-content/site/docs/ssr/index.md b/packages/lit-dev-content/site/docs/v2/ssr/index.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/ssr/index.md
rename to packages/lit-dev-content/site/docs/v2/ssr/index.md
diff --git a/packages/lit-dev-content/site/docs/ssr/overview.md b/packages/lit-dev-content/site/docs/v2/ssr/overview.md
similarity index 98%
rename from packages/lit-dev-content/site/docs/ssr/overview.md
rename to packages/lit-dev-content/site/docs/v2/ssr/overview.md
index c6d424501..b50f89af5 100644
--- a/packages/lit-dev-content/site/docs/ssr/overview.md
+++ b/packages/lit-dev-content/site/docs/v2/ssr/overview.md
@@ -34,5 +34,5 @@ This library is under active development with some notable limitations we hope t
 - Async component work is not supported. See issues [#3219](https://github.com/lit/lit/issues/3219), [#2469](https://github.com/lit/lit/issues/2469).
 - Only Lit components using shadow DOM is supported. See issue [#3080](https://github.com/lit/lit/issues/3080).
 - Integration with other SSR frameworks are being worked on. See issues for [NextJS](https://github.com/lit/lit/issues/2391) and [Nuxt](https://github.com/lit/lit/issues/3049).
-- Declarative shadow DOM is not implemented in all major browsers yet, though a polyfill is available. Read more about it in [client usage](/docs/ssr/client-usage#lit-components).
+- Declarative shadow DOM is not implemented in all major browsers yet, though a polyfill is available. Read more about it in [client usage](/docs/v2/ssr/client-usage#lit-components).
 - There are also open discussions that need to happen regarding `ElementRendererRegistry` for interop with other custom elements.
diff --git a/packages/lit-dev-content/site/docs/ssr/server-usage.md b/packages/lit-dev-content/site/docs/v2/ssr/server-usage.md
similarity index 99%
rename from packages/lit-dev-content/site/docs/ssr/server-usage.md
rename to packages/lit-dev-content/site/docs/v2/ssr/server-usage.md
index ef6c8c907..c62842e5a 100644
--- a/packages/lit-dev-content/site/docs/ssr/server-usage.md
+++ b/packages/lit-dev-content/site/docs/v2/ssr/server-usage.md
@@ -118,7 +118,7 @@ The main options that can be set by callers are:
 
 ## Running SSR in a VM module or the global scope
 
-In order to render custom elements in Node, they must first be defined and registered with the global `customElements` API, which is a browser-only feature. As such, when Lit runs in Node, it automatically uses a set of minimal DOM APIs necessary to render Lit on the server, and defines the `customElements` global. (For a list of emulated APIs, see [DOM emulation](/docs/ssr/dom-emulation).)
+In order to render custom elements in Node, they must first be defined and registered with the global `customElements` API, which is a browser-only feature. As such, when Lit runs in Node, it automatically uses a set of minimal DOM APIs necessary to render Lit on the server, and defines the `customElements` global. (For a list of emulated APIs, see [DOM emulation](/docs/v2/ssr/dom-emulation).)
 
 Lit SSR provides two different ways of rendering custom elements server-side: rendering in the [global scope](#global-scope) or via [VM modules](#vm-module). VM modules utilizes Node's [`vm.Module`](https://nodejs.org/api/vm.html#class-vmmodule) API, which enables running code within V8 Virtual Machine contexts. The two methods differ primarily in how global state, such as the custom elements registry, are shared.
 
diff --git a/packages/lit-dev-content/site/docs/templates/conditionals.md b/packages/lit-dev-content/site/docs/v2/templates/conditionals.md
similarity index 84%
rename from packages/lit-dev-content/site/docs/templates/conditionals.md
rename to packages/lit-dev-content/site/docs/v2/templates/conditionals.md
index 80bc99da1..46e461ab4 100644
--- a/packages/lit-dev-content/site/docs/templates/conditionals.md
+++ b/packages/lit-dev-content/site/docs/v2/templates/conditionals.md
@@ -70,13 +70,13 @@ render() {
 }
 ```
 
-See the [cache directive](/docs/templates/directives/#cache) for more information.
+See the [cache directive](/docs/v2/templates/directives/#cache) for more information.
 
 ## Conditionally rendering nothing { #conditionally-rendering-nothing }
 
 Sometimes, you may want to render nothing in one branch of a conditional operator. This is commonly needed for child expressions and also sometimes needed in attribute expressions.
 
-For child expressions, the values `undefined`, `null`, the empty string (`''`), and Lit's [nothing](/docs/api/templates/#nothing) sentinel value all render no nodes. See [Removing child content](/docs/templates/expressions/#removing-child) for more information.
+For child expressions, the values `undefined`, `null`, the empty string (`''`), and Lit's [nothing](/docs/v2/api/templates/#nothing) sentinel value all render no nodes. See [Removing child content](/docs/v2/templates/expressions/#removing-child) for more information.
 
 This example renders a value if it exists, and otherwise renders nothing:
 
@@ -86,7 +86,7 @@ render() {
 }
 ```
 
-For attribute expressions, Lit's [nothing](/docs/api/templates/#nothing) sentinel value removes the attribute. See [Removing an attribute](/docs/templates/expressions/#removing-attribute) for more information.
+For attribute expressions, Lit's [nothing](/docs/v2/api/templates/#nothing) sentinel value removes the attribute. See [Removing an attribute](/docs/v2/templates/expressions/#removing-attribute) for more information.
 
 This example conditionally renders the `aria-label` attribute:
 
diff --git a/packages/lit-dev-content/site/docs/templates/custom-directives.md b/packages/lit-dev-content/site/docs/v2/templates/custom-directives.md
similarity index 98%
rename from packages/lit-dev-content/site/docs/templates/custom-directives.md
rename to packages/lit-dev-content/site/docs/v2/templates/custom-directives.md
index 65f26a868..3a07df9f0 100644
--- a/packages/lit-dev-content/site/docs/templates/custom-directives.md
+++ b/packages/lit-dev-content/site/docs/v2/templates/custom-directives.md
@@ -19,7 +19,7 @@ html`<div>
      </div>`
 ```
 
-Lit ships with a number of [built-in directives](/docs/templates/directives/) like [`repeat()`](/docs/templates/directives/#repeat) and [`cache()`](/docs/templates/directives/#cache). Users can also write their own custom directives.
+Lit ships with a number of [built-in directives](/docs/v2/templates/directives/) like [`repeat()`](/docs/v2/templates/directives/#repeat) and [`cache()`](/docs/v2/templates/directives/#cache). Users can also write their own custom directives.
 
 There are two kinds of directives:
 
diff --git a/packages/lit-dev-content/site/docs/templates/directives.md b/packages/lit-dev-content/site/docs/v2/templates/directives.md
similarity index 99%
rename from packages/lit-dev-content/site/docs/templates/directives.md
rename to packages/lit-dev-content/site/docs/v2/templates/directives.md
index 648921f5d..f23e1c4a3 100644
--- a/packages/lit-dev-content/site/docs/templates/directives.md
+++ b/packages/lit-dev-content/site/docs/v2/templates/directives.md
@@ -251,7 +251,7 @@ Lit includes a number of built-in directives to help with a variety of rendering
 
 </div>
 
-You can also build your own directives. For more information, see [Custom directives](/docs/templates/custom-directives/).
+You can also build your own directives. For more information, see [Custom directives](/docs/v2/templates/custom-directives/).
 
 ## Styling
 
@@ -722,7 +722,7 @@ customElements.define('my-element', MyElement);
 If no `keyFn` is provided, `repeat` will perform similar to a simple map of
 items to values, and DOM will be reused against potentially different items.
 
-See [When to use map or repeat](/docs/templates/lists/#when-to-use-map-or-repeat) for a discussion
+See [When to use map or repeat](/docs/v2/templates/lists/#when-to-use-map-or-repeat) for a discussion
 of when to use `repeat` and when to use standard JavaScript flow control.
 
 Explore `repeat` more in the [playground](/playground/#sample=examples/directive-repeat).
diff --git a/packages/lit-dev-content/site/docs/templates/expressions.md b/packages/lit-dev-content/site/docs/v2/templates/expressions.md
similarity index 91%
rename from packages/lit-dev-content/site/docs/templates/expressions.md
rename to packages/lit-dev-content/site/docs/v2/templates/expressions.md
index b63b2abb3..1aef9742e 100644
--- a/packages/lit-dev-content/site/docs/templates/expressions.md
+++ b/packages/lit-dev-content/site/docs/v2/templates/expressions.md
@@ -12,7 +12,7 @@ Lit templates can include dynamic values called expressions. An expression can b
 
 Expressions can only be placed in specific locations in the template, and how an expression is interpreted depends on where it appears. Expressions inside the element tag itself affect the element. Expressions inside the element's content, where child nodes go, render child nodes or text.
 
-Valid values for expressions differ based on where the expression occurs. Generally all expressions accept primitive values like strings and numbers, and some expressions support additional value types. In addition, all expressions can accept _directives_, which are special functions that customize the way an expression is processed and rendered. See [Custom directives](/docs/templates/custom-directives/) for more information.
+Valid values for expressions differ based on where the expression occurs. Generally all expressions accept primitive values like strings and numbers, and some expressions support additional value types. In addition, all expressions can accept _directives_, which are special functions that customize the way an expression is processed and rendered. See [Custom directives](/docs/v2/templates/custom-directives/) for more information.
 
 Here's a quick reference followed by more detailed information about each expression type.
 
@@ -138,9 +138,9 @@ html`<main>${bodyText}</main>`
 Expressions in the child position can take many kinds of values:
 
 * Primitive values likes strings, numbers, and booleans.
-* `TemplateResult` objects created with the [`html`](/docs/api/templates/#html) function (or the [`svg`](/docs/api/templates/#svg) function, if the expression is inside an `<svg>` element).
+* `TemplateResult` objects created with the [`html`](/docs/v2/api/templates/#html) function (or the [`svg`](/docs/v2/api/templates/#svg) function, if the expression is inside an `<svg>` element).
 * DOM nodes.
-* The sentinel values [`nothing`](/docs/templates/conditionals/#conditionally-rendering-nothing) and [`noChange`](/docs/templates/custom-directives/#signaling-no-change).
+* The sentinel values [`nothing`](/docs/v2/templates/conditionals/#conditionally-rendering-nothing) and [`noChange`](/docs/v2/templates/custom-directives/#signaling-no-change).
 * Arrays or iterables of any of the supported types.
 
 ### Primitive values
@@ -149,7 +149,7 @@ Lit can render almost all [primitive values](https://developer.mozilla.org/en-US
 
 Numbers values like `5` will render the string `'5'`. Bigints are treated similarly.
 
-A boolean value `true` will render `'true'`, and `false` will render `'false'`, but rendering a boolean like this is uncommon. Instead booleans are typically used in conditionals to render other appropriate values. For more on conditionals, see [Conditionals](/docs/templates/conditionals/).
+A boolean value `true` will render `'true'`, and `false` will render `'false'`, but rendering a boolean like this is uncommon. Instead booleans are typically used in conditionals to render other appropriate values. For more on conditionals, see [Conditionals](/docs/v2/templates/conditionals/).
 
 The empty string `''`, `null`, and `undefined` are specially treated and render nothing. See [Removing child content](#removing-child) for more information.
 
@@ -159,7 +159,7 @@ Symbol values cannot be converted to strings and throw when placed in child expr
 
 Lit supplies a couple of special sentinel values that can be used in child expressions.
 
-The `noChange` sentinel value does not change the expression's existing value. It is typically used in custom directives. See [Signaling no change](/docs/templates/custom-directives/#signaling-no-change) for more information.
+The `noChange` sentinel value does not change the expression's existing value. It is typically used in custom directives. See [Signaling no change](/docs/v2/templates/custom-directives/#signaling-no-change) for more information.
 
 The `nothing` sentinel renders nothing. See [Removing child content](#removing-child) for more information.
 
@@ -186,9 +186,9 @@ html`
 `;
 ```
 
-For more on conditionals, see [Conditionals](/docs/templates/conditionals/).
+For more on conditionals, see [Conditionals](/docs/v2/templates/conditionals/).
 
-For more on using JavaScript to create repeating templates, see [Lists](/docs/templates/lists/).
+For more on using JavaScript to create repeating templates, see [Lists](/docs/v2/templates/lists/).
 
 ### DOM nodes
 
@@ -204,15 +204,15 @@ const page = html`
 
 ### Arrays or iterables of any of the supported types
 
-An expression can also return an array or iterable of any of the supported types, in any combination. You can use this feature along with standard JavaScript like the Array `map` method to create repeating templates and lists. For examples, see [Lists](/docs/templates/lists/).
+An expression can also return an array or iterable of any of the supported types, in any combination. You can use this feature along with standard JavaScript like the Array `map` method to create repeating templates and lists. For examples, see [Lists](/docs/v2/templates/lists/).
 
 ### Removing child content {#removing-child}
 
-The values `null`, `undefined`, the empty string `''`, and Lit's [nothing](/docs/api/templates/#nothing) sentinel value remove any previously rendered content and render no node.
+The values `null`, `undefined`, the empty string `''`, and Lit's [nothing](/docs/v2/api/templates/#nothing) sentinel value remove any previously rendered content and render no node.
 
-Setting or removing child content is often done based on a condition. See [Conditionally rendering nothing](/docs/templates/conditionals/#conditionally-rendering-nothing) for more information.
+Setting or removing child content is often done based on a condition. See [Conditionally rendering nothing](/docs/v2/templates/conditionals/#conditionally-rendering-nothing) for more information.
 
-Rendering no node can be important when an expression is a child of an element with Shadow DOM that includes a `slot` with fallback content. Rendering no node ensures the fallback content is rendered. See [fallback content](/docs/components/shadow-dom/#fallback) for more information.
+Rendering no node can be important when an expression is a child of an element with Shadow DOM that includes a `slot` with fallback content. Rendering no node ensures the fallback content is rendered. See [fallback content](/docs/v2/components/shadow-dom/#fallback) for more information.
 
 ## Attribute expressions {#attribute-expressions }
 
@@ -254,7 +254,7 @@ html`<img src="/images/${this.imagePath}/${this.imageFile}">`;
 
 If `this.imagePath` or `this.imageFile` is not defined, the `src` attribute should not be set or an invalid network request will occur.
 
-Lit's [nothing](/docs/api/templates/#nothing) sentinel value addresses this by removing the attribute when any expression in the attribute value evaluates to `nothing`.
+Lit's [nothing](/docs/v2/api/templates/#nothing) sentinel value addresses this by removing the attribute when any expression in the attribute value evaluates to `nothing`.
 
 ```js
 html`<img src="/images/${this.imagePath ?? nothing}/${this.imageFile ?? nothing}">`;
@@ -262,7 +262,7 @@ html`<img src="/images/${this.imagePath ?? nothing}/${this.imageFile ?? nothing}
 
 In this example **both** the `this.imagePath` and `this.imageFile` properties must be defined for the `src` attribute to be set. The `??` [nullish coalescing operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) returns the right-hand value if the left-hand value is `null` or `undefined`.
 
-Lit also provides an [ifDefined](/docs/api/directives/#ifDefined) directive which is sugar for `value ?? nothing`.
+Lit also provides an [ifDefined](/docs/v2/api/directives/#ifDefined) directive which is sugar for `value ?? nothing`.
 
 ```js
 html`<img src="/images/${ifDefined(this.imagePath)}/${ifDefined(this.imageFile)}">`;
@@ -276,7 +276,7 @@ html`<button aria-label="${this.ariaLabel || nothing}"></button>`
 
 In this example the `aria-label` attribute is rendered only if `this.ariaLabel` is not an empty string.
 
-Setting or removing an attribute is often done based on a condition. See [Conditionally rendering nothing](/docs/templates/conditionals/#conditionally-rendering-nothing) for more information.
+Setting or removing an attribute is often done based on a condition. See [Conditionally rendering nothing](/docs/v2/templates/conditionals/#conditionally-rendering-nothing) for more information.
 
 ## Property expressions {#property-expressions}
 
@@ -294,7 +294,7 @@ html`<my-list .listItems=${this.items}></my-list>`;
 
 Note that the property name in this example—`listItems`—is mixed case. Although HTML *attributes* are case-insensitive, Lit preserves the case for property names when it processes the template.
 
-For more information about component properties, see [Reactive properties](/docs/components/properties/).
+For more information about component properties, see [Reactive properties](/docs/v2/components/properties/).
 
 ## Event listener expressions {#event-listener-expressions}
 
@@ -316,7 +316,7 @@ clickHandler() {
 }
 ```
 
-For more information about component events, see [Events](/docs/components/events/).
+For more information about component events, see [Events](/docs/v2/components/events/).
 
 ## Element expressions {#element-expressions}
 
@@ -326,7 +326,7 @@ You can also add an expression that accesses an element instance, instead of a s
 html`<div ${myDirective()}></div>`
 ```
 
-Element expressions only work with [directives](/docs/templates/directives/). Any other value type in an element expression is ignored.
+Element expressions only work with [directives](/docs/v2/templates/directives/). Any other value type in an element expression is ignored.
 
 One built-in directive that can be used in an element expression is the `ref` directive. It provides a reference to the rendered element.
 
@@ -334,7 +334,7 @@ One built-in directive that can be used in an element expression is the `ref` di
 html`<button ${ref(this.myRef)}`;
 ```
 
-See [ref](/docs/templates/directives/#ref) for more information.
+See [ref](/docs/v2/templates/directives/#ref) for more information.
 
 ## Well-formed HTML { #well-formed-html }
 
@@ -433,7 +433,7 @@ Expressions should generally not appear in the following locations:
   <!-- will not update: ${value} -->
   ```
 
-* Inside `<style>` elements when using the ShadyCSS polyfill. See [Expressions and style elements](/docs/components/styles/#style-element) for more details.
+* Inside `<style>` elements when using the ShadyCSS polyfill. See [Expressions and style elements](/docs/v2/components/styles/#style-element) for more details.
 
 Note that expressions in all the invalid cases above are valid when using [static expressions](#static-expressions), although these should not be used for performance-sensitive updates due to the inefficiencies involved (see below).
 
diff --git a/packages/lit-dev-content/site/docs/templates/index.md b/packages/lit-dev-content/site/docs/v2/templates/index.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/templates/index.md
rename to packages/lit-dev-content/site/docs/v2/templates/index.md
diff --git a/packages/lit-dev-content/site/docs/templates/lists.md b/packages/lit-dev-content/site/docs/v2/templates/lists.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/templates/lists.md
rename to packages/lit-dev-content/site/docs/v2/templates/lists.md
diff --git a/packages/lit-dev-content/site/docs/templates/overview.md b/packages/lit-dev-content/site/docs/v2/templates/overview.md
similarity index 53%
rename from packages/lit-dev-content/site/docs/templates/overview.md
rename to packages/lit-dev-content/site/docs/v2/templates/overview.md
index 594bff56d..30e9ab0f1 100644
--- a/packages/lit-dev-content/site/docs/templates/overview.md
+++ b/packages/lit-dev-content/site/docs/v2/templates/overview.md
@@ -24,12 +24,12 @@ The template syntax might look like you're just doing string interpolation. But
 
 Lit templates are extremely expressive and allow you to render dynamic content in a variety of ways:
 
- - [Expressions](/docs/templates/expressions/): Templates can include dynamic values called *expressions* that can be used to render attributes, text, properties, event handlers, and even other templates.
- - [Conditionals](/docs/templates/conditionals/): Expressions can render conditional content using standard JavaScript flow control.
- - [Lists](/docs/templates/lists/): Render lists by transforming data into arrays of templates using standard JavaScript looping and array techniques.
- - [Built-in directives](/docs/templates/directives/): Directives are functions that can extend Lit's templating functionality. The library includes a set of built-in directives to help with a variety of rendering needs.
- - [Custom directives](/docs/templates/custom-directives/): You can also write your own directives to customize Lit's rendering as needed.
+ - [Expressions](/docs/v2/templates/expressions/): Templates can include dynamic values called *expressions* that can be used to render attributes, text, properties, event handlers, and even other templates.
+ - [Conditionals](/docs/v2/templates/conditionals/): Expressions can render conditional content using standard JavaScript flow control.
+ - [Lists](/docs/v2/templates/lists/): Render lists by transforming data into arrays of templates using standard JavaScript looping and array techniques.
+ - [Built-in directives](/docs/v2/templates/directives/): Directives are functions that can extend Lit's templating functionality. The library includes a set of built-in directives to help with a variety of rendering needs.
+ - [Custom directives](/docs/v2/templates/custom-directives/): You can also write your own directives to customize Lit's rendering as needed.
 
 ## Standalone templating
 
-You can also use Lit's templating library for standalone templating, outside of a Lit component. For details, see [Standalone lit-html templates](/docs/libraries/standalone-templates).
+You can also use Lit's templating library for standalone templating, outside of a Lit component. For details, see [Standalone lit-html templates](/docs/v2/libraries/standalone-templates).
diff --git a/packages/lit-dev-content/site/docs/tools/adding-lit.md b/packages/lit-dev-content/site/docs/v2/tools/adding-lit.md
similarity index 90%
rename from packages/lit-dev-content/site/docs/tools/adding-lit.md
rename to packages/lit-dev-content/site/docs/v2/tools/adding-lit.md
index 262db3823..8eed2e898 100644
--- a/packages/lit-dev-content/site/docs/tools/adding-lit.md
+++ b/packages/lit-dev-content/site/docs/v2/tools/adding-lit.md
@@ -88,6 +88,6 @@ Most JavaScript frameworks have [great support for web components](https://custo
 
 At this point, you should be able to build and run your project and see the "Hello from MyElement!" message.
 
-If you're ready to add features to your component, head over to [Components](/docs/components/overview/) to learn about building your first Lit component, or [Templates](/docs/templates/overview/) for details on writing templates.
+If you're ready to add features to your component, head over to [Components](/docs/v2/components/overview/) to learn about building your first Lit component, or [Templates](/docs/v2/templates/overview/) for details on writing templates.
 
-For details on building projects, including some sample Rollup configurations, see [Building for production](/docs/tools/production/).
+For details on building projects, including some sample Rollup configurations, see [Building for production](/docs/v2/tools/production/).
diff --git a/packages/lit-dev-content/site/docs/tools/development.md b/packages/lit-dev-content/site/docs/v2/tools/development.md
similarity index 98%
rename from packages/lit-dev-content/site/docs/tools/development.md
rename to packages/lit-dev-content/site/docs/v2/tools/development.md
index 37b5eb61f..27201f7c4 100644
--- a/packages/lit-dev-content/site/docs/tools/development.md
+++ b/packages/lit-dev-content/site/docs/v2/tools/development.md
@@ -16,7 +16,7 @@ During the development phase of your projects, when you're writing Lit component
 * A code formatter, for consistently formatting code.
 * Lit-specific IDE plugins, for linting and syntax-highlighting Lit templates.
 
-Check out the [Starter Kits](/docs/tools/starter-kits/) documentation to easily setup a development environment with all of these features pre-configured.
+Check out the [Starter Kits](/docs/v2/tools/starter-kits/) documentation to easily setup a development environment with all of these features pre-configured.
 
 ## Development and production builds
 
diff --git a/packages/lit-dev-content/site/docs/tools/index.md b/packages/lit-dev-content/site/docs/v2/tools/index.md
similarity index 100%
rename from packages/lit-dev-content/site/docs/tools/index.md
rename to packages/lit-dev-content/site/docs/v2/tools/index.md
diff --git a/packages/lit-dev-content/site/docs/v2/tools/overview.md b/packages/lit-dev-content/site/docs/v2/tools/overview.md
new file mode 100644
index 000000000..f34a0ea19
--- /dev/null
+++ b/packages/lit-dev-content/site/docs/v2/tools/overview.md
@@ -0,0 +1,23 @@
+---
+title: Tools and workflows overview
+eleventyNavigation:
+  key: Overview
+  parent: Tools
+  order: 1
+versionLinks:
+  v1: lit-html/tools/
+---
+
+Lit components are written using plain JavaScript or TypeScript and run out-of-the box on modern browsers with minimal tooling, so you don't _need_ any Lit-specific compilers, tools, or workflows.
+
+However, Lit uses very _modern_ web platform features, so it does require some tooling and polyfills to run on older browsers. Some tools also require configuration options to handle modern JavaScript. And, while Lit is "just JavaScript" there are some tools that make working with web components  much nicer.
+
+The tools and workflows docs cover the different phases of development:
+
+* [Requirements](/docs/v2/tools/requirements/): Common requirements for tools and browsers to work with Lit out of the box, as well as compiler options and polyfills required for legacy browsers.
+* [Development](/docs/v2/tools/development/): Setting up your local development environment, including dev server, linting, formatting, syntax highlighting and type-checking.
+* [Testing](/docs/v2/tools/testing/): Recommendations for testing Lit projects in modern and legacy browsers.
+* [Publishing](/docs/v2/tools/publishing/): Guidelines for publishing your component packages to npm.
+* [Building for production](/docs/v2/tools/production/): Building applications for production, including bundling, optimizations, and differential serving for modern and legacy browsers.
+* [Starter Kits](/docs/v2/tools/starter-kits): Instructions on using our Lit component starter kits for JavaScript and TypeScript.
+* [Adding Lit](/docs/v2/tools/adding-lit): Installing and adding Lit to an existing project.
diff --git a/packages/lit-dev-content/site/docs/tools/production.md b/packages/lit-dev-content/site/docs/v2/tools/production.md
similarity index 95%
rename from packages/lit-dev-content/site/docs/tools/production.md
rename to packages/lit-dev-content/site/docs/v2/tools/production.md
index f1e63947f..a77122d6b 100644
--- a/packages/lit-dev-content/site/docs/tools/production.md
+++ b/packages/lit-dev-content/site/docs/v2/tools/production.md
@@ -8,11 +8,11 @@ versionLinks:
   v1: tools/build/
 ---
 
-This page focuses on recommendations for building an _application_ that uses Lit components for production.  For recommendations on build steps to perform on source code prior to publishing a reusable Lit _component_ to npm, see [Publishing](/docs/tools/publishing/).
+This page focuses on recommendations for building an _application_ that uses Lit components for production.  For recommendations on build steps to perform on source code prior to publishing a reusable Lit _component_ to npm, see [Publishing](/docs/v2/tools/publishing/).
 
 When building an application that includes Lit components, you can use common JavaScript build tools like [Rollup](https://rollupjs.org/) or [webpack](https://webpack.js.org/) to prepare your source code and dependencies for serving in a production environment.
 
-See [Requirements](/docs/tools/requirements/) for a full list of requirements for building Lit code, which apply to both development and production.
+See [Requirements](/docs/v2/tools/requirements/) for a full list of requirements for building Lit code, which apply to both development and production.
 
 In addition to those minimum requirements, this page describes optimizations you should consider when preparing code for production, as well as a concrete Rollup configuration that implements them.
 
@@ -48,7 +48,7 @@ into an easy-to-use package. Example configurations using this plugin are descri
 ### Modern-only build
 
 The annotated `rollup.config.js` file below will build an application that meets
-the [modern browser build requirements](/docs/tools/requirements/#building-for-modern-browsers) and
+the [modern browser build requirements](/docs/v2/tools/requirements/#building-for-modern-browsers) and
 [production optimizations](#preparing-code-for-production) described on this page. This configuration is
 suitable for serving to modern browsers that can run ES2019 JS without
 polyfills.
@@ -116,7 +116,7 @@ The following configuration generates a hybrid build with two sets of JS
 bundles, one for modern browsers, and one for legacy browsers. The modern
 bundles are optimistically pre-fetched, and client-side feature-detection is
 used to determine whether to load the smaller/faster modern builds or the legacy
-build (and any required polyfills), per the [legacy browser build requirements](/docs/tools/requirements/#building-for-legacy-browsers).
+build (and any required polyfills), per the [legacy browser build requirements](/docs/v2/tools/requirements/#building-for-legacy-browsers).
 
 Required node modules:
 ```sh
diff --git a/packages/lit-dev-content/site/docs/tools/publishing.md b/packages/lit-dev-content/site/docs/v2/tools/publishing.md
similarity index 98%
rename from packages/lit-dev-content/site/docs/tools/publishing.md
rename to packages/lit-dev-content/site/docs/v2/tools/publishing.md
index a57a3cae2..a4bc81b7d 100644
--- a/packages/lit-dev-content/site/docs/tools/publishing.md
+++ b/packages/lit-dev-content/site/docs/v2/tools/publishing.md
@@ -8,7 +8,7 @@ versionLinks:
   v1: tools/publish/
 ---
 
-This page provides guidelines for publishing a Lit component to [npm](https://www.npmjs.com/), the package manager used by the vast majority of JavaScript libraries and developers. See [Starter Kits](/docs/tools/starter-kits/) for reusable component templates set up for publishing to npm.
+This page provides guidelines for publishing a Lit component to [npm](https://www.npmjs.com/), the package manager used by the vast majority of JavaScript libraries and developers. See [Starter Kits](/docs/v2/tools/starter-kits/) for reusable component templates set up for publishing to npm.
 
 ## Publishing to npm
 
@@ -172,7 +172,7 @@ in TypeScript.
 *   Publish your `.d.ts` typings in your npm package.
 
 
- For more information about `HTMLElementTagNameMap`, see [Providing good TypeScript typings](/docs/components/defining/#typescript-typings).
+ For more information about `HTMLElementTagNameMap`, see [Providing good TypeScript typings](/docs/v2/components/defining/#typescript-typings).
 
 ### Self-define elements
 
diff --git a/packages/lit-dev-content/site/docs/tools/requirements.md b/packages/lit-dev-content/site/docs/v2/tools/requirements.md
similarity index 98%
rename from packages/lit-dev-content/site/docs/tools/requirements.md
rename to packages/lit-dev-content/site/docs/v2/tools/requirements.md
index 2ddb796a0..5aed8e4e2 100644
--- a/packages/lit-dev-content/site/docs/tools/requirements.md
+++ b/packages/lit-dev-content/site/docs/v2/tools/requirements.md
@@ -23,7 +23,7 @@ When developing an app using Lit, either your target browsers need to support th
 
 This page gives a general overview for how to meet these requirements in your development and productions environments.
 
-See [Development](/docs/tools/development/), [Testing](/docs/tools/testing/), and [Building for Production](/docs/tools/production/) for recommendations on tools and configurations that meet these requirements.
+See [Development](/docs/v2/tools/development/), [Testing](/docs/v2/tools/testing/), and [Building for Production](/docs/v2/tools/production/) for recommendations on tools and configurations that meet these requirements.
 
 ## Requirements for modern browsers {#building-for-modern-browsers}
 
diff --git a/packages/lit-dev-content/site/docs/tools/starter-kits.md b/packages/lit-dev-content/site/docs/v2/tools/starter-kits.md
similarity index 92%
rename from packages/lit-dev-content/site/docs/tools/starter-kits.md
rename to packages/lit-dev-content/site/docs/v2/tools/starter-kits.md
index 1d68dfc63..483014a43 100644
--- a/packages/lit-dev-content/site/docs/tools/starter-kits.md
+++ b/packages/lit-dev-content/site/docs/v2/tools/starter-kits.md
@@ -112,7 +112,7 @@ A couple of things to look for in the code:
     {% endswitchable-sample %}
 
 
-*   The component's `render` method defines a [template](/docs/templates/overview/) that will be rendered as a part of the component. In this case, it includes some text, some data bindings, and a button. For more information, see [Templates](/docs/templates/overview/).
+*   The component's `render` method defines a [template](/docs/v2/templates/overview/) that will be rendered as a part of the component. In this case, it includes some text, some data bindings, and a button. For more information, see [Templates](/docs/v2/templates/overview/).
 
     ```js
     export class MyElement extends LitElement {
@@ -129,7 +129,7 @@ A couple of things to look for in the code:
     }
     ```
 
-*   The component defines some properties. The component responds to changes in these properties (for example, by re-rendering the template when necessary). For more information, see [Properties](/docs/components/properties/).
+*   The component defines some properties. The component responds to changes in these properties (for example, by re-rendering the template when necessary). For more information, see [Properties](/docs/v2/components/properties/).
 
     {% switchable-sample %}
 
@@ -198,11 +198,11 @@ You'll probably want to change the component name from "my-element" to something
 
 ### Next steps
 
-Ready to add features to your component? Head over to [Components](/docs/components/overview/) to learn about building your first Lit component, or [Templates](/docs/templates/overview/) for details on writing templates.
+Ready to add features to your component? Head over to [Components](/docs/v2/components/overview/) to learn about building your first Lit component, or [Templates](/docs/v2/templates/overview/) for details on writing templates.
 
 For details on running tests and using other tools, see the starter project README:
 
 *   [TypeScript project README](https://github.com/PolymerLabs/lit-element-starter-ts/blob/master/README.md)
 *   [JavaScript project README](https://github.com/PolymerLabs/lit-element-starter-js/blob/master/README.md)
 
-For a guide on publishing your component to `npm`, see [Publishing](/docs/tools/publishing/).
+For a guide on publishing your component to `npm`, see [Publishing](/docs/v2/tools/publishing/).
diff --git a/packages/lit-dev-content/site/docs/tools/testing.md b/packages/lit-dev-content/site/docs/v2/tools/testing.md
similarity index 88%
rename from packages/lit-dev-content/site/docs/tools/testing.md
rename to packages/lit-dev-content/site/docs/v2/tools/testing.md
index 47a3c2945..13ec18a5e 100644
--- a/packages/lit-dev-content/site/docs/tools/testing.md
+++ b/packages/lit-dev-content/site/docs/v2/tools/testing.md
@@ -10,7 +10,7 @@ versionLinks:
 
 Testing ensures your code functions as you intend and saves you from tedious debugging.
 
-See the [Starter Kits](/docs/tools/starter-kits/) documentation for an easy to use setup with a fully pre-configured testing environment that works great for testing Lit components.
+See the [Starter Kits](/docs/v2/tools/starter-kits/) documentation for an easy to use setup with a fully pre-configured testing environment that works great for testing Lit components.
 
 ## Selecting a test framework
 
@@ -28,11 +28,11 @@ While it's possible to test without a browser by shimming DOM calls, we don't re
 
 ### Supporting modern Javascript
 
-The test environment you use must have support for using modern Javascript, including using modules with bare module specifiers, or else down-leveling modern Javascript appropriately. See the [Requirements for legacy browsers](/docs/tools/requirements/#building-for-legacy-browsers) documentation for more details.
+The test environment you use must have support for using modern Javascript, including using modules with bare module specifiers, or else down-leveling modern Javascript appropriately. See the [Requirements for legacy browsers](/docs/v2/tools/requirements/#building-for-legacy-browsers) documentation for more details.
 
 ### Using polyfills
 
-To test on older browsers, your test environment will need to load some polyfills, including the [web components polyfills](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs) and Lit's `polyfill-support` module. See the [Polyfills](/docs/tools/requirements/#polyfills) documentation for more details.
+To test on older browsers, your test environment will need to load some polyfills, including the [web components polyfills](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs) and Lit's `polyfill-support` module. See the [Polyfills](/docs/v2/tools/requirements/#polyfills) documentation for more details.
 
 ## Using Web Test Runner { #web-test-runner }
 
diff --git a/packages/lit-dev-content/site/docs/v2/v2.json b/packages/lit-dev-content/site/docs/v2/v2.json
new file mode 100644
index 000000000..4a1be1b03
--- /dev/null
+++ b/packages/lit-dev-content/site/docs/v2/v2.json
@@ -0,0 +1,3 @@
+{
+  "collection": "docs-v2"
+}
diff --git a/packages/lit-dev-tests/known-good-urls.txt b/packages/lit-dev-tests/known-good-urls.txt
index 0f0746824..b6380fa76 100644
--- a/packages/lit-dev-tests/known-good-urls.txt
+++ b/packages/lit-dev-tests/known-good-urls.txt
@@ -496,3 +496,4 @@ https://github.com/webcomponents/template-shadowroot
 https://docs.astro.build/en/guides/integrations-guide/lit/
 https://rocket.modern-web.dev/
 https://stackblitz.com/edit/lit-ssr-global?file=src/server.js
+https://twitter.com/techytacos
diff --git a/packages/lit-dev-tests/src/playwright/unversioned.spec.ts b/packages/lit-dev-tests/src/playwright/unversioned.spec.ts
new file mode 100644
index 000000000..cc91d426d
--- /dev/null
+++ b/packages/lit-dev-tests/src/playwright/unversioned.spec.ts
@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {test, expect} from '@playwright/test';
+import {fileURLToPath} from 'url';
+import * as path from 'path';
+import {readFileSync} from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const REPO_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const CONTENT_PKG = path.resolve(REPO_ROOT, 'packages', 'lit-dev-content');
+const SITE_JSON = path.resolve(CONTENT_PKG, 'site', 'site.json');
+
+// Pull the latest version from our site.json data file.
+const SITE_LATEST_VERSION = (
+  JSON.parse(readFileSync(SITE_JSON, 'utf8')) as {latestVersion: string}
+).latestVersion;
+
+test.describe('Unversioned docs', () => {
+  test('match latest docs text content exactly', async ({browser}) => {
+    const unversionedPage = await browser.newPage({
+      viewport: {width: 1920, height: 1080},
+    });
+    const versionedPage = await browser.newPage({
+      viewport: {width: 1920, height: 1080},
+    });
+    await Promise.all([
+      unversionedPage.goto('/docs'),
+      versionedPage.goto(`/docs/${SITE_LATEST_VERSION}`),
+    ]);
+
+    const [unversionedTextContent, versionedTextContent] = await Promise.all([
+      unversionedPage.textContent('article'),
+      versionedPage.textContent('article'),
+    ]);
+
+    expect(unversionedTextContent).toEqual(versionedTextContent);
+  });
+
+  test('are referenced as the canonical doc from the versioned duplicate', async ({
+    browser,
+  }) => {
+    const unversionedPage = await browser.newPage({
+      viewport: {width: 1920, height: 1080},
+    });
+    const versionedPage = await browser.newPage({
+      viewport: {width: 1920, height: 1080},
+    });
+    await Promise.all([
+      unversionedPage.goto('/docs'),
+      versionedPage.goto(`/docs/${SITE_LATEST_VERSION}`),
+    ]);
+
+    const canonicalHref = await versionedPage
+      .locator('link[rel="canonical"]')
+      .getAttribute('href');
+    expect(canonicalHref).toEqual('https://lit.dev/docs/');
+
+    // unversioned page should not have a canonical link.
+    await expect(unversionedPage.locator('link[rel="canonical"]')).toHaveCount(
+      0
+    );
+  });
+
+  test('have cross-links to other unversioned docs', async ({browser}) => {
+    const unversionedPage = await browser.newPage({
+      viewport: {width: 1920, height: 1080},
+    });
+    await unversionedPage.goto('/docs');
+
+    const gettingStartedLocator = unversionedPage.locator('article#content a', {
+      hasText: 'Code organization',
+    });
+    await expect(gettingStartedLocator).toHaveAttribute(
+      'href',
+      '/docs/composition/overview/'
+    );
+  });
+
+  test('cross-link to correct api URL', async ({browser}) => {
+    const unversionedPage = await browser.newPage({
+      viewport: {width: 1920, height: 1080},
+    });
+    const versionedPage = await browser.newPage({
+      viewport: {width: 1920, height: 1080},
+    });
+    await Promise.all([
+      unversionedPage.goto('/docs/components/decorators/'),
+      versionedPage.goto(`/docs/${SITE_LATEST_VERSION}/components/decorators/`),
+    ]);
+
+    const versionedPropertyDecoratorLink = versionedPage.locator(
+      'article#content table a',
+      {
+        hasText: '@property',
+      }
+    );
+    const unversionedPropertyDecoratorLink = unversionedPage.locator(
+      'article#content table a',
+      {
+        hasText: '@property',
+      }
+    );
+    await expect(versionedPropertyDecoratorLink).toHaveAttribute(
+      'href',
+      `/docs/${SITE_LATEST_VERSION}/api/decorators#property`
+    );
+    await expect(unversionedPropertyDecoratorLink).toHaveAttribute(
+      'href',
+      `/docs/api/decorators#property`
+    );
+  });
+});
diff --git a/packages/lit-dev-tools-cjs/src/api-docs/configs/lit-2.ts b/packages/lit-dev-tools-cjs/src/api-docs/configs/lit-2.ts
index ba8366961..de5c22658 100644
--- a/packages/lit-dev-tools-cjs/src/api-docs/configs/lit-2.ts
+++ b/packages/lit-dev-tools-cjs/src/api-docs/configs/lit-2.ts
@@ -211,7 +211,7 @@ export const lit2Config: ApiDocsConfig = {
   },
 
   locationToUrl({page, anchor}) {
-    return `/docs/api/${page}/#${anchor}`;
+    return `/docs/v2/api/${page}/#${anchor}`;
   },
 
   fileToImportSpecifier(filename) {
diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/index-api.ts b/packages/lit-dev-tools-cjs/src/search/indexers/index-api.ts
index a831e92c9..f4ca1c9d1 100644
--- a/packages/lit-dev-tools-cjs/src/search/indexers/index-api.ts
+++ b/packages/lit-dev-tools-cjs/src/search/indexers/index-api.ts
@@ -10,7 +10,7 @@ export const indexApi = async (outputDir: string, idOffset = 0) => {
   // Root path of the starting point for indexing.
   const API_PATH = path.resolve(
     __dirname,
-    // Load the article content itself not the tags pages.
+    // Load the unversioned api content.
     `../../../../lit-dev-content/${outputDir}/docs/api`
   );
 
diff --git a/packages/lit-dev-tools-esm/src/build-unversioned-docs.ts b/packages/lit-dev-tools-esm/src/build-unversioned-docs.ts
new file mode 100644
index 000000000..9255b1d10
--- /dev/null
+++ b/packages/lit-dev-tools-esm/src/build-unversioned-docs.ts
@@ -0,0 +1,173 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {fileURLToPath} from 'url';
+import * as pathlib from 'path';
+import {readFileSync} from 'fs';
+import * as fs from 'fs/promises';
+
+const THIS_DIR = pathlib.dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = pathlib.resolve(THIS_DIR, '..', '..', '..');
+const CONTENT_PKG = pathlib.resolve(REPO_ROOT, 'packages', 'lit-dev-content');
+const SITE_JSON = pathlib.resolve(CONTENT_PKG, 'site', 'site.json');
+
+interface SiteJSON {
+  latestVersion: 'v1' | 'v2';
+}
+
+type EleventyFrontMatterData = string[];
+
+const SITE_LATEST_VERSION = (
+  JSON.parse(readFileSync(SITE_JSON, 'utf8')) as SiteJSON
+).latestVersion;
+const LATEST_VERSION_CONTENT = pathlib.resolve(
+  CONTENT_PKG,
+  'site',
+  'docs',
+  SITE_LATEST_VERSION
+);
+const UNVERSIONED_VERSION_LOCATION = pathlib.resolve(
+  CONTENT_PKG,
+  'site',
+  'docs',
+  'unversioned'
+);
+
+/**
+ * This script builds our unversioned latest documentation for lit.dev. It
+ * locates the current latestVersion of Lit to show from `site.json`, then
+ * copies that documentation from the versioned subdirectory into an unversioned
+ * subdirectory.
+ *
+ * The following transforms are then applied on the files:
+ *   - Permalink frontmatter is added to strip the version from the URL. E.g.,
+ *     /docs/v2/* becomes /docs/*.
+ *  - `api.html` has frontmatter transformed so base api paths become
+ *    unversioned.
+ *  - The latest version `v[N].json` file is renamed `unversioned.json` so it
+ *    matches the directory name which contains it.
+ */
+const buildAndTransformUnverionedDocs = async () => {
+  const walk = async (dirPath: string): Promise<void> => {
+    const entries = await fs.readdir(dirPath, {withFileTypes: true});
+    await Promise.all(
+      entries.map(async (entry) => {
+        const childPath = pathlib.join(dirPath, entry.name);
+        if (entry.isDirectory()) {
+          return walk(childPath);
+        } else {
+          return transformFile(childPath);
+        }
+      })
+    );
+  };
+
+  console.log('Starting build-unversioned-docs.js script');
+  await walk(LATEST_VERSION_CONTENT);
+  console.log('Completed build-unversioned-docs.js script');
+};
+
+/**
+ * Transform the given versioned content file and copy it to the unversioned
+ * directory.
+ */
+async function transformFile(path: string) {
+  const relativeChildPath = pathlib.relative(LATEST_VERSION_CONTENT, path);
+  const ext = pathlib.extname(relativeChildPath);
+  const relativeChildPathWithoutExt = relativeChildPath.slice(0, -ext.length);
+  const fileBasename = pathlib.basename(relativeChildPath, ext);
+
+  let fileContents = await fs.readFile(path, {encoding: 'utf8'});
+  let unversionedLocation = pathlib.join(
+    UNVERSIONED_VERSION_LOCATION,
+    relativeChildPath
+  );
+  switch (ext) {
+    case '.md':
+      const [frontMatterData, restOfFile] = getFrontMatterData(fileContents);
+      const hasExistingPermalink = frontMatterData.find((val) =>
+        val.includes('permalink:')
+      );
+      if (hasExistingPermalink) {
+        throw new Error(
+          `Unhandled case: Handle existing permalink in '${path}'`
+        );
+      }
+      if (fileBasename === 'index') {
+        frontMatterData.push(
+          `permalink: docs/${relativeChildPathWithoutExt}.html`
+        );
+      } else {
+        frontMatterData.push(
+          `permalink: docs/${relativeChildPathWithoutExt}/index.html`
+        );
+      }
+
+      fileContents = writeFrontMatter(frontMatterData) + restOfFile;
+      break;
+    case '.json':
+      // Only handle the latest version json file. E.g., `v[N].json` which needs
+      // to match its directory name. Therefore the latest json file will need
+      // to be renamed to `unversioned.json` as it is being moved to the
+      // `unversioned` subdirectory. All other json files will continue to match
+      // their directory name.
+      if (fileBasename === SITE_LATEST_VERSION) {
+        unversionedLocation = pathlib.join(
+          pathlib.dirname(unversionedLocation),
+          'unversioned.json'
+        );
+        fileContents = JSON.stringify({
+          collection: 'docs-unversioned',
+          latestVersion: SITE_LATEST_VERSION,
+        });
+      }
+      break;
+    case '.html':
+      // api.html is an html file containing only front matter data used to
+      // generate the API documentation. It contains the versioned api base
+      // paths. This transform makes the api base path unversioned.
+      if (fileBasename === 'api') {
+        const [frontMatterData] = getFrontMatterData(fileContents);
+        const transformedFrontMatter = frontMatterData.map((line) => {
+          return line.replace(`/${SITE_LATEST_VERSION}/`, '/');
+        });
+        fileContents = writeFrontMatter(transformedFrontMatter);
+      } else {
+        throw new Error(`Unhandled html document: '${path}'`);
+      }
+      break;
+    default:
+      throw new Error(`Unhandled extension '${ext}' for '${path}'`);
+  }
+
+  console.log(
+    `Writing: ${pathlib.relative(
+      CONTENT_PKG,
+      unversionedLocation
+    )} from ${pathlib.relative(CONTENT_PKG, path)}`
+  );
+  await fs.mkdir(pathlib.dirname(unversionedLocation), {recursive: true});
+  await fs.writeFile(unversionedLocation, fileContents);
+}
+
+/**
+ * Retrieve the 11ty frontmatter from our docs. This is not a full fledged YAML
+ * parser.
+ */
+function getFrontMatterData(
+  fileData: string
+): [EleventyFrontMatterData, string] {
+  const splitFile = fileData.split(/^---$/m);
+  const frontMatterData = splitFile[1].split('\n').slice(1, -1);
+  const restOfFile = splitFile.slice(2).join('---');
+  return [frontMatterData, restOfFile];
+}
+
+function writeFrontMatter(frontmatter: EleventyFrontMatterData): string {
+  return '---\n' + frontmatter.join('\n') + '\n---';
+}
+
+buildAndTransformUnverionedDocs();