diff --git a/documentation/docs/00-introduction.md b/documentation/docs/00-introduction.md
index 073e9183e8ef..bb43ddaee962 100644
--- a/documentation/docs/00-introduction.md
+++ b/documentation/docs/00-introduction.md
@@ -6,13 +6,13 @@ title: Introduction
 
 > SvelteKit is in early development, and some things may change before we hit version 1.0. This document is a work-in-progress. If you get stuck, reach out for help in the [Discord chatroom](https://svelte.dev/chat).
 >
-> See the [migration guides](/migrating) for help upgrading from Sapper.
+> See the [migration guides](/docs/migrating) for help upgrading from Sapper.
 
 ### What is SvelteKit?
 
 SvelteKit is a framework for building extremely high-performance web apps.
 
-Building an app with all the modern best practices is fiendishly complicated. Those practices include [build optimizations](https://vitejs.dev/guide/features.html#build-optimizations), so that you load only the minimal required code; [offline support](#service-workers); [prefetching](#anchor-options-sveltekit-prefetch) pages before the user initiates navigation; and [configurable rendering](#page-options) that allows you to generate HTML [on the server](#appendix-ssr) or [in the browser](#page-options-router) at runtime or [at build-time](#page-options-prerender). SvelteKit does all the boring stuff for you so that you can get on with the creative part.
+Building an app with all the modern best practices is fiendishly complicated. Those practices include [build optimizations](https://vitejs.dev/guide/features.html#build-optimizations), so that you load only the minimal required code; [offline support](/docs/service-workers); [prefetching](/docs/a-options#sveltekit-prefetch) pages before the user initiates navigation; and [configurable rendering](/docs/page-options) that allows you to generate HTML [on the server](/docs/appendix#ssr) or [in the browser](/docs/page-options#router) at runtime or [at build-time](/docs/page-options#prerender). SvelteKit does all the boring stuff for you so that you can get on with the creative part.
 
 It uses [Vite](https://vitejs.dev/) with a [Svelte plugin](https://github.com/sveltejs/vite-plugin-svelte) to provide a lightning-fast and feature-rich development experience with [Hot Module Replacement (HMR)](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#hot), where changes to your code are reflected in the browser instantly.
 
diff --git a/documentation/docs/01-routing.md b/documentation/docs/01-routing.md
index 7f462a039156..9ba9e5792e40 100644
--- a/documentation/docs/01-routing.md
+++ b/documentation/docs/01-routing.md
@@ -4,17 +4,17 @@ title: Routing
 
 At the heart of SvelteKit is a _filesystem-based router_. This means that the structure of your application is defined by the structure of your codebase — specifically, the contents of `src/routes`.
 
-> You can change this to a different directory by editing the [project config](#configuration).
+> You can change this to a different directory by editing the [project config](/docs/configuration).
 
 There are two types of route — **pages** and **endpoints**.
 
 Pages typically generate HTML to display to the user (as well as any CSS and JavaScript needed for the page). By default, pages are rendered on both the client and server, though this behaviour is configurable.
 
-Endpoints run only on the server (or when you build your site, if [prerendering](#page-options-prerender)). This means it's the place to do things like access databases or APIs that require private credentials or return data that lives on a machine in your production network. Pages can request data from endpoints. Endpoints return JSON by default, though may also return data in other formats.
+Endpoints run only on the server (or when you build your site, if [prerendering](/docs/page-options#prerender)). This means it's the place to do things like access databases or APIs that require private credentials or return data that lives on a machine in your production network. Pages can request data from endpoints. Endpoints return JSON by default, though may also return data in other formats.
 
 ### Pages
 
-Pages are Svelte components written in `.svelte` files (or any file with an extension listed in [`config.extensions`](#configuration)). By default, when a user first visits the application, they will be served a server-rendered version of the page in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel where the common portions in the layout do not need to be rerendered.
+Pages are Svelte components written in `.svelte` files (or any file with an extension listed in [`config.extensions`](/docs/configuration)). By default, when a user first visits the application, they will be served a server-rendered version of the page in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel where the common portions in the layout do not need to be rerendered.
 
 The filename determines the route. For example, `src/routes/index.svelte` is the root of your site:
 
@@ -78,7 +78,7 @@ interface Fallthrough {
 }
 ```
 
-> See the [TypeScript](#typescript) section for information on `App.Locals` and `App.Platform`.
+> See the [TypeScript](/docs/typescript) section for information on `App.Locals` and `App.Platform`.
 
 A page like `src/routes/items/[id].svelte` could get its data from `src/routes/items/[id].js`:
 
@@ -102,7 +102,7 @@ export async function get({ params }) {
 }
 ```
 
-> All server-side code, including endpoints, has access to `fetch` in case you need to request data from external APIs. Don't worry about the `$lib` import, we'll get to that [later](#modules-$lib).
+> All server-side code, including endpoints, has access to `fetch` in case you need to request data from external APIs. Don't worry about the `$lib` import, we'll get to that [later](/docs/modules#$lib).
 
 The job of this function is to return a `{ status, headers, body }` object representing the response, where `status` is an [HTTP status code](https://httpstatusdogs.com):
 
@@ -111,7 +111,7 @@ The job of this function is to return a `{ status, headers, body }` object repre
 - `4xx` — client error
 - `5xx` — server error
 
-> If `{fallthrough: true}` is returned SvelteKit will [fall through](#routing-advanced-routing-fallthrough-routes) to other routes until something responds, or will respond with a generic 404.
+> If `{fallthrough: true}` is returned SvelteKit will [fall through](/docs/routing#advanced-routing-fallthrough-routes) to other routes until something responds, or will respond with a generic 404.
 
 The returned `body` corresponds to the page's props:
 
@@ -223,7 +223,7 @@ return {
 
 #### HTTP method overrides
 
-HTML `<form>` elements only support `GET` and `POST` methods natively. You can allow other methods, like `PUT` and `DELETE`, by specifying them in your [configuration](#configuration-methodoverride) and adding a `_method=VERB` parameter (you can configure the name) to the form's `action`:
+HTML `<form>` elements only support `GET` and `POST` methods natively. You can allow other methods, like `PUT` and `DELETE`, by specifying them in your [configuration](/docs/configuration#methodoverride) and adding a `_method=VERB` parameter (you can configure the name) to the form's `action`:
 
 ```js
 // svelte.config.js
@@ -252,7 +252,7 @@ Most commonly, endpoints exist to provide data to the page with which they're pa
 
 ### Private modules
 
-Files and directories with a leading `_` or `.` (other than [`.well-known`](https://en.wikipedia.org/wiki/Well-known_URI)) are private by default, meaning that they do not create routes (but can be imported by files that do). You can configure which modules are considered public or private with the [`routes`](#configuration-routes) configuration.
+Files and directories with a leading `_` or `.` (other than [`.well-known`](https://en.wikipedia.org/wiki/Well-known_URI)) are private by default, meaning that they do not create routes (but can be imported by files that do). You can configure which modules are considered public or private with the [`routes`](/docs/configuration#routes) configuration.
 
 ### Advanced routing
 
@@ -288,6 +288,6 @@ src/routes/[qux].svelte
 src/routes/foo-[bar].svelte
 ```
 
-... and you navigate to `/foo-xyz`, then SvelteKit will first try `foo-[bar].svelte` because it is the best match. If that yields no response, SvelteKit will try other less specific yet still valid matches for `/foo-xyz`. Since endpoints have higher precedence than pages, the next attempt will be `[baz].js`. Then alphabetical order takes precedence and thus `[baz].svelte` will be tried before `[qux].svelte`. The first route that responds — a page that returns something from [`load`](#loading) or has no `load` function, or an endpoint that returns something — will handle the request.
+... and you navigate to `/foo-xyz`, then SvelteKit will first try `foo-[bar].svelte` because it is the best match. If that yields no response, SvelteKit will try other less specific yet still valid matches for `/foo-xyz`. Since endpoints have higher precedence than pages, the next attempt will be `[baz].js`. Then alphabetical order takes precedence and thus `[baz].svelte` will be tried before `[qux].svelte`. The first route that responds — a page that returns something from [`load`](/docs/loading) or has no `load` function, or an endpoint that returns something — will handle the request.
 
 If no page or endpoint responds to a request, SvelteKit will respond with a generic 404.
diff --git a/documentation/docs/02-layouts.md b/documentation/docs/02-layouts.md
index 9174dc651a9b..f661c6225527 100644
--- a/documentation/docs/02-layouts.md
+++ b/documentation/docs/02-layouts.md
@@ -70,7 +70,7 @@ Layout resets are otherwise identical to normal layout components.
 
 ### Error pages
 
-If a page fails to load (see [Loading](#loading)), SvelteKit will render an error page. You can customise this page by creating `__error.svelte` components alongside your layout and page components.
+If a page fails to load (see [Loading](/docs/loading)), SvelteKit will render an error page. You can customise this page by creating `__error.svelte` components alongside your layout and page components.
 
 For example, if `src/routes/settings/notifications/index.svelte` failed to load, SvelteKit would render `src/routes/settings/notifications/__error.svelte` in the same layout, if it existed. If not, it would render `src/routes/settings/__error.svelte` in the parent layout, or `src/routes/__error.svelte` in the root layout.
 
@@ -87,7 +87,7 @@ export interface ErrorLoadInput<Params extends Record<string, string> = Record<s
 }
 ```
 
-If an error component has a [`load`](#loading) function, it will be called with `error` and `status` properties:
+If an error component has a [`load`](/docs/loading) function, it will be called with `error` and `status` properties:
 
 ```html
 <script context="module">
@@ -108,6 +108,6 @@ If an error component has a [`load`](#loading) function, it will be called with
 <h1>{title}</h1>
 ```
 
-> Layout components also have access to `error` and `status` via the [page store](#modules-$app-stores)
+> Layout components also have access to `error` and `status` via the [page store](/docs/modules#$app-stores)
 >
 > Server-side stack traces will be removed from `error` in production, to avoid exposing privileged information to users.
diff --git a/documentation/docs/03-loading.md b/documentation/docs/03-loading.md
index 6eb0a978d501..70ac88f6ef8e 100644
--- a/documentation/docs/03-loading.md
+++ b/documentation/docs/03-loading.md
@@ -39,7 +39,7 @@ interface Fallthrough {
 }
 ```
 
-> See the [TypeScript](#typescript) section for information on `App.Session` and `App.Stuff`.
+> See the [TypeScript](/docs/typescript) section for information on `App.Session` and `App.Stuff`.
 
 A page that loads data from an external API might look like this:
 
@@ -64,7 +64,7 @@ A page that loads data from an external API might look like this:
 
 `load` is similar to `getStaticProps` or `getServerSideProps` in Next.js, except that it runs on both the server and the client. In the example above, if a user clicks on a link to this page the data will be fetched from `cms.example.com` without going via our server.
 
-If `load` returns `{fallthrough: true}`, SvelteKit will [fall through](#routing-advanced-routing-fallthrough-routes) to other routes until something responds, or will respond with a generic 404.
+If `load` returns `{fallthrough: true}`, SvelteKit will [fall through](/docs/routing#advanced-routing-fallthrough-routes) to other routes until something responds, or will respond with a generic 404.
 
 SvelteKit's `load` receives an implementation of `fetch`, which has the following special properties:
 
@@ -72,11 +72,11 @@ SvelteKit's `load` receives an implementation of `fetch`, which has the followin
 - it can make requests against the app's own endpoints without issuing an HTTP call
 - it makes a copy of the response when you use it, and then sends it embedded in the initial page load for hydration
 
-`load` only applies to [page](#routing-pages) and [layout](#layouts) components (not components they import), and runs on both the server and in the browser with the default rendering options.
+`load` only applies to [page](/docs/routing#pages) and [layout](/docs/layouts) components (not components they import), and runs on both the server and in the browser with the default rendering options.
 
 > Code called inside `load` blocks:
 >
-> - should use the SvelteKit-provided [`fetch`](#loading-input-fetch) wrapper rather than using the native `fetch`
+> - should use the SvelteKit-provided [`fetch`](/docs/loading#input-fetch) wrapper rather than using the native `fetch`
 > - should not reference `window`, `document`, or any browser-specific objects
 > - should not directly reference any API keys or secrets, which will be exposed to the client, but instead call an endpoint that uses any required secrets
 
@@ -94,7 +94,7 @@ The `load` function receives an object containing six fields — `url`, `params`
 
 `url` is an instance of [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL), containing properties like the `origin`, `hostname`, `pathname` and `searchParams`.
 
-> In some environments this is derived from request headers, which you [may need to configure](#configuration-headers), during server-side rendering
+> In some environments this is derived from request headers during server-side rendering. If you're using [adapter-node]/docs/adapters#supported-environments-node-js, for example, you may need to configure the adapter in order for the URL to be correct.
 
 #### params
 
@@ -123,7 +123,7 @@ If the page you're loading has an endpoint, the data returned from it is accessi
 
 #### session
 
-`session` can be used to pass data from the server related to the current request, e.g. the current user. By default it is `undefined`. See [`getSession`](#hooks-getsession) to learn how to use it.
+`session` can be used to pass data from the server related to the current request, e.g. the current user. By default it is `undefined`. See [`getSession`](/docs/hooks#getsession) to learn how to use it.
 
 #### stuff
 
@@ -161,4 +161,4 @@ If the `load` function returns a `props` object, the props will be passed to the
 
 This will be merged with any existing `stuff` and passed to the `load` functions of subsequent layout and page components.
 
-The combined `stuff` is available to components using the [page store](#modules-$app-stores) as `$page.stuff`, providing a mechanism for pages to pass data 'upward' to layouts.
+The combined `stuff` is available to components using the [page store](/docs/modules#$app-stores) as `$page.stuff`, providing a mechanism for pages to pass data 'upward' to layouts.
diff --git a/documentation/docs/04-hooks.md b/documentation/docs/04-hooks.md
index 46e704713462..af30e83ac071 100644
--- a/documentation/docs/04-hooks.md
+++ b/documentation/docs/04-hooks.md
@@ -4,11 +4,11 @@ title: Hooks
 
 An optional `src/hooks.js` (or `src/hooks.ts`, or `src/hooks/index.js`) file exports four functions, all optional, that run on the server — **handle**, **handleError**, **getSession**, and **externalFetch**.
 
-> The location of this file can be [configured](#configuration) as `config.kit.files.hooks`
+> The location of this file can be [configured](/docs/configuration) as `config.kit.files.hooks`
 
 ### handle
 
-This function runs every time SvelteKit receives a request — whether that happens while the app is running, or during [prerendering](#page-options-prerender) — and determines the response. It receives an `event` object representing the request and a function called `resolve`, which invokes SvelteKit's router and generates a response (rendering a page, or invoking an endpoint) accordingly. This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing endpoints programmatically, for example).
+This function runs every time SvelteKit receives a request — whether that happens while the app is running, or during [prerendering](/docs/page-options#prerender) — and determines the response. It receives an `event` object representing the request and a function called `resolve`, which invokes SvelteKit's router and generates a response (rendering a page, or invoking an endpoint) accordingly. This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing endpoints programmatically, for example).
 
 > Requests for static assets — which includes pages that were already prerendered — are _not_ handled by SvelteKit.
 
@@ -38,7 +38,7 @@ export interface Handle {
 }
 ```
 
-> See the [TypeScript](#typescript) section for information on `App.Locals` and `App.Platform`.
+> See the [TypeScript](/docs/typescript) section for information on `App.Locals` and `App.Platform`.
 
 To add custom data to the request, which is passed to endpoints, populate the `event.locals` object, as shown below.
 
@@ -54,7 +54,7 @@ export async function handle({ event, resolve }) {
 }
 ```
 
-You can add call multiple `handle` functions with [the `sequence` helper function](#modules-sveltejs-kit-hooks).
+You can add call multiple `handle` functions with [the `sequence` helper function](/docs/modules#sveltejs-kit-hooks).
 
 `resolve` also supports a second, optional parameter that gives you more control over how the response will be rendered. That parameter is an object that can have the following fields:
 
@@ -71,7 +71,7 @@ export async function handle({ event, resolve }) {
 }
 ```
 
-> Disabling [server-side rendering](#appendix-ssr) effectively turns your SvelteKit app into a [**single-page app** or SPA](#appendix-csr-and-spa). In most situations this is not recommended ([see appendix](#appendix-ssr)). Consider whether it's truly appropriate to disable it, and do so selectively rather than for all requests.
+> Disabling [server-side rendering](/docs/appendix#ssr) effectively turns your SvelteKit app into a [**single-page app** or SPA](/docs/appendix#csr-and-spa). In most situations this is not recommended ([see appendix](/docs/appendix#ssr)). Consider whether it's truly appropriate to disable it, and do so selectively rather than for all requests.
 
 ### handleError
 
@@ -99,7 +99,7 @@ export async function handleError({ error, event }) {
 
 ### getSession
 
-This function takes the `event` object and returns a `session` object that is [accessible on the client](#modules-$app-stores) and therefore must be safe to expose to users. It runs whenever SvelteKit server-renders a page.
+This function takes the `event` object and returns a `session` object that is [accessible on the client](/docs/modules#$app-stores) and therefore must be safe to expose to users. It runs whenever SvelteKit server-renders a page.
 
 If unimplemented, session is `{}`.
 
diff --git a/documentation/docs/05-modules.md b/documentation/docs/05-modules.md
index 37734412dd1f..14c90ab3ece7 100644
--- a/documentation/docs/05-modules.md
+++ b/documentation/docs/05-modules.md
@@ -10,11 +10,11 @@ SvelteKit makes a number of modules available to your application.
 import { amp, browser, dev, mode, prerendering } from '$app/env';
 ```
 
-- `amp` is `true` or `false` depending on the corresponding value in your [project configuration](#configuration)
+- `amp` is `true` or `false` depending on the corresponding value in your [project configuration](/docs/configuration)
 - `browser` is `true` or `false` depending on whether the app is running in the browser or on the server
 - `dev` is `true` in development mode, `false` in production
 - `mode` is the [Vite mode](https://vitejs.dev/guide/env-and-mode.html#modes), which is `development` in dev mode or `production` during build unless configured otherwise in `config.kit.vite.mode`.
-- `prerendering` is `true` when [prerendering](#page-options-prerender), `false` otherwise
+- `prerendering` is `true` when [prerendering](/docs/page-options#prerender), `false` otherwise
 
 ### $app/navigation
 
@@ -39,7 +39,7 @@ import {
   - `keepfocus` (boolean, default `false`) If `true`, the currently focused element will retain focus after navigation. Otherwise, focus will be reset to the body
   - `state` (object, default `{}`) The state of the new/updated history entry
 - `invalidate(href)` causes any `load` functions belonging to the currently active page to re-run if they `fetch` the resource in question. It returns a `Promise` that resolves when the page is subsequently updated.
-- `prefetch(href)` programmatically prefetches the given page, which means a) ensuring that the code for the page is loaded, and b) calling the page's `load` function with the appropriate options. This is the same behaviour that SvelteKit triggers when the user taps or mouses over an `<a>` element with [sveltekit:prefetch](#anchor-options-sveltekit-prefetch). If the next navigation is to `href`, the values returned from `load` will be used, making navigation instantaneous. Returns a `Promise` that resolves when the prefetch is complete.
+- `prefetch(href)` programmatically prefetches the given page, which means a) ensuring that the code for the page is loaded, and b) calling the page's `load` function with the appropriate options. This is the same behaviour that SvelteKit triggers when the user taps or mouses over an `<a>` element with [sveltekit:prefetch](/docs/a-options#sveltekit-prefetch). If the next navigation is to `href`, the values returned from `load` will be used, making navigation instantaneous. Returns a `Promise` that resolves when the prefetch is complete.
 - `prefetchRoutes(routes)` — programmatically prefetches the code for routes that haven't yet been fetched. Typically, you might call this to speed up subsequent navigation. If no argument is given, all routes will be fetched; otherwise, you can specify routes by any matching pathname such as `/about` (to match `src/routes/about.svelte`) or `/blog/*` (to match `src/routes/blog/[slug].svelte`). Unlike `prefetch`, this won't call `load` for individual pages. Returns a `Promise` that resolves when the routes have been prefetched.
 
 ### $app/paths
@@ -48,10 +48,10 @@ import {
 import { base, assets } from '$app/paths';
 ```
 
-- `base` — a root-relative (i.e. begins with a `/`) string that matches [`config.kit.paths.base`](#configuration-paths), or the empty string if unspecified
-- `assets` — an absolute URL that matches [`config.kit.paths.assets`](#configuration-paths), if specified, otherwise equal to `base`
+- `base` — a root-relative (i.e. begins with a `/`) string that matches [`config.kit.paths.base`](/docs/configuration#paths), or the empty string if unspecified
+- `assets` — an absolute URL that matches [`config.kit.paths.assets`](/docs/configuration#paths), if specified, otherwise equal to `base`
 
-> If a value for `config.kit.paths.assets` is specified, it will be replaced with `'/_svelte_kit_assets'` during [`svelte-kit dev`](#command-line-interface-svelte-kit-dev) or [`svelte-kit preview`](#command-line-interface-svelte-kit-preview), since the assets don't yet live at their eventual URL.
+> If a value for `config.kit.paths.assets` is specified, it will be replaced with `'/_svelte_kit_assets'` during [`svelte-kit dev`](/docs/cli#svelte-kit-dev) or [`svelte-kit preview`](/docs/cli#svelte-kit-preview), since the assets don't yet live at their eventual URL.
 
 ### $app/stores
 
@@ -68,9 +68,9 @@ Because of that, the stores are not free-floating objects: they must be accessed
 The stores themselves attach to the correct context at the point of subscription, which means you can import and use them directly in components without boilerplate. However, it still needs to be called synchronously on component or page initialisation when the `$`-prefix isn't used. Use `getStores` to safely `.subscribe` asynchronously instead.
 
 - `navigating` is a [readable store](https://svelte.dev/tutorial/readable-stores). When navigating starts, its value is `{ from, to }`, where `from` and `to` are both [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) instances. When navigating finishes, its value reverts to `null`.
-- `page` contains an object with the current [`url`](https://developer.mozilla.org/en-US/docs/Web/API/URL), [`params`](#loading-input-params), [`stuff`](#loading-output-stuff), [`status`](#loading-output-status) and [`error`](#loading-output-error).
-- `session` is a [writable store](https://svelte.dev/tutorial/writable-stores) whose initial value is whatever was returned from [`getSession`](#hooks-getsession). It can be written to, but this will _not_ cause changes to persist on the server — this is something you must implement yourself.
-- `updated` is a [readable store](https://svelte.dev/tutorial/readable-stores) whose initial value is false. If [`version.pollInterval`](#configuration-version) is a non-zero value, SvelteKit will poll for new versions of the app and update the store value to `true` when it detects one. `updated.check()` will force an immediate check, regardless of polling.
+- `page` contains an object with the current [`url`](https://developer.mozilla.org/en-US/docs/Web/API/URL), [`params`](/docs/loading#input-params), [`stuff`](/docs/loading#output-stuff), [`status`](/docs/loading#output-status) and [`error`](/docs/loading#output-error).
+- `session` is a [writable store](https://svelte.dev/tutorial/writable-stores) whose initial value is whatever was returned from [`getSession`](/docs/hooks#getsession). It can be written to, but this will _not_ cause changes to persist on the server — this is something you must implement yourself.
+- `updated` is a [readable store](https://svelte.dev/tutorial/readable-stores) whose initial value is false. If [`version.pollInterval`](/docs/configuration#version) is a non-zero value, SvelteKit will poll for new versions of the app and update the store value to `true` when it detects one. `updated.check()` will force an immediate check, regardless of polling.
 
 ### $lib
 
@@ -78,14 +78,14 @@ This is a simple alias to `src/lib`, or whatever directory is specified as [`con
 
 ### $service-worker
 
-This module is only available to [service workers](#service-workers).
+This module is only available to [service workers](/docs/service-workers).
 
 ```js
 import { build, files, timestamp } from '$service-worker';
 ```
 
 - `build` is an array of URL strings representing the files generated by Vite, suitable for caching with `cache.addAll(build)`
-- `files` is an array of URL strings representing the files in your `static` directory, or whatever directory is specified by [`config.kit.files.assets`](#configuration). You can customize which files are included from `static` directory using [`config.kit.serviceWorker.files`](#configuration)
+- `files` is an array of URL strings representing the files in your `static` directory, or whatever directory is specified by [`config.kit.files.assets`](/docs/configuration). You can customize which files are included from `static` directory using [`config.kit.serviceWorker.files`](/docs/configuration)
 - `timestamp` is the result of calling `Date.now()` at build time. It's useful for generating unique cache names inside your service worker, so that a later deployment of your app can invalidate old caches
 
 ### @sveltejs/kit/hooks
diff --git a/documentation/docs/06-service-workers.md b/documentation/docs/06-service-workers.md
index b0eb335458bf..539a46f57d80 100644
--- a/documentation/docs/06-service-workers.md
+++ b/documentation/docs/06-service-workers.md
@@ -6,8 +6,8 @@ Service workers act as proxy servers that handle network requests inside your ap
 
 In SvelteKit, if you have a `src/service-worker.js` file (or `src/service-worker.ts`, or `src/service-worker/index.js`, etc) it will be built with Vite and automatically registered. You can disable automatic registration if you need to register the service worker with your own logic (e.g. prompt user for update, configure periodic updates, use `workbox`, etc).
 
-> You can change the location of your service worker and disable automatic registration in your [project configuration](#configuration-files).
+> You can change the location of your service worker and disable automatic registration in your [project configuration](/docs/configuration#files).
 
-Inside the service worker you have access to the [`$service-worker` module](#modules-$service-worker).
+Inside the service worker you have access to the [`$service-worker` module](/docs/modules#$service-worker).
 
-Because it needs to be bundled (since browsers don't yet support `import` in this context), and depends on the client-side app's build manifest, **service workers only work in the production build, not in development**. To test it locally, use [`svelte-kit preview`](#command-line-interface-svelte-kit-preview).
+Because it needs to be bundled (since browsers don't yet support `import` in this context), and depends on the client-side app's build manifest, **service workers only work in the production build, not in development**. To test it locally, use [`svelte-kit preview`](/docs/cli#svelte-kit-preview).
diff --git a/documentation/docs/07-a-options.md b/documentation/docs/07-a-options.md
index 09674c14ffac..b81d5afc7daf 100644
--- a/documentation/docs/07-a-options.md
+++ b/documentation/docs/07-a-options.md
@@ -16,7 +16,7 @@ We can mitigate that by _prefetching_ the data. Adding a `sveltekit:prefetch` at
 
 ...will cause SvelteKit to run the page's `load` function as soon as the user hovers over the link (on a desktop) or touches it (on mobile), rather than waiting for the `click` event to trigger navigation. Typically, this buys us an extra couple of hundred milliseconds, which is the difference between a user interface that feels laggy, and one that feels snappy.
 
-Note that prefetching will not work if the [`router`](#page-options-router) setting is `false`.
+Note that prefetching will not work if the [`router`](/docs/page-options#router) setting is `false`.
 
 You can also programmatically invoke `prefetch` from `$app/navigation`.
 
diff --git a/documentation/docs/09-amp.md b/documentation/docs/09-amp.md
index 9feae9cada1a..b3f6d4673c94 100644
--- a/documentation/docs/09-amp.md
+++ b/documentation/docs/09-amp.md
@@ -2,7 +2,7 @@
 title: AMP
 ---
 
-An unfortunate reality of modern web development is that it is sometimes necessary to create an [AMP](https://amp.dev/) version of your site. In SvelteKit this can be done by setting the [`amp`](#configuration-amp) config option, which has the following effects:
+An unfortunate reality of modern web development is that it is sometimes necessary to create an [AMP](https://amp.dev/) version of your site. In SvelteKit this can be done by setting the [`amp`](/docs/configuration#amp) config option, which has the following effects:
 
 - Client-side JavaScript, including the router, is disabled
 - Styles are concatenated into `<style amp-custom>`, and the [AMP boilerplate](https://amp.dev/boilerplate/) is injected
diff --git a/documentation/docs/10-adapters.md b/documentation/docs/10-adapters.md
index b54832970d92..4e3d69ceed9f 100644
--- a/documentation/docs/10-adapters.md
+++ b/documentation/docs/10-adapters.md
@@ -4,7 +4,7 @@ title: Adapters
 
 Before you can deploy your SvelteKit app, you need to _adapt_ it for your deployment target. Adapters are small plugins that take the built app as input and generate output for deployment.
 
-By default, projects are configured to use `@sveltejs/adapter-auto`, which detects your production environment and selects the appropriate adapter where possible. If your platform isn't (yet) supported, you may need to [install a custom adapter](#adapters-community-adapters) or [write one](#adapters-writing-custom-adapters).
+By default, projects are configured to use `@sveltejs/adapter-auto`, which detects your production environment and selects the appropriate adapter where possible. If your platform isn't (yet) supported, you may need to [install a custom adapter](/docs/adapters#community-adapters) or [write one](/docs/adapters#writing-custom-adapters).
 
 > See the [adapter-auto README](https://github.com/sveltejs/kit/tree/master/packages/adapter-auto) for information on adding support for new environments.
 
@@ -28,7 +28,7 @@ To create a simple Node server, install the `@sveltejs/adapter-node@next` packag
 +import adapter from '@sveltejs/adapter-node';
 ```
 
-With this, [svelte-kit build](#command-line-interface-svelte-kit-build) will generate a self-contained Node app inside the `build` directory. You can pass options to adapters, such as customising the output directory:
+With this, [svelte-kit build](/docs/cli#svelte-kit-build) will generate a self-contained Node app inside the `build` directory. You can pass options to adapters, such as customising the output directory:
 
 ```diff
 // svelte.config.js
@@ -44,7 +44,7 @@ export default {
 
 #### Static sites
 
-Most adapters will generate static HTML for any [prerenderable](#page-options-prerender) pages of your site. In some cases, your entire app might be prerenderable, in which case you can use `@sveltejs/adapter-static@next` to generate static HTML for _all_ your pages. A fully static site can be hosted on a wide variety of platforms, including static hosts like [GitHub Pages](https://pages.github.com/).
+Most adapters will generate static HTML for any [prerenderable](/docs/page-options#prerender) pages of your site. In some cases, your entire app might be prerenderable, in which case you can use `@sveltejs/adapter-static@next` to generate static HTML for _all_ your pages. A fully static site can be hosted on a wide variety of platforms, including static hosts like [GitHub Pages](https://pages.github.com/).
 
 ```diff
 // svelte.config.js
@@ -56,7 +56,7 @@ You can also use `adapter-static` to generate single-page apps (SPAs) by specify
 
 #### Platform-specific context
 
-Some adapters may have access to additional information about the request. For example, Cloudflare Workers can access an `env` object containing KV namespaces etc. This can be passed to the `RequestEvent` used in [hooks](#hooks) and [endpoints](#routing-endpoints) as the `platform` property — consult each adapter's documentation to learn more.
+Some adapters may have access to additional information about the request. For example, Cloudflare Workers can access an `env` object containing KV namespaces etc. This can be passed to the `RequestEvent` used in [hooks](/docs/hooks) and [endpoints](/docs/routing#endpoints) as the `platform` property — consult each adapter's documentation to learn more.
 
 ### Community adapters
 
diff --git a/documentation/docs/11-page-options.md b/documentation/docs/11-page-options.md
index 3beeea49c76e..1afa02d3adbe 100644
--- a/documentation/docs/11-page-options.md
+++ b/documentation/docs/11-page-options.md
@@ -2,17 +2,17 @@
 title: Page options
 ---
 
-By default, SvelteKit will render any component first on the server and send it to the client as HTML. It will then render the component again in the browser to make it interactive in a process called **hydration**. For this reason, you need to ensure that components can run in both places. SvelteKit will then initialise a [**router**](#routing) that takes over subsequent navigations.
+By default, SvelteKit will render any component first on the server and send it to the client as HTML. It will then render the component again in the browser to make it interactive in a process called **hydration**. For this reason, you need to ensure that components can run in both places. SvelteKit will then initialise a [**router**](/docs/routing) that takes over subsequent navigations.
 
-You can control each of these on a per-app or per-page basis. Note that each of the per-page settings use [`context="module"`](https://svelte.dev/docs#component-format-script-context-module), and only apply to page components, _not_ [layout](#layouts) components.
+You can control each of these on a per-app or per-page basis. Note that each of the per-page settings use [`context="module"`](https://svelte.dev/docs#component-format-script-context-module), and only apply to page components, _not_ [layout](/docs/layouts) components.
 
 If both are specified, per-page settings override per-app settings in case of conflicts.
 
 ### router
 
-SvelteKit includes a [client-side router](#appendix-routing) that intercepts navigations (from the user clicking on links, or interacting with the back/forward buttons) and updates the page contents, rather than letting the browser handle the navigation by reloading.
+SvelteKit includes a [client-side router](/docs/appendix#routing) that intercepts navigations (from the user clicking on links, or interacting with the back/forward buttons) and updates the page contents, rather than letting the browser handle the navigation by reloading.
 
-In certain circumstances you might need to disable [client-side routing](#appendix-routing) with the app-wide [`browser.router` config option](#configuration-browser) or the page-level `router` export:
+In certain circumstances you might need to disable [client-side routing](/docs/appendix#routing) with the app-wide [`browser.router` config option](/docs/configuration#browser) or the page-level `router` export:
 
 ```html
 <script context="module">
@@ -24,7 +24,7 @@ Note that this will disable client-side routing for any navigation from this pag
 
 ### hydrate
 
-Ordinarily, SvelteKit [hydrates](#appendix-hydration) your server-rendered HTML into an interactive page. Some pages don't require JavaScript at all — many blog posts and 'about' pages fall into this category. In these cases you can skip hydration when the app boots up with the app-wide [`browser.hydrate` config option](#configuration-browser) or the page-level `hydrate` export:
+Ordinarily, SvelteKit [hydrates](/docs/appendix#hydration) your server-rendered HTML into an interactive page. Some pages don't require JavaScript at all — many blog posts and 'about' pages fall into this category. In these cases you can skip hydration when the app boots up with the app-wide [`browser.hydrate` config option](/docs/configuration#browser) or the page-level `hydrate` export:
 
 ```html
 <script context="module">
@@ -32,11 +32,11 @@ Ordinarily, SvelteKit [hydrates](#appendix-hydration) your server-rendered HTML
 </script>
 ```
 
-> If `hydrate` and `router` are both `false`, SvelteKit will not add any JavaScript to the page at all. If [server-side rendering](#hooks-handle) is disabled in `handle`, `hydrate` must be `true` or no content will be rendered.
+> If `hydrate` and `router` are both `false`, SvelteKit will not add any JavaScript to the page at all. If [server-side rendering](/docs/hooks#handle) is disabled in `handle`, `hydrate` must be `true` or no content will be rendered.
 
 ### prerender
 
-It's likely that at least some pages of your app can be represented as a simple HTML file generated at build time. These pages can be [_prerendered_](#appendix-prerendering) by your [adapter](#adapters).
+It's likely that at least some pages of your app can be represented as a simple HTML file generated at build time. These pages can be [_prerendered_](/docs/appendix#prerendering) by your [adapter](/docs/adapters).
 
 If your entire app is suitable for prerendering, you could use [`adapter-static`](https://github.com/sveltejs/kit/tree/master/packages/adapter-static), which will generate HTML files for every page, plus additional files that are requested by `load` functions in those pages.
 
@@ -48,7 +48,7 @@ In many cases, you'll only want to prerender specific pages in your app. You'll
 </script>
 ```
 
-The prerenderer will start at the root of your app and generate HTML for any prerenderable pages it finds. Each page is scanned for `<a>` elements that point to other pages that are candidates for prerendering — because of this, you generally don't need to specify which pages should be accessed. If you _do_ need to specify which pages should be accessed by the prerenderer, you can do so with the `entries` option in the [prerender configuration](#configuration-prerender).
+The prerenderer will start at the root of your app and generate HTML for any prerenderable pages it finds. Each page is scanned for `<a>` elements that point to other pages that are candidates for prerendering — because of this, you generally don't need to specify which pages should be accessed. If you _do_ need to specify which pages should be accessed by the prerenderer, you can do so with the `entries` option in the [prerender configuration](/docs/configuration#prerender).
 
 #### When not to prerender
 
@@ -58,7 +58,7 @@ The basic rule is this: for a page to be prerenderable, any two users hitting it
 
 Note that you can still prerender pages that load data based on the page's parameters, like our `src/routes/blog/[slug].svelte` example from earlier. The prerenderer will intercept requests made inside `load`, so the data served from `src/routes/blog/[slug].json.js` will also be captured.
 
-Accessing [`url.searchParams`](#loading-input-url) during prerendering is forbidden. If you need to use it, ensure you are only doing so in the browser (for example in `onMount`).
+Accessing [`url.searchParams`](/docs/loading#input-url) during prerendering is forbidden. If you need to use it, ensure you are only doing so in the browser (for example in `onMount`).
 
 #### Route conflicts
 
diff --git a/documentation/docs/12-packaging.md b/documentation/docs/12-packaging.md
index 359da3e63b4b..4db493180c5e 100644
--- a/documentation/docs/12-packaging.md
+++ b/documentation/docs/12-packaging.md
@@ -4,17 +4,17 @@ title: Packaging
 
 You can use SvelteKit to build component libraries as well as apps.
 
-When you're creating an app, the contents of `src/routes` is the public-facing stuff; [`src/lib`](#modules-$lib) contains your app's internal library.
+When you're creating an app, the contents of `src/routes` is the public-facing stuff; [`src/lib`](/docs/modules#$lib) contains your app's internal library.
 
 A SvelteKit component library has the exact same structure as a SvelteKit app, except that `src/lib` is the public-facing bit. `src/routes` might be a documentation or demo site that accompanies the library, or it might just be a sandbox you use during development.
 
-Running `svelte-kit package` will take the contents of `src/lib` and generate a `package` directory (which can be [configured](#configuration-package)) containing the following:
+Running `svelte-kit package` will take the contents of `src/lib` and generate a `package` directory (which can be [configured](/docs/configuration#package)) containing the following:
 
-- All the files in `src/lib`, unless you [configure](#configuration-package) custom `include`/`exclude` options. Svelte components will be preprocessed, TypeScript files will be transpiled to JavaScript.
-- Type definitions (`d.ts` files) which are generated for Svelte, JavaScript and TypeScript files. You need to install `typescript >= 4.0.0` and `svelte2tsx >= 0.4.1` for this. Type definitions are placed next to their implementation, hand-written `d.ts` files are copied over as is. You can [disable generation](#configuration-package), but we strongly recommend against it.
+- All the files in `src/lib`, unless you [configure](/docs/configuration#package) custom `include`/`exclude` options. Svelte components will be preprocessed, TypeScript files will be transpiled to JavaScript.
+- Type definitions (`d.ts` files) which are generated for Svelte, JavaScript and TypeScript files. You need to install `typescript >= 4.0.0` and `svelte2tsx >= 0.4.1` for this. Type definitions are placed next to their implementation, hand-written `d.ts` files are copied over as is. You can [disable generation](/docs/configuration#package), but we strongly recommend against it.
 - A `package.json` copied from the project root with all fields but the `"scripts"` field. The `"dependencies"` field is included, which means you should add packages that you only need for your documentation or demo site to `"devDependencies"`. A `"type": "module"` and an `"exports"` field will be added if it's not defined in the original file.
 
-The `"exports"` field contains the package's entry points. By default, all files in `src/lib` will be treated as an entry point unless they start with (or live in a directory that starts with) an underscore, but you can [configure](#configuration-package) this behaviour. If you have a `src/lib/index.js` or `src/lib/index.svelte` file, it will be treated as the package root.
+The `"exports"` field contains the package's entry points. By default, all files in `src/lib` will be treated as an entry point unless they start with (or live in a directory that starts with) an underscore, but you can [configure](/docs/configuration#package) this behaviour. If you have a `src/lib/index.js` or `src/lib/index.svelte` file, it will be treated as the package root.
 
 For example, if you had a `src/lib/Foo.svelte` component and a `src/lib/index.js` module that re-exported it, a consumer of your library could do either of the following:
 
@@ -34,7 +34,7 @@ To publish the generated package:
 npm publish ./package
 ```
 
-The `./package` above is referring to the directory name generated, change accordingly if you configure a custom [`package.dir`](#configuration-package).
+The `./package` above is referring to the directory name generated, change accordingly if you configure a custom [`package.dir`](/docs/configuration#package).
 
 ### Caveats
 
diff --git a/documentation/docs/13-cli.md b/documentation/docs/13-cli.md
index b887d174f56d..98429f73f1f3 100644
--- a/documentation/docs/13-cli.md
+++ b/documentation/docs/13-cli.md
@@ -21,15 +21,15 @@ Starts a development server. It accepts the following options:
 
 ### svelte-kit build
 
-Builds a production version of your app, and runs your adapter if you have one specified in your [config](#configuration). It accepts the following option:
+Builds a production version of your app, and runs your adapter if you have one specified in your [config](/docs/configuration). It accepts the following option:
 
 - `--verbose` — log more detail
 
-After building the app, you can reference the documentation of your chosen [adapter](#adapters) and hosting platform for specific instructions on how to serve your app.
+After building the app, you can reference the documentation of your chosen [adapter](/docs/adapters) and hosting platform for specific instructions on how to serve your app.
 
 ### svelte-kit preview
 
-After you've built your app with `svelte-kit build`, you can start the production version (irrespective of any adapter that has been applied) locally with `svelte-kit preview`. This is intended for testing the production build locally, **not for serving your app**, for which you should always use an [adapter](#adapters).
+After you've built your app with `svelte-kit build`, you can start the production version (irrespective of any adapter that has been applied) locally with `svelte-kit preview`. This is intended for testing the production build locally, **not for serving your app**, for which you should always use an [adapter](/docs/adapters).
 
 Like `svelte-kit dev`, it accepts the following options:
 
@@ -40,4 +40,4 @@ Like `svelte-kit dev`, it accepts the following options:
 
 ### svelte-kit package
 
-For package authors, see [packaging](#packaging).
+For package authors, see [packaging](/docs/packaging).
diff --git a/documentation/docs/14-configuration.md b/documentation/docs/14-configuration.md
index 4034286a72d8..a29dac8c9a63 100644
--- a/documentation/docs/14-configuration.md
+++ b/documentation/docs/14-configuration.md
@@ -86,11 +86,11 @@ export default config;
 
 ### adapter
 
-Required when running `svelte-kit build` and determines how the output is converted for different platforms. See [Adapters](#adapters).
+Required when running `svelte-kit build` and determines how the output is converted for different platforms. See [Adapters](/docs/adapters).
 
 ### amp
 
-Enable [AMP](#amp) mode.
+Enable [AMP](/docs/amp) mode.
 
 ### appDir
 
@@ -100,8 +100,8 @@ The directory relative to `paths.assets` where the built JS and CSS (and importe
 
 An object containing zero or more of the following `boolean` values:
 
-- `hydrate` — whether to [hydrate](#page-options-hydrate) the server-rendered HTML with a client-side app. (It's rare that you would set this to `false` on an app-wide basis.)
-- `router` — enables or disables the client-side [router](#page-options-router) app-wide.
+- `hydrate` — whether to [hydrate](/docs/page-options#hydrate) the server-rendered HTML with a client-side app. (It's rare that you would set this to `false` on an app-wide basis.)
+- `router` — enables or disables the client-side [router](/docs/page-options#router) app-wide.
 
 ### csp
 
@@ -131,10 +131,10 @@ When pages are prerendered, the CSP header is added via a `<meta http-equiv>` ta
 An object containing zero or more of the following `string` values:
 
 - `assets` — a place to put static files that should have stable URLs and undergo no processing, such as `favicon.ico` or `manifest.json`
-- `hooks` — the location of your hooks module (see [Hooks](#hooks))
+- `hooks` — the location of your hooks module (see [Hooks](/docs/hooks))
 - `lib` — your app's internal library, accessible throughout the codebase as `$lib`
-- `routes` — the files that define the structure of your app (see [Routing](#routing))
-- `serviceWorker` — the location of your service worker's entry point (see [Service workers](#service-workers))
+- `routes` — the files that define the structure of your app (see [Routing](/docs/routing))
+- `serviceWorker` — the location of your service worker's entry point (see [Service workers](/docs/service-workers))
 - `template` — the location of the template for HTML responses
 
 ### floc
@@ -157,14 +157,14 @@ Inline CSS inside a `<style>` block at the head of the HTML. This option is a nu
 
 ### methodOverride
 
-See [HTTP Method Overrides](#routing-endpoints-http-method-overrides). An object containing zero or more of the following:
+See [HTTP Method Overrides](/docs/routing#endpoints-http-method-overrides). An object containing zero or more of the following:
 
 - `parameter` — query parameter name to use for passing the intended method value
 - `allowed` - array of HTTP methods that can be used when overriding the original request method
 
 ### package
 
-Options related to [creating a package](#packaging).
+Options related to [creating a package](/docs/packaging).
 
 - `dir` - output directory
 - `emitTypes` - by default, `svelte-kit package` will automatically generate types for your package in the form of `.d.ts` files. While generating types is configurable, we believe it is best for the ecosystem quality to generate types, always. Please make sure you have a good reason when setting it to `false` (for example when you want to provide handwritten type definitions instead)
@@ -199,7 +199,7 @@ An object containing zero or more of the following `string` values:
 
 ### prerender
 
-See [Prerendering](#page-options-prerender). An object containing zero or more of the following:
+See [Prerendering](/docs/page-options#prerender). An object containing zero or more of the following:
 
 - `concurrency` — how many pages can be prerendered simultaneously. JS is single-threaded, but in cases where prerendering performance is network-bound (for example loading content from a remote CMS) this can speed things up by processing other tasks while waiting on the network response
 - `crawl` — determines whether SvelteKit should find pages to prerender by following links from the seed page(s)
@@ -232,7 +232,7 @@ See [Prerendering](#page-options-prerender). An object containing zero or more o
 
 ### routes
 
-A `(filepath: string) => boolean` function that determines which files create routes and which are treated as [private modules](#routing-private-modules).
+A `(filepath: string) => boolean` function that determines which files create routes and which are treated as [private modules](/docs/routing#private-modules).
 
 ### serviceWorker
 
@@ -249,7 +249,7 @@ Whether to remove, append, or ignore trailing slashes when resolving URLs to rou
 - `"always"` — redirect `/x` to `/x/`
 - `"ignore"` — don't automatically add or remove trailing slashes. `/x` and `/x/` will be treated equivalently
 
-> Ignoring trailing slashes is not recommended — the semantics of relative paths differ between the two cases (`./y` from `/x` is `/y`, but from `/x/` is `/x/y`), and `/x` and `/x/` are treated as separate URLs which is harmful to SEO. If you use this option, ensure that you implement logic for conditionally adding or removing trailing slashes from `request.path` inside your [`handle`](#hooks-handle) function.
+> Ignoring trailing slashes is not recommended — the semantics of relative paths differ between the two cases (`./y` from `/x` is `/y`, but from `/x/` is `/x/y`), and `/x` and `/x/` are treated as separate URLs which is harmful to SEO. If you use this option, ensure that you implement logic for conditionally adding or removing trailing slashes from `request.path` inside your [`handle`](/docs/hooks#handle) function.
 
 ### version
 
@@ -260,7 +260,7 @@ An object containing zero or more of the following values:
 
 Client-side navigation can be buggy if you deploy a new version of your app while people are using it. If the code for the new page is already loaded, it may have stale content; if it isn't, the app's route manifest may point to a JavaScript file that no longer exists. SvelteKit solves this problem by falling back to traditional full-page navigation if it detects that a new version has been deployed, using the `name` specified here (which defaults to a timestamp of the build).
 
-If you set `pollInterval` to a non-zero value, SvelteKit will poll for new versions in the background and set the value of the [`updated`](#modules-$app-stores) store to `true` when it detects one.
+If you set `pollInterval` to a non-zero value, SvelteKit will poll for new versions in the background and set the value of the [`updated`](/docs/modules#$app-stores) store to `true` when it detects one.
 
 ### vite
 
diff --git a/documentation/docs/15-typescript.md b/documentation/docs/15-typescript.md
index 68585c539096..01cb25af7bb1 100644
--- a/documentation/docs/15-typescript.md
+++ b/documentation/docs/15-typescript.md
@@ -22,16 +22,16 @@ By populating these interfaces, you will gain type safety when using `event.loca
 
 ### App.Locals
 
-The interface that defines `event.locals`, which can be accessed in [hooks](#hooks) (`handle`, `handleError` and `getSession`) and [endpoints](#routing-endpoints).
+The interface that defines `event.locals`, which can be accessed in [hooks](/docs/hooks) (`handle`, `handleError` and `getSession`) and [endpoints](/docs/routing#endpoints).
 
 ### App.Platform
 
-If your adapter provides [platform-specific context](#adapters-supported-environments-platform-specific-context) via `event.platform`, you can specify it here.
+If your adapter provides [platform-specific context](/docs/adapters#supported-environments-platform-specific-context) via `event.platform`, you can specify it here.
 
 ### App.Session
 
-The interface that defines `session`, both as an argument to [`load`](#loading) functions and the value of the [session store](#modules-$app-stores).
+The interface that defines `session`, both as an argument to [`load`](/docs/loading) functions and the value of the [session store](/docs/modules#$app-stores).
 
 ### App.Stuff
 
-The interface that defines `stuff`, as input or output to [`load`](#loading) or as the value of the `stuff` property of the [page store](#modules-$app-stores).
+The interface that defines `stuff`, as input or output to [`load`](/docs/loading) or as the value of the `stuff` property of the [page store](/docs/modules#$app-stores).
diff --git a/documentation/docs/80-migrating.md b/documentation/docs/80-migrating.md
new file mode 100644
index 000000000000..f779cf798254
--- /dev/null
+++ b/documentation/docs/80-migrating.md
@@ -0,0 +1,177 @@
+---
+title: Migrating from Sapper
+---
+
+SvelteKit is the successor to Sapper and shares many elements of its design.
+
+If you have an existing Sapper app that you plan to migrate to SvelteKit, there are a number of changes you will need to make. You may find it helpful to view [some examples](https://kit.svelte.dev/docs#additional-resources-examples) while migrating.
+
+### package.json
+
+#### type: "module"
+
+Add `"type": "module"` to your `package.json`. You can do this step separately from the rest as part of an incremental migration if you are using Sapper 0.29.3
+or newer.
+
+#### dependencies
+
+Remove `polka` or `express`, if you're using one of those, and any middleware such as `sirv` or `compression`.
+
+#### devDependencies
+
+Remove `sapper` from your `devDependencies` and replace it with `@sveltejs/kit` and whichever [adapter](/docs/adapters) you plan to use (see [next section](/docs/migrating#project-files-configuration)).
+
+#### scripts
+
+Any scripts that reference `sapper` should be updated:
+
+- `sapper build` should become [`svelte-kit build`](/docs/cli#svelte-kit-build) using the Node [adapter](/docs/adapters)
+- `sapper export` should become [`svelte-kit build`](/docs/cli#svelte-kit-build) using the static [adapter](/docs/adapters)
+- `sapper dev` should become [`svelte-kit dev`](/docs/cli#svelte-kit-dev)
+- `node __sapper__/build` should become `node build`
+
+### Project files
+
+The bulk of your app, in `src/routes`, can be left where it is, but several project files will need to be moved or updated.
+
+#### Configuration
+
+Your `webpack.config.js` or `rollup.config.js` should be replaced with a `svelte.config.js`, as documented [here](/docs/configuration). Svelte preprocessor options should be moved to `config.preprocess`.
+
+You will need to add an [adapter](/docs/adapters). `sapper build` is roughly equivalent to [adapter-node](https://github.com/sveltejs/kit/tree/master/packages/adapter-node) while `sapper export` is roughly equivalent to [adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static), though you might prefer to use an adapter designed for the platform you're deploying to.
+
+If you were using plugins for filetypes that are not automatically handled by [Vite](https://vitejs.dev), you will need to find Vite equivalents and add them to the [Vite config](/docs/configuration#vite).
+
+#### src/client.js
+
+This file has no equivalent in SvelteKit. Any custom logic (beyond `sapper.start(...)`) should be expressed in your `__layout.svelte` file, inside an `onMount` callback.
+
+#### src/server.js
+
+This file also has no direct equivalent, since SvelteKit apps can run in serverless environments. You can, however, use the [hooks module](/docs/hooks) to implement session logic.
+
+#### src/service-worker.js
+
+Most imports from `@sapper/service-worker` have equivalents in [`$service-worker`](/docs/modules#$service-worker):
+
+- `timestamp` is unchanged
+- `files` is unchanged
+- `shell` is now `build`
+- `routes` has been removed
+
+#### src/template.html
+
+The `src/template.html` file should be renamed `src/app.html`.
+
+Remove `%sapper.base%`, `%sapper.scripts%` and `%sapper.styles%`. Replace `%sapper.head%` with `%svelte.head%` and `%sapper.html%` with `%svelte.body%`. The `<div id="sapper">` is no longer necessary.
+
+#### src/node_modules
+
+A common pattern in Sapper apps is to put your internal library in a directory inside `src/node_modules`. This doesn't work with Vite, so we use [`src/lib`](/docs/modules#$lib) instead.
+
+### Pages and layouts
+
+#### Renamed files
+
+Your custom error page component should be renamed from `_error.svelte` to `__error.svelte`. Any `_layout.svelte` files should likewise be renamed `__layout.svelte`. The double underscore prefix is reserved for SvelteKit; your own [private modules](/docs/routing#private-modules) are still denoted with a single `_` prefix (configurable via [`routes`](/docs/configuration#routes) config).
+
+#### Imports
+
+The `goto`, `prefetch` and `prefetchRoutes` imports from `@sapper/app` should be replaced with identical imports from [`$app/navigation`](/docs/modules#$app-navigation).
+
+The `stores` import from `@sapper/app` should be replaced — see the [Stores](/docs/migrating#pages-and-layouts-stores) section below.
+
+Any files you previously imported from directories in `src/node_modules` will need to be replaced with [`$lib`](/docs/modules#$lib) imports.
+
+#### Preload
+
+As before, pages and layout components can export a function that allows data to be loaded before rendering takes place.
+
+This function has been renamed from `preload` to [`load`](/docs/loading), and its API has changed. Instead of two arguments — `page` and `session` — there is a single argument that includes both, along with `fetch` (which replaces `this.fetch`) and a new `stuff` object.
+
+There is no more `this` object, and consequently no `this.fetch`, `this.error` or `this.redirect`. Instead of returning props directly, `load` now returns an object that _contains_ `props`, alongside various other things.
+
+Lastly, if your page has a `load` method, make sure to return something otherwise you will get `Not found`.
+
+#### Stores
+
+In Sapper, you would get references to provided stores like so:
+
+```js
+import { stores } from '@sapper/app';
+const { preloading, page, session } = stores();
+```
+
+The `page` and `session` stores still exist; `preloading` has been replaced with a `navigating` store that contains `from` and `to` properties. `page` now has `url` and `params` properties, but no `path` or `query`.
+
+You access them differently in SvelteKit. `stores` is now `getStores`, but in most cases it is unnecessary since you can import `navigating`, `page` and `session` directly from [`$app/stores`](/docs/modules#$app-stores).
+
+#### Routing
+
+Regex routes are no longer supported. Instead, use [fallthrough routes](/docs/routing#advanced-routing-fallthrough-routes).
+
+#### URLs
+
+In Sapper, all relative URLs were resolved against the base URL — usually `/`, unless the `basepath` option was used — rather than against the current page.
+
+This caused problems and is no longer the case in SvelteKit. Instead, URLs are resolved against the current page (or the destination page, for `fetch` URLs in `load` functions) instead.
+
+#### &lt;a&gt; attributes
+
+- `sapper:prefetch` is now `sveltekit:prefetch`
+- `sapper:noscroll` is now `sveltekit:noscroll`
+
+### Endpoints
+
+In Sapper, 'server routes' — now referred to as [endpoints](/docs/routing#endpoints) — received the `req` and `res` objects exposed by Node's `http` module (or the augmented versions provided by frameworks like Polka and Express).
+
+SvelteKit is designed to be agnostic as to where the app is running — it could be running on a Node server, but could equally be running on a serverless platform or in a Cloudflare Worker. For that reason, you no longer interact directly with `req` and `res`. Your endpoints will need to be updated to match the new signature.
+
+To support this environment-agnostic behavior, `fetch` is now available in the global context, so you don't need to import `node-fetch`, `cross-fetch`, or similar server-side fetch implementations in order to use it.
+
+### Integrations
+
+See [the FAQ](/faq#integrations) for detailed information about integrations.
+
+#### HTML minifier
+
+Sapper includes `html-minifier` by default. SvelteKit does not include this, but it can be added as a [hook](/docs/hooks#handle):
+
+```js
+import { minify } from 'html-minifier';
+import { prerendering } from '$app/env';
+
+const minification_options = {
+	collapseBooleanAttributes: true,
+	collapseWhitespace: true,
+	conservativeCollapse: true,
+	decodeEntities: true,
+	html5: true,
+	ignoreCustomComments: [/^#/],
+	minifyCSS: true,
+	minifyJS: false,
+	removeAttributeQuotes: true,
+	removeComments: true,
+	removeOptionalTags: true,
+	removeRedundantAttributes: true,
+	removeScriptTypeAttributes: true,
+	removeStyleLinkTypeAttributes: true,
+	sortAttributes: true,
+	sortClassName: true
+};
+
+export async function handle({ event, resolve }) {
+	const response = await resolve(event);
+
+	if (prerendering && response.headers.get('content-type') === 'text/html') {
+		return new Response(minify(await response.text(), minification_options), {
+			status: response.status,
+			headers: response.headers
+		});
+	}
+
+	return response;
+}
+```
+
+Note that `prerendering` is `false` when using `svelte-kit preview` to test the production build of the site, so to verify the results of minifying, you'll need to inspect the built HTML files directly.
diff --git a/documentation/docs/90-additional-resources.md b/documentation/docs/90-additional-resources.md
index ba16b81f12aa..d44af021e3f7 100644
--- a/documentation/docs/90-additional-resources.md
+++ b/documentation/docs/90-additional-resources.md
@@ -20,7 +20,7 @@ SvelteKit users have also published plenty of examples on GitHub, under the [#sv
 
 ### Integrations
 
-[`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess) automatically transforms the code in your Svelte templates to provide support for TypeScript, PostCSS, scss/sass, Less, and many other technologies (except CoffeeScript which is [not supported](https://github.com/sveltejs/kit/issues/2920#issuecomment-996469815) by SvelteKit). The first step of setting it up is to add `svelte-preprocess` to your [`svelte.config.js`](#configuration). It is provided by the template if you're using TypeScript whereas JavaScript users will need to add it. After that, you will often only need to install the corresponding library such as `npm install -D sass` or `npm install -D less`. See the [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess) docs for more details.
+[`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess) automatically transforms the code in your Svelte templates to provide support for TypeScript, PostCSS, scss/sass, Less, and many other technologies (except CoffeeScript which is [not supported](https://github.com/sveltejs/kit/issues/2920#issuecomment-996469815) by SvelteKit). The first step of setting it up is to add `svelte-preprocess` to your [`svelte.config.js`](/docs/configuration). It is provided by the template if you're using TypeScript whereas JavaScript users will need to add it. After that, you will often only need to install the corresponding library such as `npm install -D sass` or `npm install -D less`. See the [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess) docs for more details.
 
 [Svelte Adders](https://sveltesociety.dev/templates#adders) allow you to setup many different complex integrations like Tailwind, PostCSS, Firebase, GraphQL, mdsvex, and more with a single command. Please see [sveltesociety.dev](https://sveltesociety.dev/) for a full listing of templates, components, and tools available for use with Svelte and SvelteKit.
 
diff --git a/documentation/faq/30-fallthrough.md b/documentation/faq/30-fallthrough.md
index 1bd43a8e9f85..0bbadb2068e5 100644
--- a/documentation/faq/30-fallthrough.md
+++ b/documentation/faq/30-fallthrough.md
@@ -2,4 +2,4 @@
 title: Why am I getting a 404?
 ---
 
-Please make sure you're returning something from your page's `load` function. See the section about [fallthrough routes](/docs#routing-advanced-routing-fallthrough-routes) for more details.
+Please make sure you're returning something from your page's `load` function. See the section about [fallthrough routes](/docs/routing#advanced-routing-fallthrough-routes) for more details.
diff --git a/documentation/faq/65-read-package-json.md b/documentation/faq/65-read-package-json.md
index 84c7b55dfc73..47d217c4b650 100644
--- a/documentation/faq/65-read-package-json.md
+++ b/documentation/faq/65-read-package-json.md
@@ -2,7 +2,7 @@
 title: How do I include details from `package.json` in my application?
 ---
 
-You cannot directly require JSON files, since SvelteKit expects [`svelte.config.js`](/docs#configuration) to be an ES module. If you'd like to include your application's version number or other information from `package.json` in your application, you can load JSON like so:
+You cannot directly require JSON files, since SvelteKit expects [`svelte.config.js`](/docs/configuration) to be an ES module. If you'd like to include your application's version number or other information from `package.json` in your application, you can load JSON like so:
 
 ```js
 const pkg = JSON.parse(fs.readFileSync(new URL('package.json', import.meta.url), 'utf8'));
diff --git a/documentation/faq/80-integrations.md b/documentation/faq/80-integrations.md
index 876f7ec06bbb..b173324aa2c1 100644
--- a/documentation/faq/80-integrations.md
+++ b/documentation/faq/80-integrations.md
@@ -2,11 +2,11 @@
 title: How do I use X with SvelteKit?
 ---
 
-Make sure you've read the [documentation section on integrations](/docs#additional-resources-integrations). If you're still having trouble, solutions to common issues are listed below.
+Make sure you've read the [documentation section on integrations](/docs/additional-resources#integrations). If you're still having trouble, solutions to common issues are listed below.
 
 ### How do I setup a database?
 
-Put the code to query your database in [endpoints](/docs#routing-endpoints) - don't query the database in .svelte files. You can create a `db.js` or similar that sets up a connection immediately and makes the client accessible throughout the app as a singleton. You can execute any one-time setup code in `hooks.js` and import your database helpers into any endpoint that needs them.
+Put the code to query your database in [endpoints](/docs/routing#endpoints) - don't query the database in .svelte files. You can create a `db.js` or similar that sets up a connection immediately and makes the client accessible throughout the app as a singleton. You can execute any one-time setup code in `hooks.js` and import your database helpers into any endpoint that needs them.
 
 ### How do I use middleware?
 
diff --git a/documentation/migrating/01-migrating.md b/documentation/migrating/01-migrating.md
deleted file mode 100644
index ae1491b718d3..000000000000
--- a/documentation/migrating/01-migrating.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Migrating from Sapper
----
-
-SvelteKit is the successor to Sapper and shares many elements of its design.
-
-If you have an existing Sapper app that you plan to migrate to SvelteKit, there are a number of changes you will need to make. You may find it helpful to view [some examples](https://kit.svelte.dev/docs#additional-resources-examples) while migrating.
diff --git a/documentation/migrating/02-pkg.md b/documentation/migrating/02-pkg.md
deleted file mode 100644
index 0b6dd37dcea2..000000000000
--- a/documentation/migrating/02-pkg.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: package.json
----
-
-### type: "module"
-
-Add `"type": "module"` to your `package.json`. You can do this step separately from the rest as part of an incremental migration if you are using Sapper 0.29.3
-or newer.
-
-### dependencies
-
-Remove `polka` or `express`, if you're using one of those, and any middleware such as `sirv` or `compression`.
-
-### devDependencies
-
-Remove `sapper` from your `devDependencies` and replace it with `@sveltejs/kit` and whichever [adapter](/docs#adapters) you plan to use (see [next section](#project-files-configuration)).
-
-### scripts
-
-Any scripts that reference `sapper` should be updated:
-
-- `sapper build` should become [`svelte-kit build`](/docs#command-line-interface-svelte-kit-build) using the Node [adapter](/docs#adapters)
-- `sapper export` should become [`svelte-kit build`](/docs#command-line-interface-svelte-kit-build) using the static [adapter](/docs#adapters)
-- `sapper dev` should become [`svelte-kit dev`](/docs#command-line-interface-svelte-kit-dev)
-- `node __sapper__/build` should become `node build`
diff --git a/documentation/migrating/03-project-files.md b/documentation/migrating/03-project-files.md
deleted file mode 100644
index 8ad0b58f8ab6..000000000000
--- a/documentation/migrating/03-project-files.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: Project files
----
-
-The bulk of your app, in `src/routes`, can be left where it is, but several project files will need to be moved or updated.
-
-### Configuration
-
-Your `webpack.config.js` or `rollup.config.js` should be replaced with a `svelte.config.js`, as documented [here](/docs#configuration). Svelte preprocessor options should be moved to `config.preprocess`.
-
-You will need to add an [adapter](/docs#adapters). `sapper build` is roughly equivalent to [adapter-node](https://github.com/sveltejs/kit/tree/master/packages/adapter-node) while `sapper export` is roughly equivalent to [adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static), though you might prefer to use an adapter designed for the platform you're deploying to.
-
-If you were using plugins for filetypes that are not automatically handled by [Vite](https://vitejs.dev), you will need to find Vite equivalents and add them to the [Vite config](/docs#configuration-vite).
-
-### src/client.js
-
-This file has no equivalent in SvelteKit. Any custom logic (beyond `sapper.start(...)`) should be expressed in your `__layout.svelte` file, inside an `onMount` callback.
-
-### src/server.js
-
-This file also has no direct equivalent, since SvelteKit apps can run in serverless environments. You can, however, use the [hooks module](/docs#hooks) to implement session logic.
-
-### src/service-worker.js
-
-Most imports from `@sapper/service-worker` have equivalents in [`$service-worker`](/docs#modules-$service-worker):
-
-- `timestamp` is unchanged
-- `files` is unchanged
-- `shell` is now `build`
-- `routes` has been removed
-
-### src/template.html
-
-The `src/template.html` file should be renamed `src/app.html`.
-
-Remove `%sapper.base%`, `%sapper.scripts%` and `%sapper.styles%`. Replace `%sapper.head%` with `%svelte.head%` and `%sapper.html%` with `%svelte.body%`.
-
-The `<div id="sapper">` is no longer necessary, though you can continue mounting the app to a wrapper element by specifying it with the [`target`](/docs#configuration-target) config option.
-
-### src/node_modules
-
-A common pattern in Sapper apps is to put your internal library in a directory inside `src/node_modules`. This doesn't work with Vite, so we use [`src/lib`](/docs#modules-$lib) instead.
diff --git a/documentation/migrating/04-pages.md b/documentation/migrating/04-pages.md
deleted file mode 100644
index 8978a3700e7d..000000000000
--- a/documentation/migrating/04-pages.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: Pages and layouts
----
-
-### Renamed files
-
-Your custom error page component should be renamed from `_error.svelte` to `__error.svelte`. Any `_layout.svelte` files should likewise be renamed `__layout.svelte`. The double underscore prefix is reserved for SvelteKit; your own [private modules](#routing-private-modules) are still denoted with a single `_` prefix (configurable via [`routes`](docs#configuration-routes) config).
-
-### Imports
-
-The `goto`, `prefetch` and `prefetchRoutes` imports from `@sapper/app` should be replaced with identical imports from [`$app/navigation`](/docs#modules-$app-navigation).
-
-The `stores` import from `@sapper/app` should be replaced — see the [Stores](#pages-and-layouts-stores) section below.
-
-Any files you previously imported from directories in `src/node_modules` will need to be replaced with [`$lib`](/docs#modules-$lib) imports.
-
-### Preload
-
-As before, pages and layout components can export a function that allows data to be loaded before rendering takes place.
-
-This function has been renamed from `preload` to [`load`](/docs#loading), and its API has changed. Instead of two arguments — `page` and `session` — there is a single argument that includes both, along with `fetch` (which replaces `this.fetch`) and a new `stuff` object.
-
-There is no more `this` object, and consequently no `this.fetch`, `this.error` or `this.redirect`. Instead of returning props directly, `load` now returns an object that _contains_ `props`, alongside various other things.
-
-Lastly, if your page has a `load` method, make sure to return something otherwise you will get `Not found`.
-
-### Stores
-
-In Sapper, you would get references to provided stores like so:
-
-```js
-import { stores } from '@sapper/app';
-const { preloading, page, session } = stores();
-```
-
-The `page` and `session` stores still exist; `preloading` has been replaced with a `navigating` store that contains `from` and `to` properties. `page` now has `url` and `params` properties, but no `path` or `query`.
-
-You access them differently in SvelteKit. `stores` is now `getStores`, but in most cases it is unnecessary since you can import `navigating`, `page` and `session` directly from [`$app/stores`](/docs#modules-$app-stores).
-
-### Routing
-
-Regex routes are no longer supported. Instead, use [fallthrough routes](/docs#routing-advanced-routing-fallthrough-routes).
-
-### URLs
-
-In Sapper, all relative URLs were resolved against the base URL — usually `/`, unless the `basepath` option was used — rather than against the current page.
-
-This caused problems and is no longer the case in SvelteKit. Instead, URLs are resolved against the current page (or the destination page, for `fetch` URLs in `load` functions) instead.
-
-### &lt;a&gt; attributes
-
-- `sapper:prefetch` is now `sveltekit:prefetch`
-- `sapper:noscroll` is now `sveltekit:noscroll`
diff --git a/documentation/migrating/05-endpoints.md b/documentation/migrating/05-endpoints.md
deleted file mode 100644
index 4b9913422193..000000000000
--- a/documentation/migrating/05-endpoints.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Endpoints
----
-
-In Sapper, 'server routes' — now referred to as [endpoints](/docs#routing-endpoints) — received the `req` and `res` objects exposed by Node's `http` module (or the augmented versions provided by frameworks like Polka and Express).
-
-SvelteKit is designed to be agnostic as to where the app is running — it could be running on a Node server, but could equally be running on a serverless platform or in a Cloudflare Worker. For that reason, you no longer interact directly with `req` and `res`. Your endpoints will need to be updated to match the new signature.
-
-To support this environment-agnostic behavior, `fetch` is now available in the global context, so you don't need to import `node-fetch`, `cross-fetch`, or similar server-side fetch implementations in order to use it.
diff --git a/documentation/migrating/99-integrations.md b/documentation/migrating/99-integrations.md
deleted file mode 100644
index 8ebd3316b7e4..000000000000
--- a/documentation/migrating/99-integrations.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: Integrations
----
-
-See [the FAQ](/faq#integrations) for detailed information about integrations.
-
-### HTML minifier
-
-Sapper includes `html-minifier` by default. SvelteKit does not include this, but it can be added as a [hook](/docs#hooks-handle):
-
-```js
-import { minify } from 'html-minifier';
-import { prerendering } from '$app/env';
-
-const minification_options = {
-	collapseBooleanAttributes: true,
-	collapseWhitespace: true,
-	conservativeCollapse: true,
-	decodeEntities: true,
-	html5: true,
-	ignoreCustomComments: [/^#/],
-	minifyCSS: true,
-	minifyJS: false,
-	removeAttributeQuotes: true,
-	removeComments: true,
-	removeOptionalTags: true,
-	removeRedundantAttributes: true,
-	removeScriptTypeAttributes: true,
-	removeStyleLinkTypeAttributes: true,
-	sortAttributes: true,
-	sortClassName: true
-};
-
-export async function handle({ event, resolve }) {
-  const response = await resolve(event);
-
-  if (prerendering && response.headers.get('content-type') === 'text/html') {
-    return new Response(minify(await response.text(), minification_options), {
-    	status: response.status,
-    	headers: response.headers
-    });
-  }
-
-  return response;
-}
-```
-
-Note that `prerendering` is `false` when using `svelte-kit preview` to test the production build of the site, so to verify the results of minifying, you'll need to inspect the built HTML files directly.
diff --git a/packages/create-svelte/templates/default/package.json b/packages/create-svelte/templates/default/package.json
index 5180c49d8f9e..b084328fb9db 100644
--- a/packages/create-svelte/templates/default/package.json
+++ b/packages/create-svelte/templates/default/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "~TODO~",
+	"name": "default-template",
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6d8e5c437a4e..fd6b0db9cd9a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -221,8 +221,8 @@ importers:
       '@sveltejs/adapter-auto': link:../../../adapter-auto
       '@sveltejs/kit': link:../../../kit
       svelte: 3.44.2
-      svelte-preprocess: 4.9.8_svelte@3.44.2+typescript@4.5.5
-      typescript: 4.5.5
+      svelte-preprocess: 4.9.8_svelte@3.44.2+typescript@4.5.2
+      typescript: 4.5.2
 
   packages/kit:
     specifiers:
@@ -315,22 +315,26 @@ importers:
     specifiers:
       '@sveltejs/adapter-auto': workspace:*
       '@sveltejs/kit': workspace:*
-      '@sveltejs/site-kit': ^2.0.0
+      '@sveltejs/site-kit': ^2.0.2
       '@types/node': ^16.6.1
+      flexsearch: ^0.7.21
       marked: ^4.0.5
       prism-svelte: ^0.4.7
       prismjs: ^1.26.0
       svelte: ^3.43.0
+      typescript: ^4.5.5
       vite-imagetools: ^4.0.3
     devDependencies:
       '@sveltejs/adapter-auto': link:../../packages/adapter-auto
       '@sveltejs/kit': link:../../packages/kit
-      '@sveltejs/site-kit': 2.0.0
+      '@sveltejs/site-kit': 2.0.2
       '@types/node': 16.11.11
+      flexsearch: 0.7.21
       marked: 4.0.5
       prism-svelte: 0.4.7
       prismjs: 1.26.0
       svelte: 3.44.2
+      typescript: 4.5.5
       vite-imagetools: 4.0.3
 
 packages:
@@ -348,8 +352,6 @@ packages:
       '@octokit/core': 3.5.1
       '@octokit/plugin-paginate-rest': 2.17.0_@octokit+core@3.5.1
       '@octokit/plugin-rest-endpoint-methods': 4.15.1_@octokit+core@3.5.1
-    transitivePeerDependencies:
-      - encoding
     dev: true
 
   /@actions/http-client/1.0.11:
@@ -1224,13 +1226,11 @@ packages:
     dependencies:
       '@octokit/auth-token': 2.5.0
       '@octokit/graphql': 4.8.0
-      '@octokit/request': 5.6.3
+      '@octokit/request': 5.6.2
       '@octokit/request-error': 2.1.0
       '@octokit/types': 6.34.0
       before-after-hook: 2.2.2
       universal-user-agent: 6.0.0
-    transitivePeerDependencies:
-      - encoding
     dev: true
 
   /@octokit/endpoint/6.0.12:
@@ -1244,11 +1244,9 @@ packages:
   /@octokit/graphql/4.8.0:
     resolution: {integrity: sha512-0gv+qLSBLKF0z8TKaSKTsS39scVKF9dbMxJpj3U0vC7wjNWFuIpL/z76Qe2fiuCbDRcJSavkXsVtMS6/dtQQsg==}
     dependencies:
-      '@octokit/request': 5.6.3
+      '@octokit/request': 5.6.2
       '@octokit/types': 6.34.0
       universal-user-agent: 6.0.0
-    transitivePeerDependencies:
-      - encoding
     dev: true
 
   /@octokit/openapi-types/11.2.0:
@@ -1282,17 +1280,15 @@ packages:
       once: 1.4.0
     dev: true
 
-  /@octokit/request/5.6.3:
-    resolution: {integrity: sha512-bFJl0I1KVc9jYTe9tdGGpAMPy32dLBXXo1dS/YwSCTL/2nd9XeHsY616RE3HPXDVk+a+dBuzyz5YdlXwcDTr2A==}
+  /@octokit/request/5.6.2:
+    resolution: {integrity: sha512-je66CvSEVf0jCpRISxkUcCa0UkxmFs6eGDRSbfJtAVwbLH5ceqF+YEyC8lj8ystKyZTy8adWr0qmkY52EfOeLA==}
     dependencies:
       '@octokit/endpoint': 6.0.12
       '@octokit/request-error': 2.1.0
       '@octokit/types': 6.34.0
       is-plain-object: 5.0.0
-      node-fetch: 2.6.7
+      node-fetch: 2.6.6
       universal-user-agent: 6.0.0
-    transitivePeerDependencies:
-      - encoding
     dev: true
 
   /@octokit/types/6.34.0:
@@ -1434,8 +1430,8 @@ packages:
       picomatch: 2.3.0
     dev: true
 
-  /@sveltejs/site-kit/2.0.0:
-    resolution: {integrity: sha512-/XdrL9A03RoqIoL9kYTaGB7rbMaHJOxlmcq+5XPTxkBJ2FOQAx7ILkOH1qQULUjjUM/OywgwhmwmdwBKeC/gQA==}
+  /@sveltejs/site-kit/2.0.2:
+    resolution: {integrity: sha512-YdA4YDz0As/G1yypUAs2gxF/unt6eo/itfwl67GHmfam6c7gJDYyLC0CZNZKdjPY4GfmvvYNqB/Ta4I4xHxGXQ==}
     dependencies:
       golden-fleece: 1.0.9
     dev: true
@@ -3104,6 +3100,10 @@ packages:
     resolution: {integrity: sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==}
     dev: true
 
+  /flexsearch/0.7.21:
+    resolution: {integrity: sha512-W7cHV7Hrwjid6lWmy0IhsWDFQboWSng25U3VVywpHOTJnnAZNPScog67G+cVpeX9f7yDD21ih0WDrMMT+JoaYg==}
+    dev: true
+
   /foreground-child/2.0.0:
     resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==}
     engines: {node: '>=8.0.0'}
@@ -4208,18 +4208,6 @@ packages:
       whatwg-url: 5.0.0
     dev: true
 
-  /node-fetch/2.6.7:
-    resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
-    engines: {node: 4.x || >=6.0.0}
-    peerDependencies:
-      encoding: ^0.1.0
-    peerDependenciesMeta:
-      encoding:
-        optional: true
-    dependencies:
-      whatwg-url: 5.0.0
-    dev: true
-
   /node-fetch/3.1.0:
     resolution: {integrity: sha512-QU0WbIfMUjd5+MUzQOYhenAazakV7Irh1SGkWCsRzBwvm4fAhzEUaHMJ6QLP7gWT6WO9/oH2zhKMMGMuIrDyKw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -5355,8 +5343,8 @@ packages:
       sade: 1.7.4
       source-map: 0.7.3
       svelte: 3.44.2
-      svelte-preprocess: 4.9.8_svelte@3.44.2+typescript@4.5.5
-      typescript: 4.5.5
+      svelte-preprocess: 4.9.8_svelte@3.44.2+typescript@4.5.2
+      typescript: 4.5.2
     transitivePeerDependencies:
       - '@babel/core'
       - coffeescript
@@ -5429,7 +5417,7 @@ packages:
       typescript: 4.4.4
     dev: true
 
-  /svelte-preprocess/4.9.8_svelte@3.44.2+typescript@4.5.5:
+  /svelte-preprocess/4.9.8_svelte@3.44.2+typescript@4.5.2:
     resolution: {integrity: sha512-EQS/oRZzMtYdAprppZxY3HcysKh11w54MgA63ybtL+TAZ4hVqYOnhw41JVJjWN9dhPnNjjLzvbZ2tMhTsla1Og==}
     engines: {node: '>= 9.11.2'}
     requiresBuild: true
@@ -5477,7 +5465,7 @@ packages:
       sorcery: 0.10.0
       strip-indent: 3.0.0
       svelte: 3.44.2
-      typescript: 4.5.5
+      typescript: 4.5.2
     dev: true
 
   /svelte/3.44.2:
@@ -5689,6 +5677,12 @@ packages:
     hasBin: true
     dev: true
 
+  /typescript/4.5.2:
+    resolution: {integrity: sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
+    dev: true
+
   /typescript/4.5.5:
     resolution: {integrity: sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==}
     engines: {node: '>=4.2.0'}
@@ -6009,7 +6003,6 @@ packages:
       httpie: 1.1.2
       remark-gfm: 1.0.0
     transitivePeerDependencies:
-      - encoding
       - supports-color
     dev: true
 
diff --git a/sites/kit.svelte.dev/package.json b/sites/kit.svelte.dev/package.json
index 9baf21864637..5c6f7b448161 100644
--- a/sites/kit.svelte.dev/package.json
+++ b/sites/kit.svelte.dev/package.json
@@ -10,12 +10,14 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
-		"@sveltejs/site-kit": "^2.0.0",
+		"@sveltejs/site-kit": "^2.0.2",
 		"@types/node": "^16.6.1",
+		"flexsearch": "^0.7.21",
 		"marked": "^4.0.5",
 		"prism-svelte": "^0.4.7",
 		"prismjs": "^1.26.0",
 		"svelte": "^3.43.0",
+		"typescript": "^4.5.5",
 		"vite-imagetools": "^4.0.3"
 	},
 	"type": "module"
diff --git a/sites/kit.svelte.dev/src/lib/actions/focus.js b/sites/kit.svelte.dev/src/lib/actions/focus.js
new file mode 100644
index 000000000000..b688318bf0ce
--- /dev/null
+++ b/sites/kit.svelte.dev/src/lib/actions/focus.js
@@ -0,0 +1,68 @@
+/** @param {HTMLElement} node */
+export function focusable_children(node) {
+	const nodes = Array.from(
+		node.querySelectorAll(
+			'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+		)
+	);
+
+	const index = nodes.indexOf(document.activeElement);
+
+	const update = (d) => {
+		let i = index + d;
+		i += nodes.length;
+		i %= nodes.length;
+
+		// @ts-expect-error
+		nodes[i].focus();
+	};
+
+	return {
+		/** @param {string} [selector] */
+		next: (selector) => {
+			const reordered = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
+
+			for (let i = 0; i < reordered.length; i += 1) {
+				if (!selector || reordered[i].matches(selector)) {
+					reordered[i].focus();
+					return;
+				}
+			}
+		},
+		/** @param {string} [selector] */
+		prev: (selector) => {
+			const reordered = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
+
+			for (let i = reordered.length - 2; i >= 0; i -= 1) {
+				if (!selector || reordered[i].matches(selector)) {
+					reordered[i].focus();
+					return;
+				}
+			}
+		},
+		update
+	};
+}
+
+export function trap(node) {
+	const handle_keydown = (e) => {
+		if (e.key === 'Tab') {
+			e.preventDefault();
+
+			const group = focusable_children(node);
+			if (e.shiftKey) {
+				group.prev();
+			} else {
+				group.next();
+			}
+		}
+	};
+
+	node.addEventListener('keydown', handle_keydown);
+
+	return {
+		destroy: () => {
+			node.removeEventListener('keydown', handle_keydown);
+		}
+	};
+}
diff --git a/sites/kit.svelte.dev/src/lib/docs/Contents.svelte b/sites/kit.svelte.dev/src/lib/docs/Contents.svelte
new file mode 100644
index 000000000000..35ad0c9a76fb
--- /dev/null
+++ b/sites/kit.svelte.dev/src/lib/docs/Contents.svelte
@@ -0,0 +1,229 @@
+<script>
+	import { onMount } from 'svelte';
+	import { afterNavigate } from '$app/navigation';
+	import { page } from '$app/stores';
+
+	export let contents = [];
+
+	let path = null;
+
+	/** @type {HTMLElement} */
+	let content;
+
+	/** @type {NodeListOf<HTMLElement>} */
+	let headings;
+
+	/** @type {number[]} */
+	let positions = [];
+
+	onMount(() => {
+		// wait for fonts to load...
+		const timeouts = [setTimeout(onresize, 1000), setTimeout(onscroll, 5000)];
+
+		update();
+		highlight();
+
+		return () => {
+			window.removeEventListener('scroll', onscroll, true);
+			window.removeEventListener('resize', onresize, true);
+
+			timeouts.forEach((timeout) => clearTimeout(timeout));
+		};
+	});
+
+	afterNavigate(() => {
+		update();
+		highlight();
+	});
+
+	function update() {
+		content = document.querySelector('.content');
+		const { top } = content.getBoundingClientRect();
+
+		// don't update `selected` for headings above level 4, see _sections.js
+		headings = content.querySelectorAll('[id]:not([data-scrollignore])');
+
+		positions = Array.from(headings).map((heading) => {
+			return heading.getBoundingClientRect().top - top;
+		});
+	}
+
+	function highlight() {
+		const { top } = content.getBoundingClientRect();
+
+		let i = headings.length;
+
+		while (i--) {
+			if (positions[i] + top < 40) {
+				const heading = headings[i];
+				path = `${$page.url.pathname}#${heading.id}`;
+				return;
+			}
+		}
+
+		path = $page.url.pathname;
+	}
+</script>
+
+<svelte:window on:scroll={highlight} on:resize={update} />
+
+<nav>
+	<ul class="sidebar">
+		{#each contents as section}
+			<li>
+				<a
+					class="section"
+					sveltekit:prefetch
+					class:active={section.path === path}
+					href={section.path}
+				>
+					{section.title}
+				</a>
+
+				<ul>
+					{#each section.sections as subsection}
+						<li>
+							<a
+								class="subsection"
+								sveltekit:prefetch
+								class:active={subsection.path === path}
+								href={subsection.path}
+							>
+								{subsection.title}
+							</a>
+
+							<ul>
+								{#each subsection.sections as subsection}
+									<li>
+										<a
+											class="nested subsection"
+											class:active={subsection.path === path}
+											href={subsection.path}
+											sveltekit:prefetch
+										>
+											{subsection.title}
+										</a>
+									</li>
+								{/each}
+							</ul>
+						</li>
+					{/each}
+				</ul>
+			</li>
+		{/each}
+	</ul>
+</nav>
+
+<style>
+	nav {
+		/* position: fixed; */
+		/* inline-size: var(--sidebar-w); */
+		/* block-size: 100vh; */
+		inset-block-start: 0;
+		inset-inline-start: 0;
+		overflow: hidden;
+		background-color: var(--second);
+		color: white;
+	}
+
+	nav::after {
+		content: '';
+		position: fixed;
+		inset-inline-start: 0;
+		inset-block-end: 0;
+		inline-size: var(--sidebar-w);
+		block-size: 2em;
+		pointer-events: none;
+		block-size: var(--top-offset);
+		background: linear-gradient(
+			to bottom,
+			rgba(103, 103, 120, 0) 0%,
+			rgba(103, 103, 120, 0.7) 50%,
+			rgba(103, 103, 120, 1) 100%
+		);
+	}
+
+	.sidebar {
+		padding-inline: 3.2rem 0;
+		padding-block: var(--top-offset) 6.4rem;
+		font-family: var(--font);
+		overflow-y: auto;
+		block-size: 100%;
+		inset-block-end: auto;
+		inline-size: 100%;
+		columns: 2;
+	}
+
+	li {
+		display: block;
+		line-height: 1.2;
+		margin: 0;
+		margin-block-end: 4rem;
+	}
+
+	a {
+		position: relative;
+		transition: color 0.2s;
+		border-block-end: none;
+		padding: 0;
+		color: var(--sidebar-text);
+		user-select: none;
+	}
+
+	.section {
+		display: block;
+		padding-block-end: 0.8rem;
+		font-size: var(--h6);
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		font-weight: 600;
+	}
+
+	.subsection {
+		display: block;
+		font-size: 1.6rem;
+		font-family: var(--font);
+		padding-block-end: 0.6em;
+	}
+
+	.active::after {
+		content: '';
+		position: absolute;
+		inset-inline-end: 0;
+		inset-block-start: 2px;
+		inline-size: 0;
+		block-size: 0;
+		border: 6px solid transparent;
+		border-inline-end-color: white;
+	}
+
+	.nested {
+		padding-inline-start: 1.2rem;
+	}
+
+	ul ul,
+	ul ul li {
+		margin: 0;
+	}
+
+	a:hover,
+	.section:hover,
+	.subsection:hover,
+	.active {
+		color: white;
+	}
+
+	@media (min-width: 600px) {
+		.sidebar {
+			columns: 2;
+			padding-inline: var(--side-nav);
+		}
+	}
+
+	@media (min-width: 832px) {
+		.sidebar {
+			columns: 1;
+			padding-inline: 3.2rem 0;
+		}
+	}
+</style>
diff --git a/sites/kit.svelte.dev/src/lib/docs/index.js b/sites/kit.svelte.dev/src/lib/docs/index.js
index 1f35017b6128..775941bcb749 100644
--- a/sites/kit.svelte.dev/src/lib/docs/index.js
+++ b/sites/kit.svelte.dev/src/lib/docs/index.js
@@ -1,11 +1,10 @@
 import fs from 'fs';
-import { marked } from 'marked';
 import PrismJS from 'prismjs';
-
 import 'prismjs/components/prism-bash.js';
 import 'prismjs/components/prism-diff.js';
 import 'prismjs/components/prism-typescript.js';
 import 'prism-svelte';
+import { extract_frontmatter, transform } from './markdown';
 
 const languages = {
 	bash: 'bash',
@@ -19,113 +18,135 @@ const languages = {
 	'': ''
 };
 
-/** @param {string} dir */
-export function read(dir) {
-	return fs
-		.readdirSync(`../../documentation/${dir}`)
-		.map((file) => {
-			const match = /\d{2}-(.+)\.md/.exec(file);
-			if (!match) return;
+const base = '../../documentation';
+
+/**
+ * @param {string} dir
+ * @param {string} file
+ */
+export function read_file(dir, file) {
+	const match = /\d{2}-(.+)\.md/.exec(file);
+	if (!match) return null;
+
+	const slug = match[1];
+
+	const markdown = fs.readFileSync(`${base}/${dir}/${file}`, 'utf-8');
+
+	return {
+		file: `${dir}/${file}`,
+		slug: match[1],
+		// third argument is a gross hack to accommodate FAQ
+		...parse(markdown, file, dir === 'faq' ? slug : undefined)
+	};
+}
+
+/**
+ * @param {string} dir
+ * @param {string} slug
+ */
+export function read(dir, slug) {
+	const files = fs.readdirSync(`${base}/${dir}`).filter((file) => /^\d{2}-(.+)\.md$/.test(file));
+	const index = files.findIndex((file) => file.slice(3, -3) === slug);
 
-			const slug = match[1];
+	if (index === -1) return null;
 
-			const markdown = fs.readFileSync(`../../documentation/${dir}/${file}`, 'utf-8');
-			const { title, sections, content } = parse(markdown, file);
+	const prev = index > 0 && files[index - 1];
+	const next = index < files.length - 1 && files[index + 1];
 
-			return { title, slug, file, sections, content };
-		})
+	const summarise = (file) => ({
+		slug: file.slice(3, -3), // remove 00- prefix and .md suffix
+		title: extract_frontmatter(fs.readFileSync(`${base}/${dir}/${file}`, 'utf8')).metadata.title
+	});
+
+	return {
+		prev: prev && summarise(prev),
+		next: next && summarise(next),
+		section: read_file(dir, files[index])
+	};
+}
+
+/** @param {string} dir */
+export function read_all(dir) {
+	return fs
+		.readdirSync(`${base}/${dir}`)
+		.map((file) => read_file(dir, file))
 		.filter(Boolean);
 }
 
-function parse(markdown, file) {
+/**
+ * @param {string} markdown
+ * @param {string} file
+ * @param {string} [main_slug]
+ */
+function parse(markdown, file, main_slug) {
 	const { body, metadata } = extract_frontmatter(markdown);
 
-	const slug = slugify(metadata.title);
-
-	const headings = [, slug];
+	const headings = main_slug ? [main_slug] : [];
 	const sections = [];
 
 	let section;
 
-	marked.use({
-		renderer: {
-			heading(html, level) {
-				const title = html
-					.replace(/&quot;/g, '"')
-					.replace(/&lt;/g, '<')
-					.replace(/&gt;/g, '>');
-
-				const normalized = slugify(title);
-
-				headings[level - 1] = normalized;
-				headings.length = level;
-
-				const slug = headings.filter(Boolean).join('-');
-
-				if (level === 3) {
-					section = {
-						title,
-						slug,
-						sections: []
-					};
-
-					sections.push(section);
-				} else if (level === 4) {
-					section.sections.push({
-						title,
-						slug
-					});
-				} else {
-					throw new Error(`Unexpected <h${level}> in ${file}`);
-				}
+	const content = transform(body, {
+		heading(html, level) {
+			const title = html
+				.replace(/&quot;/g, '"')
+				.replace(/&lt;/g, '<')
+				.replace(/&gt;/g, '>');
 
-				return `<h${level} id="${slug}">${html}</h${level}>`;
-			},
-			code(source, lang) {
-				// for no good reason at all, marked replaces tabs with spaces
-				source = source.replace(/^(    )+/gm, (match) => {
-					let tabs = '';
-					for (let i = 0; i < match.length; i += 4) {
-						tabs += '\t';
-					}
-					return tabs;
-				});
+			const normalized = slugify(title);
+
+			headings[level - 1] = normalized;
+			headings.length = level;
 
-				const plang = languages[lang];
-				const highlighted = plang
-					? PrismJS.highlight(source, PrismJS.languages[plang], lang)
-					: source.replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
+			const slug = headings.filter(Boolean).join('-');
 
-				return `<div class="code-block"><pre class='language-${plang}'><code>${highlighted}</code></pre></div>`;
+			if (level === 3) {
+				section = {
+					title,
+					slug,
+					sections: []
+				};
+
+				sections.push(section);
+			} else if (level === 4) {
+				section.sections.push({
+					title,
+					slug
+				});
+			} else {
+				throw new Error(`Unexpected <h${level}> in ${file}`);
 			}
+
+			return `<h${level} id="${slug}">${html}<a href="#${slug}" class="anchor"><span class="visually-hidden">permalink</span></a></h${level}>`;
+		},
+		code(source, lang) {
+			// for no good reason at all, marked replaces tabs with spaces
+			source = source.replace(/^(    )+/gm, (match) => {
+				let tabs = '';
+				for (let i = 0; i < match.length; i += 4) {
+					tabs += '\t';
+				}
+				return tabs;
+			});
+
+			const plang = languages[lang];
+			const highlighted = plang
+				? PrismJS.highlight(source, PrismJS.languages[plang], lang)
+				: source.replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
+
+			return `<div class="code-block"><pre class='language-${plang}'><code>${highlighted}</code></pre></div>`;
 		}
 	});
 
-	const content = marked(body);
-
 	return {
-		slug,
 		title: metadata.title,
 		sections,
 		content
 	};
 }
 
-function extract_frontmatter(markdown) {
-	const match = /---\r?\n([\s\S]+?)\r?\n---/.exec(markdown);
-	const frontmatter = match[1];
-	const body = markdown.slice(match[0].length);
-
-	const metadata = {};
-	frontmatter.split('\n').forEach((pair) => {
-		const i = pair.indexOf(':');
-		metadata[pair.slice(0, i).trim()] = pair.slice(i + 1).trim();
-	});
-
-	return { metadata, body };
-}
-
-function slugify(title) {
+/** @param {string} title */
+export function slugify(title) {
 	return title
 		.toLowerCase()
 		.replace(/[^a-z0-9-$]/g, '-')
diff --git a/sites/kit.svelte.dev/src/lib/docs/markdown.js b/sites/kit.svelte.dev/src/lib/docs/markdown.js
new file mode 100644
index 000000000000..568a69e77e4c
--- /dev/null
+++ b/sites/kit.svelte.dev/src/lib/docs/markdown.js
@@ -0,0 +1,186 @@
+import { marked } from 'marked';
+
+const escapeTest = /[&<>"']/;
+const escapeReplace = /[&<>"']/g;
+const escapeTestNoEncode = /[<>"']|&(?!#?\w+;)/;
+const escapeReplaceNoEncode = /[<>"']|&(?!#?\w+;)/g;
+const escapeReplacements = {
+	'&': '&amp;',
+	'<': '&lt;',
+	'>': '&gt;',
+	'"': '&quot;',
+	"'": '&#39;'
+};
+const getEscapeReplacement = (ch) => escapeReplacements[ch];
+
+/**
+ * @param {string} html
+ * @param {boolean} encode
+ */
+export function escape(html, encode) {
+	if (encode) {
+		if (escapeTest.test(html)) {
+			return html.replace(escapeReplace, getEscapeReplacement);
+		}
+	} else {
+		if (escapeTestNoEncode.test(html)) {
+			return html.replace(escapeReplaceNoEncode, getEscapeReplacement);
+		}
+	}
+
+	return html;
+}
+
+/** @type {Partial<import('marked').Renderer>} */
+const default_renderer = {
+	code(code, infostring, escaped) {
+		const lang = (infostring || '').match(/\S*/)[0];
+
+		code = code.replace(/\n$/, '') + '\n';
+
+		if (!lang) {
+			return '<pre><code>' + (escaped ? code : escape(code, true)) + '</code></pre>\n';
+		}
+
+		return (
+			'<pre><code class="language-' +
+			escape(lang, true) +
+			'">' +
+			(escaped ? code : escape(code, true)) +
+			'</code></pre>\n'
+		);
+	},
+
+	blockquote(quote) {
+		return '<blockquote>\n' + quote + '</blockquote>\n';
+	},
+
+	html(html) {
+		return html;
+	},
+
+	heading(text, level) {
+		return '<h' + level + '>' + text + '</h' + level + '>\n';
+	},
+
+	hr() {
+		return '<hr>\n';
+	},
+
+	list(body, ordered, start) {
+		const type = ordered ? 'ol' : 'ul',
+			startatt = ordered && start !== 1 ? ' start="' + start + '"' : '';
+		return '<' + type + startatt + '>\n' + body + '</' + type + '>\n';
+	},
+
+	listitem(text) {
+		return '<li>' + text + '</li>\n';
+	},
+
+	checkbox(checked) {
+		return '<input ' + (checked ? 'checked="" ' : '') + 'disabled="" type="checkbox"' + '' + '> ';
+	},
+
+	paragraph(text) {
+		return '<p>' + text + '</p>\n';
+	},
+
+	table(header, body) {
+		if (body) body = '<tbody>' + body + '</tbody>';
+
+		return '<table>\n' + '<thead>\n' + header + '</thead>\n' + body + '</table>\n';
+	},
+
+	tablerow(content) {
+		return '<tr>\n' + content + '</tr>\n';
+	},
+
+	tablecell(content, flags) {
+		const type = flags.header ? 'th' : 'td';
+		const tag = flags.align ? '<' + type + ' align="' + flags.align + '">' : '<' + type + '>';
+		return tag + content + '</' + type + '>\n';
+	},
+
+	// span level renderer
+	strong(text) {
+		return '<strong>' + text + '</strong>';
+	},
+
+	em(text) {
+		return '<em>' + text + '</em>';
+	},
+
+	codespan(text) {
+		return '<code>' + text + '</code>';
+	},
+
+	br() {
+		return '<br>';
+	},
+
+	del(text) {
+		return '<del>' + text + '</del>';
+	},
+
+	link(href, title, text) {
+		if (href === null) {
+			return text;
+		}
+		let out = '<a href="' + escape(href) + '"';
+		if (title) {
+			out += ' title="' + title + '"';
+		}
+		out += '>' + text + '</a>';
+		return out;
+	},
+
+	image(href, title, text) {
+		if (href === null) {
+			return text;
+		}
+
+		let out = '<img src="' + href + '" alt="' + text + '"';
+		if (title) {
+			out += ' title="' + title + '"';
+		}
+		out += '>';
+		return out;
+	},
+
+	text(text) {
+		return text;
+	}
+};
+
+/**
+ * @param {string} markdown
+ * @param {Partial<import('marked').Renderer>} renderer
+ */
+export function transform(markdown, renderer = {}) {
+	marked.use({
+		renderer: {
+			// we have to jump through these hoops because of marked's API design choices —
+			// options are global, and merged in confusing ways. You can't do e.g.
+			// `new Marked(options).parse(markdown)`
+			...default_renderer,
+			...renderer
+		}
+	});
+
+	return marked(markdown);
+}
+
+/** @param {string} markdown */
+export function extract_frontmatter(markdown) {
+	const match = /---\r?\n([\s\S]+?)\r?\n---/.exec(markdown);
+	const frontmatter = match[1];
+	const body = markdown.slice(match[0].length);
+
+	const metadata = {};
+	frontmatter.split('\n').forEach((pair) => {
+		const i = pair.indexOf(':');
+		metadata[pair.slice(0, i).trim()] = pair.slice(i + 1).trim();
+	});
+
+	return { metadata, body };
+}
diff --git a/sites/kit.svelte.dev/src/lib/search/Search.svelte b/sites/kit.svelte.dev/src/lib/search/Search.svelte
new file mode 100644
index 000000000000..784792c97f7a
--- /dev/null
+++ b/sites/kit.svelte.dev/src/lib/search/Search.svelte
@@ -0,0 +1,139 @@
+<script>
+	import { searching, query } from './stores.js';
+</script>
+
+<div class="search-container">
+	<input
+		id="search"
+		on:input={(e) => {
+			$searching = true;
+			$query = e.target.value;
+			e.target.value = '';
+		}}
+		on:mousedown|preventDefault={() => ($searching = true)}
+		on:touchstart|preventDefault={() => ($searching = true)}
+		type="search"
+	/>
+
+	<label for="#search">
+		<svg viewBox="0 0 24 24" aria-hidden="true">
+			<path
+				fill="currentColor"
+				d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
+			/>
+		</svg>
+
+		<span>Search</span> <kbd>{navigator.platform === 'MacIntel' ? '⌘' : 'Ctrl'}</kbd> <kbd>K</kbd>
+	</label>
+</div>
+
+<style>
+	.search-container {
+		position: relative;
+		display: flex;
+		align-items: center;
+		animation: fade-in 0.2s;
+		width: 100%;
+		height: 100%;
+	}
+
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	input {
+		padding: 0.5em 0.5em 0.4em 0.5em;
+		border: 1px solid #ccc;
+		font-family: inherit;
+		font-size: 1.6rem;
+	}
+
+	input[type='search'] {
+		text-align: center;
+	}
+
+	.search-container svg {
+		position: absolute;
+		display: inline;
+		width: 1.6rem;
+		height: 1.6rem;
+		left: 1rem;
+		top: calc(50% - 0.8rem);
+		color: #ccc;
+	}
+
+	.search-container input {
+		width: 100%;
+		height: 3.2rem;
+		border-radius: var(--border-r);
+	}
+
+	.search-container input:focus + label {
+		display: none;
+	}
+
+	.search-container label {
+		color: #666;
+		position: absolute;
+		top: calc(50% - 0.9rem);
+		width: 100%;
+		text-align: center;
+		pointer-events: none;
+		font-size: 1.2rem;
+		text-transform: uppercase;
+	}
+
+	.search-container kbd {
+		display: none;
+		background: #eee;
+		border: 1px solid #ddd;
+		padding: 0.2rem 0.2rem 0rem 0.2rem;
+		color: #666;
+		font-size: inherit;
+		font-family: inherit;
+		border-radius: 2px;
+	}
+
+	@media (min-width: 800px) {
+		.search-container {
+			width: 11rem;
+		}
+
+		.search-container label {
+			text-align: right;
+			padding: 0 1.6rem 0 0;
+		}
+
+		.search-container span {
+			display: none;
+		}
+
+		.search-container input {
+			border-radius: 1.6rem;
+		}
+
+		/* we're using media query as an imperfect proxy for mobile/desktop */
+		.search-container kbd {
+			display: inline;
+		}
+	}
+
+	@media (min-width: 960px) {
+		.search-container {
+			width: 100%;
+		}
+
+		.search-container label {
+			text-align: center;
+		}
+
+		.search-container span {
+			display: inline;
+		}
+	}
+</style>
diff --git a/sites/kit.svelte.dev/src/lib/search/SearchBox.svelte b/sites/kit.svelte.dev/src/lib/search/SearchBox.svelte
new file mode 100644
index 000000000000..e5377b12c5ff
--- /dev/null
+++ b/sites/kit.svelte.dev/src/lib/search/SearchBox.svelte
@@ -0,0 +1,441 @@
+<script>
+	import { onMount } from 'svelte';
+	import { Icon } from '@sveltejs/site-kit';
+	import flexsearch from 'flexsearch';
+	import { afterNavigate } from '$app/navigation';
+	import { searching, query, recent } from './stores.js';
+	import { focusable_children, trap } from '../actions/focus.js';
+
+	let modal;
+
+	let results = [];
+	let backspace_pressed;
+
+	let index;
+	let lookup;
+
+	onMount(async () => {
+		const response = await fetch('/content.json');
+		const { blocks } = await response.json();
+
+		index = new flexsearch.Index({
+			tokenize: 'forward'
+		});
+
+		lookup = new Map();
+
+		let time = Date.now();
+		for (const block of blocks) {
+			const title = block.breadcrumbs[block.breadcrumbs.length - 1];
+			lookup.set(block.href, {
+				title,
+				href: block.href,
+				breadcrumbs: block.breadcrumbs.slice(0, -1),
+				content: block.content
+			});
+			index.add(block.href, `${title} ${block.content}`);
+
+			// poor man's way of preventing blocking
+			if (Date.now() - time > 25) {
+				await new Promise((f) => setTimeout(f, 0));
+				time = Date.now();
+			}
+		}
+
+		update();
+	});
+
+	afterNavigate(() => {
+		// TODO this also needs to apply when only the hash changes
+		// (should before/afterNavigate fire at that time? unclear)
+		close();
+	});
+
+	function close() {
+		$searching = false;
+		document.body.focus();
+	}
+
+	function update() {
+		results = (index ? index.search($query) : []).map((href) => lookup.get(href));
+	}
+
+	function escape(text) {
+		return text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+	}
+
+	function excerpt(content, query) {
+		const index = content.toLowerCase().indexOf(query.toLowerCase());
+		if (index === -1) {
+			return content.slice(0, 100);
+		}
+
+		const prefix = index > 20 ? `…${content.slice(index - 15, index)}` : content.slice(0, index);
+		const suffix = content.slice(
+			index + query.length,
+			index + query.length + (80 - (prefix.length + query.length))
+		);
+
+		return (
+			escape(prefix) +
+			`<mark>${escape(content.slice(index, index + query.length))}</mark>` +
+			escape(suffix)
+		);
+	}
+
+	/** @param {string} href */
+	function navigate(href) {
+		$recent = [href, ...$recent.filter((x) => x !== href)];
+		close();
+	}
+
+	$: if ($searching) {
+		update();
+		document.body.style.position = 'fixed';
+		document.body.style.top = `-${window.scrollY}px`;
+	} else {
+		const scroll = document.body.style.top;
+		document.body.style.position = '';
+		document.body.style.top = '';
+		window.scrollTo(0, -parseInt(scroll || '0'));
+	}
+
+	$: recent_searches = lookup ? $recent.map((href) => lookup.get(href)).filter(Boolean) : [];
+</script>
+
+<svelte:window
+	on:keydown={(e) => {
+		if (e.code === 'KeyK' && (navigator.platform === 'MacIntel' ? e.metaKey : e.ctrlKey)) {
+			e.preventDefault();
+			$query = '';
+			$searching = !$searching;
+		}
+
+		if (e.code === 'Escape') {
+			close();
+		}
+	}}
+/>
+
+{#if $searching && index}
+	<div class="modal-background" on:click={close} />
+
+	<div
+		bind:this={modal}
+		class="modal"
+		on:keydown={(e) => {
+			if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+				e.preventDefault();
+				const group = focusable_children(e.currentTarget);
+
+				// when using arrow keys (as opposed to tab), don't focus buttons
+				const selector = 'a, input';
+
+				if (e.key === 'ArrowDown') {
+					group.next(selector);
+				} else {
+					group.prev(selector);
+				}
+			}
+		}}
+		use:trap
+	>
+		<div class="search-box">
+			<!-- svelte-ignore a11y-autofocus -->
+			<input
+				autofocus
+				on:keydown={(e) => {
+					if (e.key === 'Enter') {
+						if (results.length > 0) {
+							modal.querySelector('a').click();
+						}
+					}
+
+					// ideally, opening the modal would create a history entry that we
+					// could use with browser back/forward buttons — this would be the
+					// best way to allow people to close the modal on mobile, for
+					// example. That's a little tricky to do right now — need to add
+					// new APIs to SvelteKit — but in the meantime we can close the
+					// modal when the backspace key is pressed. we _don't_ want that
+					// to happen when the backspace keydown fires repeatedly, so we
+					// track whether it was already pressed or not. (Sadly this
+					// doesn't work on mobile, longpress will close the modal)
+					if (e.key === 'Backspace') {
+						if ($query === '' && !backspace_pressed) {
+							close();
+						}
+
+						backspace_pressed = true;
+					}
+				}}
+				on:keyup={(e) => {
+					if (e.key === 'Backspace') {
+						backspace_pressed = false;
+					}
+				}}
+				on:input={(e) => {
+					$query = e.target.value;
+					update();
+				}}
+				value={$query}
+				placeholder="Search"
+				aria-describedby="search-description"
+			/>
+
+			<button aria-label="Close" on:click={close}>
+				<Icon name="close" />
+			</button>
+
+			<span id="search-description" class="visually-hidden">Results will update as you type</span>
+
+			<div class="results">
+				{#if $query}
+					{#if results.length > 0}
+						<ul class="results">
+							{#each results as result, i}
+								<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+								<li>
+									<a on:click={() => navigate(result.href)} href={result.href}>
+										<small>{result.breadcrumbs.join('/')}</small>
+										<strong>{@html excerpt(result.title, $query)}</strong>
+										<span>{@html excerpt(result.content, $query)}</span>
+									</a>
+								</li>
+							{/each}
+						</ul>
+					{:else}
+						<p class="info">No results</p>
+					{/if}
+				{:else}
+					<h2 class="info">{recent_searches.length ? 'Recent searches' : 'No recent searches'}</h2>
+					<ul>
+						{#each recent_searches as search, i}
+							<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+							<li class="recent">
+								<a on:click={() => navigate(search.href)} href={search.href}>
+									<small>{search.breadcrumbs.join('/')}</small>
+									<strong>{search.title}</strong>
+								</a>
+
+								<button
+									aria-label="Delete"
+									on:click={(e) => {
+										$recent = $recent.filter((href) => href !== search.href);
+										e.stopPropagation();
+										e.preventDefault();
+									}}
+								>
+									<Icon name="delete" />
+								</button>
+							</li>
+						{/each}
+					</ul>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<div aria-live="assertive">
+	{#if $searching && $query && results.length === 0}
+		<p>No results</p>
+	{/if}
+</div>
+
+<style>
+	input {
+		font-family: inherit;
+		font-size: 1.6rem;
+		width: 100%;
+		padding: 1rem 6rem 0.5rem 1rem;
+		height: 5rem;
+		border: none;
+		border-bottom: 1px solid #eee;
+		font-weight: 600;
+	}
+
+	input::selection {
+		background-color: rgba(255, 255, 255, 0.4);
+	}
+
+	input:focus-visible {
+		background: var(--second);
+		color: white;
+		outline: none;
+	}
+
+	button[aria-label='Close'] {
+		--size: 2rem;
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 5rem;
+		height: 5rem;
+		background: none;
+		color: var(--text);
+	}
+
+	button[aria-label='Close']:focus-visible {
+		background: var(--second);
+		color: white;
+		outline: none;
+	}
+
+	input:focus-visible + button[aria-label='Close'] {
+		color: white;
+	}
+
+	.modal-background,
+	.modal {
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 9999;
+	}
+
+	.modal-background {
+		background: rgba(255, 255, 255, 0.7);
+	}
+
+	.modal {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		pointer-events: none;
+	}
+
+	.search-box {
+		position: relative;
+		width: calc(100vw - 2rem);
+		height: calc(100% - 2rem);
+		max-width: 50rem;
+		max-height: 50rem;
+		background: white;
+		filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
+		border-radius: var(--border-r);
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		pointer-events: all;
+	}
+
+	.results {
+		flex: 1;
+		overflow: auto;
+	}
+
+	ul {
+		margin: 0;
+	}
+
+	li {
+		position: relative;
+		list-style: none;
+		margin: 0;
+	}
+
+	.info {
+		padding: 1rem 1rem 0 1rem;
+		font-size: 1.2rem;
+		font-weight: normal;
+		text-transform: uppercase;
+	}
+
+	a {
+		display: block;
+		text-decoration: none;
+		line-height: 1;
+		padding: 1rem;
+	}
+
+	a:hover {
+		background: #eee;
+	}
+
+	a:focus {
+		background: var(--second);
+		color: white;
+		outline: none;
+	}
+
+	a small,
+	a strong,
+	a span {
+		display: block;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		line-height: 1;
+	}
+
+	a small {
+		font-size: 1rem;
+		text-transform: uppercase;
+		font-weight: 600;
+		color: #999;
+	}
+
+	a strong {
+		font-size: 1.6rem;
+		color: var(--text);
+		margin: 0.4rem 0;
+	}
+
+	a span {
+		font-size: 1.2rem;
+		color: #999;
+	}
+
+	a span :global(mark) {
+		background: none;
+		color: #111;
+	}
+
+	a:focus small,
+	a:focus span {
+		color: rgba(255, 255, 255, 0.6);
+	}
+
+	a:focus strong {
+		color: white;
+	}
+
+	a:focus span :global(mark) {
+		color: white;
+	}
+
+	a strong :global(mark) {
+		background: var(--second);
+		color: white;
+		text-decoration: none;
+		border-radius: 1px;
+	}
+
+	button[aria-label='Delete'] {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 5rem;
+		height: 100%;
+		color: var(--text);
+		opacity: 0.1;
+	}
+
+	a:focus + [aria-label='Delete'] {
+		color: white;
+	}
+
+	button[aria-label='Delete']:hover {
+		opacity: 1;
+		outline: none;
+	}
+
+	button[aria-label='Delete']:focus-visible {
+		background: var(--second);
+		color: white;
+		opacity: 1;
+		outline: none;
+	}
+</style>
diff --git a/sites/kit.svelte.dev/src/lib/search/stores.js b/sites/kit.svelte.dev/src/lib/search/stores.js
new file mode 100644
index 000000000000..cf41f6eea876
--- /dev/null
+++ b/sites/kit.svelte.dev/src/lib/search/stores.js
@@ -0,0 +1,31 @@
+import { writable } from 'svelte/store';
+
+export const searching = writable(false);
+export const query = writable('');
+
+/**
+ * @param {string} key
+ * @param {any} fallback
+ */
+function storable(key, fallback) {
+	try {
+		let value = key in localStorage ? JSON.parse(localStorage[key]) : fallback;
+
+		const store = writable(value);
+
+		const set = (new_value) => {
+			store.set((value = new_value));
+			localStorage[key] = JSON.stringify(value);
+		};
+
+		return {
+			subscribe: store.subscribe,
+			set,
+			update: (fn) => set(fn(value))
+		};
+	} catch {
+		return writable(fallback);
+	}
+}
+
+export const recent = storable('recent_searches', []);
diff --git a/sites/kit.svelte.dev/src/routes/__layout.svelte b/sites/kit.svelte.dev/src/routes/__layout.svelte
index 81e30f01667e..10cc98941545 100644
--- a/sites/kit.svelte.dev/src/routes/__layout.svelte
+++ b/sites/kit.svelte.dev/src/routes/__layout.svelte
@@ -1,7 +1,10 @@
 <script>
 	import '@sveltejs/site-kit/base.css';
+	import { browser } from '$app/env';
 	import { page, navigating } from '$app/stores';
 	import { Icon, Icons, Nav, NavItem, PreloadingIndicator, SkipLink } from '@sveltejs/site-kit';
+	import Search from '$lib/search/Search.svelte';
+	import SearchBox from '$lib/search/SearchBox.svelte';
 </script>
 
 <Icons />
@@ -13,12 +16,20 @@
 <SkipLink href="#main" />
 <Nav {page} logo="/images/svelte-kit-horizontal.svg">
 	<svelte:fragment slot="nav-center">
-		<NavItem href="/docs">Docs</NavItem>
-		<NavItem href="/faq">FAQ</NavItem>
-		<NavItem href="/migrating">Migrating</NavItem>
+		{#if browser}
+			<!-- the <Nav> component renders this content inside a <ul>, so
+				 we need to wrap it in an <li>. TODO if we adopt this design
+				 on other sites, change <Nav> so we don't need to do this -->
+			<li><Search /></li>
+		{/if}
 	</svelte:fragment>
 
 	<svelte:fragment slot="nav-right">
+		<NavItem href="/docs">Docs</NavItem>
+		<NavItem href="/faq">FAQ</NavItem>
+
+		<li aria-hidden="true"><span class="separator" /></li>
+
 		<NavItem external="https://svelte.dev">Svelte</NavItem>
 
 		<NavItem external="https://svelte.dev/chat" title="Discord Chat">
@@ -35,6 +46,10 @@
 
 <main id="main">
 	<slot />
+
+	{#if browser}
+		<SearchBox />
+	{/if}
 </main>
 
 <style>
@@ -54,6 +69,15 @@
 		display: none;
 	}
 
+	/* duplicating content from <Nav> — bit hacky but will do for now */
+	.separator {
+		display: block;
+		position: relative;
+		height: 1px;
+		margin: 0.5rem 0;
+		background: radial-gradient(circle at center, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
+	}
+
 	@media (min-width: 800px) {
 		.small {
 			display: none;
@@ -62,5 +86,34 @@
 		.large {
 			display: inline;
 		}
+
+		.separator {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: none;
+			height: 100%;
+			margin: 0;
+			border: none;
+			text-align: center;
+		}
+
+		.separator::before {
+			content: '•';
+			margin: 0 0.3rem;
+			color: #ccc;
+		}
+	}
+
+	/* this is an unfortunate hack, but necessary to temporarily avoid
+	   breaking changes to site-kit */
+	:global(ul.external) {
+		inline-size: 40rem !important;
+	}
+
+	@media (min-width: 960px) {
+		:global(ul.external) {
+			inline-size: 30rem !important;
+		}
 	}
 </style>
diff --git a/sites/kit.svelte.dev/src/routes/content.json.js b/sites/kit.svelte.dev/src/routes/content.json.js
new file mode 100644
index 000000000000..443bba0e98e6
--- /dev/null
+++ b/sites/kit.svelte.dev/src/routes/content.json.js
@@ -0,0 +1,121 @@
+import fs from 'fs';
+import { extract_frontmatter, transform } from '$lib/docs/markdown';
+import { slugify } from '../lib/docs';
+
+const categories = [
+	{
+		slug: 'docs',
+		label: null,
+		href: (parts) =>
+			parts.length > 1 ? `/docs/${parts[0]}#${parts.slice(1).join('-')}` : `/docs/${parts[0]}`
+	},
+	{
+		slug: 'faq',
+		label: 'FAQ',
+		href: (parts) => `/faq#${parts.join('-')}`
+	}
+];
+
+export function get() {
+	const blocks = [];
+
+	for (const category of categories) {
+		const breadcrumbs = category.label ? [category.label] : [];
+
+		for (const file of fs.readdirSync(`../../documentation/${category.slug}`)) {
+			const match = /\d{2}-(.+)\.md/.exec(file);
+			if (!match) continue;
+
+			const slug = match[1];
+
+			const filepath = `../../documentation/${category.slug}/${file}`;
+			const markdown = fs.readFileSync(filepath, 'utf-8');
+
+			const { body, metadata } = extract_frontmatter(markdown);
+
+			const sections = body.trim().split(/^### /m);
+
+			const intro = sections.shift().trim();
+
+			blocks.push({
+				breadcrumbs: [...breadcrumbs, metadata.title],
+				href: category.href([slug]),
+				content: plaintext(intro)
+			});
+
+			for (const section of sections) {
+				const lines = section.split('\n');
+				const h3 = lines.shift();
+				const content = lines.join('\n');
+
+				const subsections = content.trim().split('#### ');
+
+				const intro = subsections.shift().trim();
+
+				blocks.push({
+					breadcrumbs: [...breadcrumbs, metadata.title, h3],
+					href: category.href([slug, slugify(h3)]),
+					content: plaintext(intro)
+				});
+
+				for (const subsection of subsections) {
+					const lines = subsection.split('\n');
+					const h4 = lines.shift();
+
+					blocks.push({
+						breadcrumbs: [...breadcrumbs, metadata.title, h3, h4],
+						href: category.href([slug, slugify(h3), slugify(h4)]),
+						content: plaintext(lines.join('\n').trim())
+					});
+				}
+			}
+		}
+	}
+
+	return {
+		body: {
+			blocks
+		}
+	};
+}
+
+function plaintext(markdown) {
+	const block = (text) => `${text}\n`;
+	const inline = (text) => text;
+
+	return transform(markdown, {
+		code: block,
+		blockquote: block,
+		html: () => {
+			throw new Error('TODO implement HTML');
+		},
+		hr: () => '',
+		list: block,
+		listitem: block,
+		checkbox: block,
+		paragraph: (text) => `${text}\n\n`,
+		table: () => {
+			throw new Error('TODO implement tables');
+		},
+		tablerow: () => {
+			throw new Error('TODO implement tables');
+		},
+		tablecell: () => {
+			throw new Error('TODO implement tables');
+		},
+		strong: inline,
+		em: inline,
+		codespan: inline,
+		br: () => '',
+		del: inline,
+		link: (href, title, text) => text,
+		image: (href, title, text) => text,
+		text: inline
+	})
+		.replace(/&lt;/g, '<')
+		.replace(/&gt;/g, '>')
+		.replace(/&#(\d+);/g, (match, code) => {
+			return String.fromCharCode(code);
+		})
+		.trim();
+}
diff --git a/sites/kit.svelte.dev/src/routes/docs/[slug].json.js b/sites/kit.svelte.dev/src/routes/docs/[slug].json.js
new file mode 100644
index 000000000000..c6f237b3ae90
--- /dev/null
+++ b/sites/kit.svelte.dev/src/routes/docs/[slug].json.js
@@ -0,0 +1,18 @@
+import { read } from '$lib/docs';
+
+/** @type {import('@sveltejs/kit').RequestHandler} */
+export function get({ params }) {
+	const { prev, next, section } = read('docs', params.slug);
+
+	return {
+		body: {
+			prev,
+			next,
+			section: {
+				file: section.file,
+				title: section.title,
+				content: section.content
+			}
+		}
+	};
+}
diff --git a/sites/kit.svelte.dev/src/routes/docs/[slug].svelte b/sites/kit.svelte.dev/src/routes/docs/[slug].svelte
new file mode 100644
index 000000000000..111741589a60
--- /dev/null
+++ b/sites/kit.svelte.dev/src/routes/docs/[slug].svelte
@@ -0,0 +1,110 @@
+<script context="module">
+	export const prerender = true;
+
+	// TODO should use a shadow endpoint instead, need to fix a bug first
+	/** @type {import('@sveltejs/kit').Load} */
+	export async function load({ fetch, params }) {
+		const res = await fetch(`/docs/${params.slug}.json`);
+		const { prev, next, section } = await res.json();
+
+		return {
+			props: {
+				prev,
+				next,
+				section
+			}
+		};
+	}
+</script>
+
+<script>
+	import { Icon } from '@sveltejs/site-kit';
+	import '@sveltejs/site-kit/code.css';
+	import './_/docs.css';
+
+	export let prev;
+	export let next;
+	export let section;
+</script>
+
+<svelte:head>
+	<title>{section.title} • Docs • SvelteKit</title>
+
+	<meta name="twitter:title" content="SvelteKit docs" />
+	<meta name="twitter:description" content="{section.title} • SvelteKit documentation" />
+	<meta name="Description" content="{section.title} • SvelteKit documentation" />
+</svelte:head>
+
+<div class="content listify">
+	<h1>{section.title}</h1>
+
+	<a class="edit" href="https://github.com/sveltejs/kit/edit/master/documentation/{section.file}">
+		<Icon size={50} name="edit" /> Edit this page on GitHub
+	</a>
+
+	<section>
+		{@html section.content}
+	</section>
+
+	<div class="controls">
+		<div>
+			<span class:faded={!prev}>previous</span>
+			{#if prev}
+				<a href="/docs/{prev.slug}">{prev.title}</a>
+			{/if}
+		</div>
+
+		<div>
+			<span class:faded={!next}>next</span>
+			{#if next}
+				<a href="/docs/{next.slug}">{next.title}</a>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.edit {
+		position: relative;
+		font-size: 1.4rem;
+		line-height: 1;
+		z-index: 2;
+	}
+
+	.edit :global(.icon) {
+		position: relative;
+		top: -0.1rem;
+		left: 0.3rem;
+		inline-size: 1.4rem;
+		block-size: 1.4rem;
+		margin-inline-end: 0.5rem;
+	}
+
+	.controls {
+		max-width: var(--linemax);
+		border-top: 1px solid #eee;
+		padding: 1rem 0 0 0;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+	}
+
+	.controls > :first-child {
+		text-align: left;
+	}
+
+	.controls > :last-child {
+		text-align: right;
+	}
+
+	.controls span {
+		display: block;
+		font-size: 1.2rem;
+		text-transform: uppercase;
+		font-weight: 600;
+		color: var(--second);
+	}
+
+	.controls span.faded {
+		opacity: 0.4;
+	}
+</style>
diff --git a/sites/kit.svelte.dev/src/routes/docs/_/docs.css b/sites/kit.svelte.dev/src/routes/docs/_/docs.css
new file mode 100644
index 000000000000..2788643d6ef9
--- /dev/null
+++ b/sites/kit.svelte.dev/src/routes/docs/_/docs.css
@@ -0,0 +1,233 @@
+.content {
+	inline-size: 100%;
+	margin: 0;
+	padding-inline: var(--side-nav);
+	padding-block: var(--top-offset);
+	tab-size: 2;
+	-moz-tab-size: 2;
+}
+
+@media (min-width: 832px) {
+	/* can't use vars in @media :( */
+	.content {
+		padding-inline-start: calc(var(--sidebar-w) + var(--side-nav));
+	}
+}
+
+.content h1 {
+	font-size: 3.2rem;
+	margin: 0;
+}
+
+.content h2 {
+	margin-block-start: 8rem;
+	padding-inline: 0.2rem 1.6rem;
+	padding-block: 2rem 4rem;
+	border-block-start: 2px solid #ddd;
+	line-height: 1;
+	font-size: var(--h3);
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+}
+
+.content section:first-of-type > h2 {
+	margin-block-start: 0;
+}
+
+.content h4 {
+	margin-block: 2em 1em;
+}
+
+.content .offset-anchor {
+	position: relative;
+	display: block;
+	inset-block-start: calc(-1 * var(--top-offset));
+	inline-size: 0;
+	block-size: 0;
+}
+
+.content .anchor {
+	position: absolute;
+	display: block;
+	background: url(@sveltejs/site-kit/icons/link.svg) 0 50% no-repeat;
+	background-size: 1em 1em;
+	inline-size: 1.4em;
+	block-size: 1em;
+	inset-inline-start: -1.3em;
+	inset-block-end: 0.3rem;
+	opacity: 0;
+	transition: opacity 0.2s;
+}
+
+.content h2 .anchor {
+	inset-block-end: 4rem;
+}
+
+.content h3 .anchor {
+	inset-block-end: 1rem;
+}
+
+@media (min-width: 400px) {
+	.content h1 {
+		font-size: 4.2rem;
+	}
+}
+
+@media (min-width: 768px) {
+	.content h1 {
+		font-size: 5.4rem;
+	}
+
+	.content .anchor:focus,
+	.content h2:hover .anchor,
+	.content h3:hover .anchor,
+	.content h4:hover .anchor,
+	.content h5:hover .anchor,
+	.content h6:hover .anchor {
+		opacity: 1;
+	}
+}
+
+.content h3,
+.content h3 > code {
+	margin-inline: 0;
+	margin-block: 6.4rem 1rem;
+	padding-block-end: 1rem;
+	color: var(--text);
+	max-inline-size: var(--linemax);
+	border-block-end: 1px solid #ddd;
+	background: transparent;
+	line-height: 1;
+}
+
+.content h3:first-child {
+	border: none;
+	margin: 0;
+}
+
+/* avoid doubled border-top */
+.content h3 > code {
+	border-radius: 0 0 0 0;
+	border: none;
+	font-size: inherit;
+}
+
+.content h4,
+.content h4 > code {
+	font-family: inherit;
+	font-weight: 600;
+	font-size: 2.4rem;
+	color: var(--second);
+	margin-inline: 0;
+	margin-block: 6.4rem 1.6rem;
+	padding-inline-start: 0;
+	background: transparent;
+	line-height: 1;
+	padding-block-start: 0;
+	inset-block-start: 0;
+}
+
+.content h4::before {
+	display: block;
+	content: ' ';
+	block-size: var(--nav-h);
+	margin-block-start: calc(-1 * var(--nav-h));
+}
+
+.content h4 > em {
+	opacity: 0.7;
+}
+
+.content h5 {
+	font-size: 2.4rem;
+	margin-block: 2em 0.5em;
+}
+
+.content code {
+	padding: 0.4rem;
+	margin-inline: 0.2rem;
+	margin-block: 0;
+	inset-block-start: -0.1rem;
+	background: var(--back-api);
+}
+
+.content pre code {
+	padding: 0;
+	margin: 0;
+	inset-block-start: 0;
+	background: transparent;
+}
+
+.content pre {
+	margin: 0;
+	margin-block-end: 2rem;
+	inline-size: 100%;
+	max-inline-size: var(--linemax);
+	padding: 1rem;
+	box-shadow: inset 1px 1px 6px hsla(205.7, 63.6%, 30.8%, 0.06);
+}
+
+.content table {
+	margin: 0;
+	margin-block-end: 2em;
+}
+
+.content section p {
+	max-inline-size: var(--linemax);
+	margin-block: 1em;
+}
+
+.content small {
+	font-size: var(--h5);
+	float: inline-end;
+	pointer-events: all;
+	color: var(--prime);
+	cursor: pointer;
+}
+
+.content blockquote {
+	color: rgba(0, 0, 0, 0.7);
+	background-color: rgba(255, 62, 0, 0.1);
+	border-inline-start: 4px solid #ff3e00;
+	padding: 1rem;
+}
+
+.content blockquote :first-child {
+	margin-block-start: 0;
+}
+
+.content blockquote :last-child {
+	margin-block-end: 0;
+}
+
+.content blockquote code {
+	background: #d5e2ea;
+}
+
+.content section a:hover {
+	text-decoration: underline;
+}
+
+.content section a code {
+	color: inherit;
+	background: rgba(255, 62, 0, 0.1) !important;
+}
+
+/* this replaces the offset-anchor hack, which we should remove from this CSS
+   once https://github.com/sveltejs/action-deploy-docs/issues/1 is closed */
+.content h2[id],
+.content h3[id] {
+	padding-block-start: 10rem;
+	margin-block-start: -2rem;
+	border-block-start: none;
+}
+
+.content h2[id]::after {
+	content: '';
+	position: absolute;
+	inline-size: 100%;
+	inset-inline-start: 0;
+	inset-block-start: 8rem;
+	block-size: 2px;
+	background: #ddd;
+}
diff --git a/sites/kit.svelte.dev/src/routes/docs/__layout.svelte b/sites/kit.svelte.dev/src/routes/docs/__layout.svelte
new file mode 100644
index 000000000000..a1d3286bd1d8
--- /dev/null
+++ b/sites/kit.svelte.dev/src/routes/docs/__layout.svelte
@@ -0,0 +1,60 @@
+<script context="module">
+	export const prerender = true;
+
+	export async function load({ fetch }) {
+		const res = await fetch('/docs.json');
+
+		return {
+			props: {
+				sections: await res.json()
+			}
+		};
+	}
+</script>
+
+<script>
+	import Contents from '$lib/docs/Contents.svelte';
+
+	export let sections;
+
+	$: contents = sections.map((section) => ({
+		path: `/docs/${section.slug}`,
+		title: section.title,
+		sections: section.sections.map((subsection) => ({
+			path: `/docs/${section.slug}#${subsection.slug}`,
+			title: subsection.title,
+			sections: subsection.sections.map((subsection) => ({
+				path: `/docs/${section.slug}#${subsection.slug}`,
+				title: subsection.title
+			}))
+		}))
+	}));
+</script>
+
+<div class="grid">
+	<slot />
+	<div class="toc-container">
+		<Contents {contents} />
+	</div>
+</div>
+
+<style>
+	.grid {
+	}
+
+	@media (min-width: 832px) {
+		.grid {
+			grid-template-rows: unset;
+			grid-template-columns: var(--sidebar-w) 1fr;
+		}
+
+		.toc-container {
+			width: var(--sidebar-w);
+			height: 100vh;
+			overflow: auto;
+			position: fixed;
+			inset-inline-start: 0;
+			inset-block-start: 0;
+		}
+	}
+</style>
diff --git a/sites/kit.svelte.dev/src/routes/docs/index.js b/sites/kit.svelte.dev/src/routes/docs/index.js
deleted file mode 100644
index e9b82fae9a22..000000000000
--- a/sites/kit.svelte.dev/src/routes/docs/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { read } from '$lib/docs';
-
-export function get() {
-	return {
-		body: {
-			sections: read('docs')
-		}
-	};
-}
diff --git a/sites/kit.svelte.dev/src/routes/docs/index.json.js b/sites/kit.svelte.dev/src/routes/docs/index.json.js
new file mode 100644
index 000000000000..50e643ec3b0a
--- /dev/null
+++ b/sites/kit.svelte.dev/src/routes/docs/index.json.js
@@ -0,0 +1,7 @@
+import { read_all } from '$lib/docs';
+
+export function get() {
+	return {
+		body: read_all('docs').map(({ slug, title, sections }) => ({ slug, title, sections }))
+	};
+}
diff --git a/sites/kit.svelte.dev/src/routes/docs/index.svelte b/sites/kit.svelte.dev/src/routes/docs/index.svelte
index be4338063dd2..c117cf177c11 100644
--- a/sites/kit.svelte.dev/src/routes/docs/index.svelte
+++ b/sites/kit.svelte.dev/src/routes/docs/index.svelte
@@ -1,46 +1,11 @@
 <script context="module">
 	export const prerender = true;
-</script>
-
-<script>
-	import { Contents, Main, Section } from '@sveltejs/site-kit/docs';
-
-	export let sections;
 
-	let path;
-
-	$: contents = sections.map((section) => ({
-		path: `/docs#${section.slug}`,
-		title: section.title,
-		sections: section.sections.map((subsection) => ({
-			path: `/docs#${subsection.slug}`,
-			title: subsection.title,
-			sections: subsection.sections.map((subsection) => ({
-				path: `/docs#${subsection.slug}`,
-				title: subsection.title
-			}))
-		}))
-	}));
+	/** @type {import('@sveltejs/kit').Load} */
+	export function load() {
+		return {
+			status: 307,
+			redirect: '/docs/introduction'
+		};
+	}
 </script>
-
-<svelte:head>
-	<title>Docs • SvelteKit</title>
-
-	<meta name="twitter:title" content="SvelteKit docs" />
-	<meta name="twitter:description" content="Complete documentation for SvelteKit" />
-	<meta name="Description" content="Complete documentation for SvelteKit" />
-</svelte:head>
-
-<Main bind:path>
-	<h1>Documentation</h1>
-
-	{#each sections as section}
-		<Section
-			{section}
-			edit="https://github.com/sveltejs/kit/edit/master/documentation/docs/{section.file}"
-			base="/docs"
-		/>
-	{/each}
-</Main>
-
-<Contents {contents} {path} />
diff --git a/sites/kit.svelte.dev/src/routes/faq/index.js b/sites/kit.svelte.dev/src/routes/faq/index.js
index 01666eb3e9d5..4f2525793f3a 100644
--- a/sites/kit.svelte.dev/src/routes/faq/index.js
+++ b/sites/kit.svelte.dev/src/routes/faq/index.js
@@ -1,9 +1,9 @@
-import { read } from '$lib/docs';
+import { read_all } from '$lib/docs';
 
 export function get() {
 	return {
 		body: {
-			sections: read('faq')
+			sections: read_all('faq')
 		}
 	};
 }
diff --git a/sites/kit.svelte.dev/src/routes/faq/index.svelte b/sites/kit.svelte.dev/src/routes/faq/index.svelte
index 6f6a377bd1dc..3840d03d74b7 100644
--- a/sites/kit.svelte.dev/src/routes/faq/index.svelte
+++ b/sites/kit.svelte.dev/src/routes/faq/index.svelte
@@ -20,10 +20,9 @@
 	<h1>Frequently Asked Questions</h1>
 	{#each sections as faq}
 		<article class="faq">
-			<h2>
-				<span id={faq.slug} class="offset-anchor" />
+			<h2 id={faq.slug}>
 				{faq.title}
-				<Permalink href="/faq#{faq.slug}" />
+				<Permalink href="#{faq.slug}" />
 			</h2>
 			{@html faq.content}
 		</article>
@@ -65,14 +64,6 @@
 		font-size: 0.8rem;
 	}
 
-	.faqs :global(.offset-anchor) {
-		position: relative;
-		display: block;
-		inset-block-start: calc(-1 * var(--top-offset));
-		inline-size: 0;
-		block-size: 0;
-	}
-
 	.faqs :global(.anchor) {
 		position: absolute;
 		display: block;
@@ -87,7 +78,7 @@
 
 	.faqs :global(h2 > .anchor),
 	.faqs :global(h3 > .anchor) {
-		inset-block-start: 0.2em;
+		inset-block-end: 0.3em;
 	}
 
 	@media (min-width: 768px) {
@@ -102,12 +93,13 @@
 
 		.faqs :global(h5) :global(.anchor),
 		.faqs :global(h6) :global(.anchor) {
-			inset-block-start: 0.25em;
+			inset-block-end: 0.25em;
 		}
 	}
 
 	h2 {
-		margin-block: 3.5rem 1rem;
+		margin-block: -4rem 1rem;
+		padding-block-start: 10rem;
 		padding-block-end: 0.2rem;
 		color: var(--text);
 		/* max-inline-size: 24em; */
@@ -129,6 +121,16 @@
 		inset-block-start: 0;
 	}
 
+	.faqs :global(a) {
+		position: relative;
+		z-index: 2;
+	}
+
+	/* TODO this page must be missing some styles from somewhere. the whole thing needs tidying up */
+	.faqs :global(a) :global(code) {
+		color: var(--prime);
+	}
+
 	.faq:first-child {
 		margin: 0;
 		margin-block: 2rem;
@@ -145,10 +147,6 @@
 		margin-inline-start: 3.2rem;
 	}
 
-	.faqs :global(.anchor) {
-		inset-block-start: calc((var(--h3) - 24px) / 2);
-	}
-
 	@media (max-width: 768px) {
 		.faqs :global(.anchor) {
 			transform: scale(0.6);
diff --git a/sites/kit.svelte.dev/src/routes/migrating/index.js b/sites/kit.svelte.dev/src/routes/migrating/index.js
deleted file mode 100644
index 858fcbd83b7b..000000000000
--- a/sites/kit.svelte.dev/src/routes/migrating/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { read } from '$lib/docs';
-
-export function get() {
-	return {
-		body: {
-			sections: read('migrating')
-		}
-	};
-}
diff --git a/sites/kit.svelte.dev/src/routes/migrating/index.svelte b/sites/kit.svelte.dev/src/routes/migrating/index.svelte
deleted file mode 100644
index e5db8b38af20..000000000000
--- a/sites/kit.svelte.dev/src/routes/migrating/index.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script context="module">
-	export const prerender = true;
-</script>
-
-<script>
-	import { Contents, Main, Section } from '@sveltejs/site-kit/docs';
-
-	export let sections;
-
-	let path;
-
-	$: contents = sections.map((section) => ({
-		path: `/migrating#${section.slug}`,
-		title: section.title,
-		sections: section.sections.map((subsection) => ({
-			path: `/migrating#${subsection.slug}`,
-			title: subsection.title,
-			sections: subsection.sections.map((subsection) => ({
-				path: `/migrating#${subsection.slug}`,
-				title: subsection.title
-			}))
-		}))
-	}));
-</script>
-
-<svelte:head>
-	<title>Migration • SvelteKit</title>
-
-	<meta name="twitter:title" content="SvelteKit migration guides" />
-	<meta name="twitter:description" content="How to migrate your app from Sapper to SvelteKit" />
-	<meta name="description" content="How to migrate your app from Sapper to SvelteKit" />
-</svelte:head>
-
-<Main bind:path>
-	<h1>Migration</h1>
-
-	{#each sections as section}
-		<Section
-			{section}
-			edit="https://github.com/sveltejs/kit/edit/master/documentation/migrating/{section.file}"
-			base="/docs"
-		/>
-	{/each}
-</Main>
-
-<Contents {contents} {path} />
diff --git a/sites/kit.svelte.dev/svelte.config.js b/sites/kit.svelte.dev/svelte.config.js
index db28d40609ab..6cce1d6cf38d 100644
--- a/sites/kit.svelte.dev/svelte.config.js
+++ b/sites/kit.svelte.dev/svelte.config.js
@@ -2,10 +2,14 @@ import * as path from 'path';
 import adapter from '@sveltejs/adapter-auto';
 import { imagetools } from 'vite-imagetools';
 
-export default {
+const config = {
 	kit: {
 		adapter: adapter(),
 
+		prerender: {
+			entries: ['*', '/content.json']
+		},
+
 		vite: {
 			plugins: [imagetools()],
 
@@ -23,3 +27,5 @@ export default {
 		}
 	}
 };
+
+export default config;
diff --git a/sites/kit.svelte.dev/tsconfig.json b/sites/kit.svelte.dev/tsconfig.json
index 9e58360726b0..290b59f2de95 100644
--- a/sites/kit.svelte.dev/tsconfig.json
+++ b/sites/kit.svelte.dev/tsconfig.json
@@ -1,5 +1,7 @@
 {
 	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
 		"moduleResolution": "node",
 		"target": "es2017",
 		/**
@@ -16,7 +18,11 @@
 		"esModuleInterop": true,
 		"skipLibCheck": true,
 		"forceConsistentCasingInFileNames": true,
-		"baseUrl": "."
+		"baseUrl": ".",
+		"paths": {
+			"$lib": ["./src/lib"],
+			"$lib/*": ["./src/lib/*"]
+		}
 	},
 	"include": ["src/**/*"],
 	"exclude": ["node_modules/*", ".svelte"]