Loading...
+{:then component}
+ Loading...
+{:then component}
+ ` 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`](modules#$lib) instead.
+
+## Pages and layouts
+
+### Renamed files
+
+Routes now are made up of the folder name exclusively to remove ambiguity, the folder names leading up to a `+page.svelte` correspond to the route. See [the routing docs](routing) for an overview. The following shows a old/new comparison:
+
+| Old | New |
+| ------------------------- | ------------------------- |
+| routes/about/index.svelte | routes/about/+page.svelte |
+| routes/about.svelte | routes/about/+page.svelte |
+
+Your custom error page component should be renamed from `_error.svelte` to `+error.svelte`. Any `_layout.svelte` files should likewise be renamed `+layout.svelte`. [Any other files are ignored](routing#other-files).
+
+### Imports
+
+The `goto`, `prefetch` and `prefetchRoutes` imports from `@sapper/app` should be replaced with `goto`, `preloadData` and `preloadCode` imports respectively from [`$app/navigation`](modules#$app-navigation).
+
+The `stores` import from `@sapper/app` should be replaced — see the [Stores](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`](modules#$lib) imports.
+
+### Preload
+
+As before, pages and layouts can export a function that allows data to be loaded before rendering takes place.
+
+This function has been renamed from `preload` to [`load`](load), it now lives in a `+page.js` (or `+layout.js`) next to its `+page.svelte` (or `+layout.svelte`), and its API has changed. Instead of two arguments — `page` and `session` — there is a single `event` argument.
+
+There is no more `this` object, and consequently no `this.fetch`, `this.error` or `this.redirect`. Instead, you can get [`fetch`](load#making-fetch-requests) from the input methods, and both [`error`](load#errors) and [`redirect`](load#redirects) are now thrown.
+
+### Stores
+
+In Sapper, you would get references to provided stores like so:
+
+```js
+// @filename: ambient.d.ts
+declare module '@sapper/app';
+
+// @filename: index.js
+// ---cut---
+import { stores } from '@sapper/app';
+const { preloading, page, session } = stores();
+```
+
+The `page` store still exists; `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`, and `page` directly from [`$app/stores`](modules#$app-stores).
+
+### Routing
+
+Regex routes are no longer supported. Instead, use [advanced route matching](advanced-routing#matching).
+
+### Segments
+
+Previously, layout components received a `segment` prop indicating the child segment. This has been removed; you should use the more flexible `$page.url.pathname` value to derive the segment you're interested in.
+
+### 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, relative URLs are resolved against the current page (or the destination page, for `fetch` URLs in `load` functions) instead. In most cases, it's easier to use root-relative (i.e. starts with `/`) URLs, since their meaning is not context-dependent.
+
+### <a> attributes
+
+- `sapper:prefetch` is now `data-sveltekit-preload-data`
+- `sapper:noscroll` is now `data-sveltekit-noscroll`
+
+## Endpoints
+
+In Sapper, [server routes](routing#server) 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 [integrations](./integrations) for detailed information about integrations.
+
+### HTML minifier
+
+Sapper includes `html-minifier` by default. SvelteKit does not include this, but you can add it as a prod dependency and then use it through a [hook](hooks#server-hooks-handle):
+
+```js
+// @filename: ambient.d.ts
+///
+declare module 'html-minifier';
+
+// @filename: index.js
+// ---cut---
+import { minify } from 'html-minifier';
+import { building } from '$app/environment';
+
+const minification_options = {
+ collapseBooleanAttributes: true,
+ collapseWhitespace: true,
+ conservativeCollapse: true,
+ decodeEntities: true,
+ html5: true,
+ ignoreCustomComments: [/^#/],
+ minifyCSS: true,
+ minifyJS: false,
+ removeAttributeQuotes: true,
+ removeComments: false, // some hydration code needs comments, so leave them in
+ removeOptionalTags: true,
+ removeRedundantAttributes: true,
+ removeScriptTypeAttributes: true,
+ removeStyleLinkTypeAttributes: true,
+ sortAttributes: true,
+ sortClassName: true
+};
+
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+ let page = '';
+
+ return resolve(event, {
+ transformPageChunk: ({ html, done }) => {
+ page += html;
+ if (done) {
+ return building ? minify(page, minification_options) : page;
+ }
+ }
+ });
+}
+```
+
+Note that `prerendering` is `false` when using `vite 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/apps/svelte.dev/content/docs/kit/v01/60-appendix/20-additional-resources.md b/apps/svelte.dev/content/docs/kit/v01/60-appendix/20-additional-resources.md
new file mode 100644
index 0000000000..4877ef9845
--- /dev/null
+++ b/apps/svelte.dev/content/docs/kit/v01/60-appendix/20-additional-resources.md
@@ -0,0 +1,23 @@
+---
+title: Additional resources
+---
+
+## FAQs
+
+Please see the [SvelteKit FAQ](../faq) for solutions to common issues and helpful tips and tricks.
+
+The [Svelte FAQ](https://svelte.dev/faq) and [`vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md) may also be helpful for questions deriving from those libraries.
+
+## Examples
+
+We've written and published a few different SvelteKit sites as examples:
+
+- [`sveltejs/realworld`](https://github.com/sveltejs/realworld) contains an example blog site
+- [The `sites/kit.svelte.dev` directory](https://github.com/sveltejs/kit/tree/master/sites/kit.svelte.dev) contains the code for this site
+- [`sveltejs/sites`](https://github.com/sveltejs/sites) contains the code for [svelte.dev](https://github.com/sveltejs/sites/tree/master/sites/svelte.dev) and for a [HackerNews clone](https://github.com/sveltejs/sites/tree/master/sites/hn.svelte.dev)
+
+SvelteKit users have also published plenty of examples on GitHub, under the [#sveltekit](https://github.com/topics/sveltekit) and [#sveltekit-template](https://github.com/topics/sveltekit-template) topics, as well as on [the Svelte Society site](https://sveltesociety.dev/templates#svelte-kit). Note that these have not been vetted by the maintainers and may not be up to date.
+
+## Support
+
+You can ask for help on [Discord](https://svelte.dev/chat) and [StackOverflow](https://stackoverflow.com/questions/tagged/sveltekit). Please first search for information related to your issue in the FAQ, Google or another search engine, issue tracker, and Discord chat history in order to be respectful of others' time. There are many more people asking questions than answering them, so this will help in allowing the community to grow in a scalable fashion.
diff --git a/apps/svelte.dev/content/docs/kit/v01/60-appendix/20-integrations.md b/apps/svelte.dev/content/docs/kit/v01/60-appendix/20-integrations.md
new file mode 100644
index 0000000000..e433c92da8
--- /dev/null
+++ b/apps/svelte.dev/content/docs/kit/v01/60-appendix/20-integrations.md
@@ -0,0 +1,44 @@
+---
+title: Integrations
+---
+
+## `vitePreprocess`
+
+Including [`vitePreprocess`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) in your project will allow you to use the various flavors of JS and CSS that Vite supports: TypeScript, PostCSS, SCSS, Less, Stylus, and SugarSS. If you set your project up with TypeScript it will be included by default:
+
+```js
+// svelte.config.js
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+ preprocess: [vitePreprocess()]
+};
+```
+
+## Adders
+
+Run `npx svelte-add` to setup many different complex integrations with a single command including:
+- CSS - Tailwind, Bootstrap, Bulma
+- database - Drizzle ORM
+- markdown - mdsvex
+- Storybook
+
+## Directory
+
+See [sveltesociety.dev](https://sveltesociety.dev/) for a full listing of [packages](https://sveltesociety.dev/packages) and [templates](https://sveltesociety.dev/templates) available for use with Svelte and SvelteKit.
+
+## Additional integrations
+
+### `svelte-preprocess`
+
+`svelte-preprocess` has some additional functionality not found in `vitePreprocess` such as support for Pug, Babel, and global styles. However, `vitePreprocess` may be faster and require less configuration, so it is used by default. Note that CoffeeScript is [not supported](https://github.com/sveltejs/kit/issues/2920#issuecomment-996469815) by SvelteKit.
+
+You will need to install `svelte-preprocess` with `npm install --save-dev svelte-preprocess` and [add it to your `svelte.config.js`](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md#with-svelte-config). After that, you will often need to [install the corresponding library](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md) such as `npm install -D sass` or `npm install -D less`.
+
+## Vite plugins
+
+Since SvelteKit projects are built with Vite, you can use Vite plugins to enhance your project. See a list of available plugins at [`vitejs/awesome-vite`](https://github.com/vitejs/awesome-vite?tab=readme-ov-file#plugins).
+
+## Integration FAQs
+
+The SvelteKit FAQ has a [how to do X with SvelteKit](./faq#how-do-i-use-x-with-sveltekit), which may be helpful if you still have questions.
diff --git a/apps/svelte.dev/content/docs/kit/v01/60-appendix/25-debugging.md b/apps/svelte.dev/content/docs/kit/v01/60-appendix/25-debugging.md
new file mode 100644
index 0000000000..f8e04101f3
--- /dev/null
+++ b/apps/svelte.dev/content/docs/kit/v01/60-appendix/25-debugging.md
@@ -0,0 +1,68 @@
+---
+title: Breakpoint Debugging
+---
+
+In addition to the [`@debug`](https://svelte.dev/docs/special-tags#debug) tag, you can also debug Svelte and SvelteKit projects using breakpoints within various tools and development environments. This includes both frontend and backend code.
+
+The following guides assume your JavaScript runtime environment is Node.js.
+
+## Visual Studio Code
+
+With the built-in debug terminal, you can set up breakpoints in source files within VSCode.
+
+1. Open the command palette: `CMD/Ctrl` + `Shift` + `P`.
+2. Find and launch "Debug: JavaScript Debug Terminal".
+3. Start your project using the debug terminal. For example: `npm run dev`.
+4. Set some breakpoints in your client or server-side source code.
+5. Trigger the breakpoint.
+
+### Launch via debug pane
+
+You may alternatively set up a `.vscode/launch.json` in your project. To set one up automatically:
+
+1. Go to the "Run and Debug" pane.
+2. In the "Run" select menu, choose "Node.js...".
+3. Select the "run script" that corresponds to your project, such as "Run script: dev".
+4. Press the "Start debugging" play button, or hit `F5` to begin breakpoint debugging.
+
+Here's an example `launch.json`:
+
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "command": "npm run dev",
+ "name": "Run development server",
+ "request": "launch",
+ "type": "node-terminal"
+ }
+ ]
+}
+```
+
+Further reading:
.
+
+## Other Editors
+
+If you use a different editor, these community guides might be useful for you:
+
+- [WebStorm Svelte: Debug Your Application](https://www.jetbrains.com/help/webstorm/svelte.html#ws_svelte_debug)
+- [Debugging JavaScript Frameworks in Neovim](https://theosteiner.de/debugging-javascript-frameworks-in-neovim)
+
+## Google Chrome and Microsoft Edge Developer Tools
+
+It's possible to debug Node.js applications using a browser-based debugger.
+
+> Note this only works with debugging client-side SvelteKit source maps.
+
+1. Run the `--inspect` flag when starting the Vite server with Node.js. For instance: `NODE_OPTIONS="--inspect" npm run dev`
+2. Open your site in a new tab. Typically at `localhost:5173`.
+3. Open your browser's dev tools, and click on the "Open dedicated DevTools for Node.js" icon near the top-left. It should display the Node.js logo.
+4. Set up breakpoints and debug your application.
+
+You may alternatively open the debugger devtools by navigating to `chrome://inspect` in Google Chrome, or `edge://inspect` in Microsoft Edge.
+
+## References
+
+- [Debugging Node.js](https://nodejs.org/en/learn/getting-started/debugging)
diff --git a/apps/svelte.dev/content/docs/kit/v01/60-appendix/30-glossary.md b/apps/svelte.dev/content/docs/kit/v01/60-appendix/30-glossary.md
new file mode 100644
index 0000000000..ce80e9ef60
--- /dev/null
+++ b/apps/svelte.dev/content/docs/kit/v01/60-appendix/30-glossary.md
@@ -0,0 +1,51 @@
+---
+title: Glossary
+---
+
+The core of SvelteKit provides a highly configurable rendering engine. This section describes some of the terms used when discussing rendering. A reference for setting these options is provided in the documentation above.
+
+## CSR
+
+Client-side rendering (CSR) is the generation of the page contents in the web browser using JavaScript.
+
+In SvelteKit, client-side rendering will be used by default, but you can turn off JavaScript with [the `csr = false` page option](page-options#csr).
+
+## Hydration
+
+Svelte components store some state and update the DOM when the state is updated. When fetching data during SSR, by default SvelteKit will store this data and transmit it to the client along with the server-rendered HTML. The components can then be initialized on the client with that data without having to call the same API endpoints again. Svelte will then check that the DOM is in the expected state and attach event listeners in a process called hydration. Once the components are fully hydrated, they can react to changes to their properties just like any newly created Svelte component.
+
+In SvelteKit, pages will be hydrated by default, but you can turn off JavaScript with [the `csr = false` page option](page-options#csr).
+
+## Prerendering
+
+Prerendering means computing the contents of a page at build time and saving the HTML for display. This approach has the same benefits as traditional server-rendered pages, but avoids recomputing the page for each visitor and so scales nearly for free as the number of visitors increases. The tradeoff is that the build process is more expensive and prerendered content can only be updated by building and deploying a new version of the application.
+
+Not all pages can be prerendered. The basic rule is this: for content to be prerenderable, any two users hitting it directly must get the same content from the server, and the page must not contain [actions](form-actions). Note that you can still prerender content that is loaded based on the page's parameters as long as all users will be seeing the same prerendered content.
+
+Pre-rendered pages are not limited to static content. You can build personalized pages if user-specific data is fetched and rendered client-side. This is subject to the caveat that you will experience the downsides of not doing SSR for that content as discussed above.
+
+In SvelteKit, you can control prerendering with [the `prerender` page option](page-options#prerender) and [`prerender` config](configuration#prerender) in `svelte.config.js`.
+
+## Routing
+
+By default, when you navigate to a new page (by clicking on a link or using the browser's forward or back buttons), SvelteKit will intercept the attempted navigation and handle it instead of allowing the browser to send a request to the server for the destination page. SvelteKit will then update the displayed contents on the client by rendering the component for the new page, which in turn can make calls to the necessary API endpoints. This process of updating the page on the client in response to attempted navigation is called client-side routing.
+
+In SvelteKit, client-side routing will be used by default, but you can skip it with [`data-sveltekit-reload`](link-options#data-sveltekit-reload).
+
+## SPA
+
+A single-page app (SPA) is an application in which all requests to the server load a single HTML file which then does client-side rendering of the requested contents based on the requested URL. All navigation is handled on the client-side in a process called client-side routing with per-page contents being updated and common layout elements remaining largely unchanged. SPAs do not provide SSR, which has the shortcoming described above. However, some applications are not greatly impacted by these shortcomings such as a complex business application behind a login where SEO would not be important and it is known that users will be accessing the application from a consistent computing environment.
+
+In SvelteKit, you can [build an SPA with `adapter-static`](single-page-apps).
+
+## SSG
+
+Static Site Generation (SSG) is a term that refers to a site where every page is prerendered. SvelteKit was not built to do only static site generation like some tools and so may not scale as well to efficiently render a very large number of pages as tools built specifically for that purpose. However, in contrast to most purpose-built SSGs, SvelteKit does nicely allow for mixing and matching different rendering types on different pages. One benefit of fully prerendering a site is that you do not need to maintain or pay for servers to perform SSR. Once generated, the site can be served from CDNs, leading to great "time to first byte" performance. This delivery model is often referred to as JAMstack.
+
+In SvelteKit, you can do static site generation by using [`adapter-static`](adapter-static) or by configuring every page to be prerendered using [the `prerender` page option](page-options#prerender) or [`prerender` config](configuration#prerender) in `svelte.config.js`.
+
+## SSR
+
+Server-side rendering (SSR) is the generation of the page contents on the server. SSR is generally preferred for SEO. While some search engines can index content that is dynamically generated on the client-side it may take longer even in these cases. It also tends to improve perceived performance and makes your app accessible to users if JavaScript fails or is disabled (which happens [more often than you probably think](https://kryogenix.org/code/browser/everyonehasjs.html)).
+
+In SvelteKit, pages are server-side rendered by default. You can disable SSR with [the `ssr` page option](https://kit.svelte.dev/docs/page-options#ssr).
diff --git a/apps/svelte.dev/content/docs/kit/v01/60-appendix/30-migrating-to-sveltekit-2.md b/apps/svelte.dev/content/docs/kit/v01/60-appendix/30-migrating-to-sveltekit-2.md
new file mode 100644
index 0000000000..555fa4d886
--- /dev/null
+++ b/apps/svelte.dev/content/docs/kit/v01/60-appendix/30-migrating-to-sveltekit-2.md
@@ -0,0 +1,163 @@
+---
+title: Migrating to SvelteKit v2
+---
+
+Upgrading from SvelteKit version 1 to version 2 should be mostly seamless. There are a few breaking changes to note, which are listed here. You can use `npx svelte-migrate@latest sveltekit-2` to migrate some of these changes automatically.
+
+We highly recommend upgrading to the most recent 1.x version before upgrading to 2.0, so that you can take advantage of targeted deprecation warnings. We also recommend [updating to Svelte 4](https://svelte.dev/docs/v4-migration-guide) first: Later versions of SvelteKit 1.x support it, and SvelteKit 2.0 requires it.
+
+## `redirect` and `error` are no longer thrown by you
+
+Previously, you had to `throw` the values returned from `error(...)` and `redirect(...)` yourself. In SvelteKit 2 this is no longer the case — calling the functions is sufficient.
+
+```diff
+import { error } from '@sveltejs/kit'
+
+...
+- throw error(500, 'something went wrong');
++ error(500, 'something went wrong');
+```
+
+`svelte-migrate` will do these changes automatically for you.
+
+If the error or redirect is thrown inside a `try {...}` block (hint: don't do this!), you can distinguish them from unexpected errors using [`isHttpError`](/docs/modules#sveltejs-kit-ishttperror) and [`isRedirect`](/docs/modules#sveltejs-kit-isredirect) imported from `@sveltejs/kit`.
+
+## path is required when setting cookies
+
+When receiving a `Set-Cookie` header that doesn't specify a `path`, browsers will [set the cookie path](https://www.rfc-editor.org/rfc/rfc6265#section-5.1.4) to the parent of the resource in question. This behaviour isn't particularly helpful or intuitive, and frequently results in bugs because the developer expected the cookie to apply to the domain as a whole.
+
+As of SvelteKit 2.0, you need to set a `path` when calling `cookies.set(...)`, `cookies.delete(...)` or `cookies.serialize(...)` so that there's no ambiguity. Most of the time, you probably want to use `path: '/'`, but you can set it to whatever you like, including relative paths — `''` means 'the current path', `'.'` means 'the current directory'.
+
+```diff
+export function load({ cookies }) {
+- cookies.set(name, value);
++ cookies.set(name, value, { path: '/' });
+ return { response }
+}
+```
+
+`svelte-migrate` will add comments highlighting the locations that need to be adjusted.
+
+## Top-level promises are no longer awaited
+
+In SvelteKit version 1, if the top-level properties of the object returned from a `load` function were promises, they were automatically awaited. With the introduction of [streaming](https://svelte.dev/blog/streaming-snapshots-sveltekit) this behavior became a bit awkward as it forces you to nest your streamed data one level deep.
+
+As of version 2, SvelteKit no longer differentiates between top-level and non-top-level promises. To get back the blocking behavior, use `await` (with `Promise.all` to prevent waterfalls, where appropriate):
+
+```diff
+// If you have a single promise
+export function load({ fetch }) {
+- const response = fetch(...).then(r => r.json());
++ const response = await fetch(...).then(r => r.json());
+ return { response }
+}
+```
+
+```diff
+// If you have multiple promises
+export function load({ fetch }) {
+- const a = fetch(...).then(r => r.json());
+- const b = fetch(...).then(r => r.json());
++ const [a, b] = await Promise.all([
++ fetch(...).then(r => r.json()),
++ fetch(...).then(r => r.json()),
++ ]);
+ return { a, b };
+}
+```
+
+## goto(...) changes
+
+`goto(...)` no longer accepts external URLs. To navigate to an external URL, use `window.location.href = url`. The `state` object now determines `$page.state` and must adhere to the `App.PageState` interface, if declared. See [shallow routing](shallow-routing) for more details.
+
+## paths are now relative by default
+
+In SvelteKit 1, `%sveltekit.assets%` in your `app.html` was replaced with a relative path by default (i.e. `.` or `..` or `../..` etc, depending on the path being rendered) during server-side rendering unless the [`paths.relative`](/docs/configuration#paths) config option was explicitly set to `false`. The same was true for `base` and `assets` imported from `$app/paths`, but only if the `paths.relative` option was explicitly set to `true`.
+
+This inconsistency is fixed in version 2. Paths are either always relative or always absolute, depending on the value of [`paths.relative`](/docs/configuration#paths). It defaults to `true` as this results in more portable apps: if the `base` is something other than the app expected (as is the case when viewed on the [Internet Archive](https://archive.org/), for example) or unknown at build time (as is the case when deploying to [IPFS](https://ipfs.tech/) and so on), fewer things are likely to break.
+
+## Server fetches are not trackable anymore
+
+Previously it was possible to track URLs from `fetch`es on the server in order to rerun load functions. This poses a possible security risk (private URLs leaking), and as such it was behind the `dangerZone.trackServerFetches` setting, which is now removed.
+
+## `preloadCode` arguments must be prefixed with `base`
+
+SvelteKit exposes two functions, [`preloadCode`](/docs/modules#$app-navigation-preloadcode) and [`preloadData`](/docs/modules#$app-navigation-preloaddata), for programmatically loading the code and data associated with a particular path. In version 1, there was a subtle inconsistency — the path passed to `preloadCode` did not need to be prefixed with the `base` path (if set), while the path passed to `preloadData` did.
+
+This is fixed in SvelteKit 2 — in both cases, the path should be prefixed with `base` if it is set.
+
+Additionally, `preloadCode` now takes a single argument rather than _n_ arguments.
+
+## `resolvePath` has been removed
+
+SvelteKit 1 included a function called `resolvePath` which allows you to resolve a route ID (like `/blog/[slug]`) and a set of parameters (like `{ slug: 'hello' }`) to a pathname. Unfortunately the return value didn't include the `base` path, limiting its usefulness in cases where `base` was set.
+
+As such, SvelteKit 2 replaces `resolvePath` with a (slightly better named) function called `resolveRoute`, which is imported from `$app/paths` and which takes `base` into account.
+
+```diff
+-import { resolvePath } from '@sveltejs/kit';
+-import { base } from '$app/paths';
++import { resolveRoute } from '$app/paths';
+
+-const path = base + resolvePath('/blog/[slug]', { slug });
++const path = resolveRoute('/blog/[slug]', { slug });
+```
+
+`svelte-migrate` will do the method replacement for you, though if you later prepend the result with `base`, you need to remove that yourself.
+
+## Improved error handling
+
+Errors are handled inconsistently in SvelteKit 1. Some errors trigger the `handleError` hook but there is no good way to discern their status (for example, the only way to tell a 404 from a 500 is by seeing if `event.route.id` is `null`), while others (such as 405 errors for `POST` requests to pages without actions) don't trigger `handleError` at all, but should. In the latter case, the resulting `$page.error` will deviate from the [`App.Error`](/docs/types#app-error) type, if it is specified.
+
+SvelteKit 2 cleans this up by calling `handleError` hooks with two new properties: `status` and `message`. For errors thrown from your code (or library code called by your code) the status will be `500` and the message will be `Internal Error`. While `error.message` may contain sensitive information that should not be exposed to users, `message` is safe.
+
+## Dynamic environment variables cannot be used during prerendering
+
+The `$env/dynamic/public` and `$env/dynamic/private` modules provide access to _run time_ environment variables, as opposed to the _build time_ environment variables exposed by `$env/static/public` and `$env/static/private`.
+
+During prerendering in SvelteKit 1, they are one and the same. As such, prerendered pages that make use of 'dynamic' environment variables are really 'baking in' build time values, which is incorrect. Worse, `$env/dynamic/public` is populated in the browser with these stale values if the user happens to land on a prerendered page before navigating to dynamically-rendered pages.
+
+Because of this, dynamic environment variables can no longer be read during prerendering in SvelteKit 2 — you should use the `static` modules instead. If the user lands on a prerendered page, SvelteKit will request up-to-date values for `$env/dynamic/public` from the server (by default from a module called `_env.js` — this can be configured with `config.kit.env.publicModule`) instead of reading them from the server-rendered HTML.
+
+## `form` and `data` have been removed from `use:enhance` callbacks
+
+If you provide a callback to [`use:enhance`](/docs/form-actions#progressive-enhancement-use-enhance), it will be called with an object containing various useful properties.
+
+In SvelteKit 1, those properties included `form` and `data`. These were deprecated some time ago in favour of `formElement` and `formData`, and have been removed altogether in SvelteKit 2.
+
+## Forms containing file inputs must use `multipart/form-data`
+
+If a form contains an ` ` but does not have an `enctype="multipart/form-data"` attribute, non-JS submissions will omit the file. SvelteKit 2 will throw an error if it encounters a form like this during a `use:enhance` submission to ensure that your forms work correctly when JavaScript is not present.
+
+## Generated `tsconfig.json` is more strict
+
+Previously, the generated `tsconfig.json` was trying its best to still produce a somewhat valid config when your `tsconfig.json` included `paths` or `baseUrl`. In SvelteKit 2, the validation is more strict and will warn when you use either `paths` or `baseUrl` in your `tsconfig.json`. These settings are used to generate path aliases and you should use [the `alias` config](configuration#alias) option in your `svelte.config.js` instead, to also create a corresponding alias for the bundler.
+
+## `getRequest` no longer throws errors
+
+The `@sveltejs/kit/node` module exports helper functions for use in Node environments, including `getRequest` which turns a Node [`ClientRequest`](https://nodejs.org/api/http.html#class-httpclientrequest) into a standard [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) object.
+
+In SvelteKit 1, `getRequest` could throw if the `Content-Length` header exceeded the specified size limit. In SvelteKit 2, the error will not be thrown until later, when the request body (if any) is being read. This enables better diagnostics and simpler code.
+
+## `vitePreprocess` is no longer exported from `@sveltejs/kit/vite`
+
+Since `@sveltejs/vite-plugin-svelte` is now a peer dependency, SvelteKit 2 no longer re-exports `vitePreprocess`. You should import it directly from `@sveltejs/vite-plugin-svelte`.
+
+## Updated dependency requirements
+
+SvelteKit 2 requires Node `18.13` or higher, and the following minimum dependency versions:
+
+- `svelte@4`
+- `vite@5`
+- `typescript@5`
+- `@sveltejs/vite-plugin-svelte@3` (this is now required as a `peerDependency` of SvelteKit — previously it was directly depended upon)
+- `@sveltejs/adapter-cloudflare@3` (if you're using these adapters)
+- `@sveltejs/adapter-cloudflare-workers@2`
+- `@sveltejs/adapter-netlify@3`
+- `@sveltejs/adapter-node@2`
+- `@sveltejs/adapter-static@3`
+- `@sveltejs/adapter-vercel@4`
+
+`svelte-migrate` will update your `package.json` for you.
+
+As part of the TypeScript upgrade, the generated `tsconfig.json` (the one your `tsconfig.json` extends from) now uses `"moduleResolution": "bundler"` (which is recommended by the TypeScript team, as it properly resolves types from packages with an `exports` map in package.json) and `verbatimModuleSyntax` (which replaces the existing `importsNotUsedAsValues ` and `preserveValueImports` flags — if you have those in your `tsconfig.json`, remove them. `svelte-migrate` will do this for you).
diff --git a/apps/svelte.dev/content/docs/kit/v01/60-appendix/40-migrating.md b/apps/svelte.dev/content/docs/kit/v01/60-appendix/40-migrating.md
new file mode 100644
index 0000000000..ec55a195da
--- /dev/null
+++ b/apps/svelte.dev/content/docs/kit/v01/60-appendix/40-migrating.md
@@ -0,0 +1,199 @@
+---
+title: Migrating from Sapper
+rank: 1
+---
+
+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](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](adapters) you plan to use (see [next section](migrating#project-files-configuration)).
+
+### scripts
+
+Any scripts that reference `sapper` should be updated:
+
+- `sapper build` should become `vite build` using the Node [adapter](adapters)
+- `sapper export` should become `vite build` using the static [adapter](adapters)
+- `sapper dev` should become `vite 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](configuration). Svelte preprocessor options should be moved to `config.preprocess`.
+
+You will need to add an [adapter](adapters). `sapper build` is roughly equivalent to [adapter-node](https://github.com/sveltejs/kit/tree/main/packages/adapter-node) while `sapper export` is roughly equivalent to [adapter-static](https://github.com/sveltejs/kit/tree/main/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](project-structure#project-files-vite-config-js).
+
+### 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
+
+When using `adapter-node` the equivalent is a [custom server](adapter-node#custom-server). Otherwise, this file has no direct equivalent, since SvelteKit apps can run in serverless environments.
+
+### src/service-worker.js
+
+Most imports from `@sapper/service-worker` have equivalents in [`$service-worker`](modules#$service-worker):
+
+- `files` is unchanged
+- `routes` has been removed
+- `shell` is now `build`
+- `timestamp` is now `version`
+
+### 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 `%sveltekit.head%` and `%sapper.html%` with `%sveltekit.body%`. The `` 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`](modules#$lib) instead.
+
+## Pages and layouts
+
+### Renamed files
+
+Routes now are made up of the folder name exclusively to remove ambiguity, the folder names leading up to a `+page.svelte` correspond to the route. See [the routing docs](routing) for an overview. The following shows a old/new comparison:
+
+| Old | New |
+| ------------------------- | ------------------------- |
+| routes/about/index.svelte | routes/about/+page.svelte |
+| routes/about.svelte | routes/about/+page.svelte |
+
+Your custom error page component should be renamed from `_error.svelte` to `+error.svelte`. Any `_layout.svelte` files should likewise be renamed `+layout.svelte`. [Any other files are ignored](routing#other-files).
+
+### Imports
+
+The `goto`, `prefetch` and `prefetchRoutes` imports from `@sapper/app` should be replaced with `goto`, `preloadData` and `preloadCode` imports respectively from [`$app/navigation`](modules#$app-navigation).
+
+The `stores` import from `@sapper/app` should be replaced — see the [Stores](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`](modules#$lib) imports.
+
+### Preload
+
+As before, pages and layouts can export a function that allows data to be loaded before rendering takes place.
+
+This function has been renamed from `preload` to [`load`](load), it now lives in a `+page.js` (or `+layout.js`) next to its `+page.svelte` (or `+layout.svelte`), and its API has changed. Instead of two arguments — `page` and `session` — there is a single `event` argument.
+
+There is no more `this` object, and consequently no `this.fetch`, `this.error` or `this.redirect`. Instead, you can get [`fetch`](load#making-fetch-requests) from the input methods, and both [`error`](load#errors) and [`redirect`](load#redirects) are now thrown.
+
+### Stores
+
+In Sapper, you would get references to provided stores like so:
+
+```js
+// @filename: ambient.d.ts
+declare module '@sapper/app';
+
+// @filename: index.js
+// ---cut---
+import { stores } from '@sapper/app';
+const { preloading, page, session } = stores();
+```
+
+The `page` store still exists; `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`, and `page` directly from [`$app/stores`](modules#$app-stores).
+
+### Routing
+
+Regex routes are no longer supported. Instead, use [advanced route matching](advanced-routing#matching).
+
+### Segments
+
+Previously, layout components received a `segment` prop indicating the child segment. This has been removed; you should use the more flexible `$page.url.pathname` value to derive the segment you're interested in.
+
+### 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, relative URLs are resolved against the current page (or the destination page, for `fetch` URLs in `load` functions) instead. In most cases, it's easier to use root-relative (i.e. starts with `/`) URLs, since their meaning is not context-dependent.
+
+### <a> attributes
+
+- `sapper:prefetch` is now `data-sveltekit-preload-data`
+- `sapper:noscroll` is now `data-sveltekit-noscroll`
+
+## Endpoints
+
+In Sapper, [server routes](routing#server) 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 [integrations](./integrations) for detailed information about integrations.
+
+### HTML minifier
+
+Sapper includes `html-minifier` by default. SvelteKit does not include this, but you can add it as a prod dependency and then use it through a [hook](hooks#server-hooks-handle):
+
+```js
+// @filename: ambient.d.ts
+///
+declare module 'html-minifier';
+
+// @filename: index.js
+// ---cut---
+import { minify } from 'html-minifier';
+import { building } from '$app/environment';
+
+const minification_options = {
+ collapseBooleanAttributes: true,
+ collapseWhitespace: true,
+ conservativeCollapse: true,
+ decodeEntities: true,
+ html5: true,
+ ignoreCustomComments: [/^#/],
+ minifyCSS: true,
+ minifyJS: false,
+ removeAttributeQuotes: true,
+ removeComments: false, // some hydration code needs comments, so leave them in
+ removeOptionalTags: true,
+ removeRedundantAttributes: true,
+ removeScriptTypeAttributes: true,
+ removeStyleLinkTypeAttributes: true,
+ sortAttributes: true,
+ sortClassName: true
+};
+
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+ let page = '';
+
+ return resolve(event, {
+ transformPageChunk: ({ html, done }) => {
+ page += html;
+ if (done) {
+ return building ? minify(page, minification_options) : page;
+ }
+ }
+ });
+}
+```
+
+Note that `prerendering` is `false` when using `vite 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/apps/svelte.dev/content/docs/kit/v01/60-appendix/50-additional-resources.md b/apps/svelte.dev/content/docs/kit/v01/60-appendix/50-additional-resources.md
new file mode 100644
index 0000000000..ff0ece4c28
--- /dev/null
+++ b/apps/svelte.dev/content/docs/kit/v01/60-appendix/50-additional-resources.md
@@ -0,0 +1,24 @@
+---
+title: Additional resources
+---
+
+## FAQs
+
+Please see the [SvelteKit FAQ](../faq) for solutions to common issues and helpful tips and tricks.
+
+The [Svelte FAQ](https://svelte.dev/faq) and [`vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md) may also be helpful for questions deriving from those libraries.
+
+## Examples
+
+We've written and published a few different SvelteKit sites as examples:
+
+- [`sveltejs/realworld`](https://github.com/sveltejs/realworld) contains an example blog site
+- [A HackerNews clone](https://github.com/sveltejs/sites/tree/master/sites/hn.svelte.dev)
+- [`kit.svelte.dev`](https://github.com/sveltejs/kit/tree/main/sites/kit.svelte.dev)
+- [`svelte.dev`](https://github.com/sveltejs/svelte/tree/main/sites/svelte.dev)
+
+SvelteKit users have also published plenty of examples on GitHub, under the [#sveltekit](https://github.com/topics/sveltekit) and [#sveltekit-template](https://github.com/topics/sveltekit-template) topics, as well as on [the Svelte Society site](https://sveltesociety.dev/templates?category=sveltekit). Note that these have not been vetted by the maintainers and may not be up to date.
+
+## Support
+
+You can ask for help on [Discord](https://svelte.dev/chat) and [StackOverflow](https://stackoverflow.com/questions/tagged/sveltekit). Please first search for information related to your issue in the FAQ, Google or another search engine, issue tracker, and Discord chat history in order to be respectful of others' time. There are many more people asking questions than answering them, so this will help in allowing the community to grow in a scalable fashion.
diff --git a/apps/svelte.dev/content/docs/kit/v01/60-appendix/60-glossary.md b/apps/svelte.dev/content/docs/kit/v01/60-appendix/60-glossary.md
new file mode 100644
index 0000000000..ce80e9ef60
--- /dev/null
+++ b/apps/svelte.dev/content/docs/kit/v01/60-appendix/60-glossary.md
@@ -0,0 +1,51 @@
+---
+title: Glossary
+---
+
+The core of SvelteKit provides a highly configurable rendering engine. This section describes some of the terms used when discussing rendering. A reference for setting these options is provided in the documentation above.
+
+## CSR
+
+Client-side rendering (CSR) is the generation of the page contents in the web browser using JavaScript.
+
+In SvelteKit, client-side rendering will be used by default, but you can turn off JavaScript with [the `csr = false` page option](page-options#csr).
+
+## Hydration
+
+Svelte components store some state and update the DOM when the state is updated. When fetching data during SSR, by default SvelteKit will store this data and transmit it to the client along with the server-rendered HTML. The components can then be initialized on the client with that data without having to call the same API endpoints again. Svelte will then check that the DOM is in the expected state and attach event listeners in a process called hydration. Once the components are fully hydrated, they can react to changes to their properties just like any newly created Svelte component.
+
+In SvelteKit, pages will be hydrated by default, but you can turn off JavaScript with [the `csr = false` page option](page-options#csr).
+
+## Prerendering
+
+Prerendering means computing the contents of a page at build time and saving the HTML for display. This approach has the same benefits as traditional server-rendered pages, but avoids recomputing the page for each visitor and so scales nearly for free as the number of visitors increases. The tradeoff is that the build process is more expensive and prerendered content can only be updated by building and deploying a new version of the application.
+
+Not all pages can be prerendered. The basic rule is this: for content to be prerenderable, any two users hitting it directly must get the same content from the server, and the page must not contain [actions](form-actions). Note that you can still prerender content that is loaded based on the page's parameters as long as all users will be seeing the same prerendered content.
+
+Pre-rendered pages are not limited to static content. You can build personalized pages if user-specific data is fetched and rendered client-side. This is subject to the caveat that you will experience the downsides of not doing SSR for that content as discussed above.
+
+In SvelteKit, you can control prerendering with [the `prerender` page option](page-options#prerender) and [`prerender` config](configuration#prerender) in `svelte.config.js`.
+
+## Routing
+
+By default, when you navigate to a new page (by clicking on a link or using the browser's forward or back buttons), SvelteKit will intercept the attempted navigation and handle it instead of allowing the browser to send a request to the server for the destination page. SvelteKit will then update the displayed contents on the client by rendering the component for the new page, which in turn can make calls to the necessary API endpoints. This process of updating the page on the client in response to attempted navigation is called client-side routing.
+
+In SvelteKit, client-side routing will be used by default, but you can skip it with [`data-sveltekit-reload`](link-options#data-sveltekit-reload).
+
+## SPA
+
+A single-page app (SPA) is an application in which all requests to the server load a single HTML file which then does client-side rendering of the requested contents based on the requested URL. All navigation is handled on the client-side in a process called client-side routing with per-page contents being updated and common layout elements remaining largely unchanged. SPAs do not provide SSR, which has the shortcoming described above. However, some applications are not greatly impacted by these shortcomings such as a complex business application behind a login where SEO would not be important and it is known that users will be accessing the application from a consistent computing environment.
+
+In SvelteKit, you can [build an SPA with `adapter-static`](single-page-apps).
+
+## SSG
+
+Static Site Generation (SSG) is a term that refers to a site where every page is prerendered. SvelteKit was not built to do only static site generation like some tools and so may not scale as well to efficiently render a very large number of pages as tools built specifically for that purpose. However, in contrast to most purpose-built SSGs, SvelteKit does nicely allow for mixing and matching different rendering types on different pages. One benefit of fully prerendering a site is that you do not need to maintain or pay for servers to perform SSR. Once generated, the site can be served from CDNs, leading to great "time to first byte" performance. This delivery model is often referred to as JAMstack.
+
+In SvelteKit, you can do static site generation by using [`adapter-static`](adapter-static) or by configuring every page to be prerendered using [the `prerender` page option](page-options#prerender) or [`prerender` config](configuration#prerender) in `svelte.config.js`.
+
+## SSR
+
+Server-side rendering (SSR) is the generation of the page contents on the server. SSR is generally preferred for SEO. While some search engines can index content that is dynamically generated on the client-side it may take longer even in these cases. It also tends to improve perceived performance and makes your app accessible to users if JavaScript fails or is disabled (which happens [more often than you probably think](https://kryogenix.org/code/browser/everyonehasjs.html)).
+
+In SvelteKit, pages are server-side rendered by default. You can disable SSR with [the `ssr` page option](https://kit.svelte.dev/docs/page-options#ssr).
diff --git a/apps/svelte.dev/content/docs/kit/v01/60-appendix/index.md b/apps/svelte.dev/content/docs/kit/v01/60-appendix/index.md
new file mode 100644
index 0000000000..4b74e29d79
--- /dev/null
+++ b/apps/svelte.dev/content/docs/kit/v01/60-appendix/index.md
@@ -0,0 +1,3 @@
+---
+title: "Appendix"
+---
\ No newline at end of file
diff --git a/apps/svelte.dev/content/docs/kit/v01/index.md b/apps/svelte.dev/content/docs/kit/v01/index.md
new file mode 100644
index 0000000000..e653b7f063
--- /dev/null
+++ b/apps/svelte.dev/content/docs/kit/v01/index.md
@@ -0,0 +1,3 @@
+---
+title: SvelteKit
+---
diff --git a/apps/svelte.dev/content/docs/svelte/v04/01-getting-started/01-introduction.md b/apps/svelte.dev/content/docs/svelte/v04/01-getting-started/01-introduction.md
new file mode 100644
index 0000000000..01fe9ca8af
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/01-getting-started/01-introduction.md
@@ -0,0 +1,34 @@
+---
+title: Introduction
+---
+
+Welcome to the Svelte reference documentation! This is intended as a resource for people who already have some familiarity with Svelte and want to learn more about using it.
+
+If that's not you (yet), you may prefer to visit the [interactive tutorial](https://learn.svelte.dev) or the [examples](/examples) before consulting this reference. You can try Svelte online using the [REPL](/repl). Alternatively, if you'd like a more fully-featured environment, you can try Svelte on [StackBlitz](https://sveltekit.new).
+
+## Start a new project
+
+We recommend using [SvelteKit](https://kit.svelte.dev/), the official application framework from the Svelte team:
+
+```
+npm create svelte@latest myapp
+cd myapp
+npm install
+npm run dev
+```
+
+SvelteKit will handle calling [the Svelte compiler](https://www.npmjs.com/package/svelte) to convert your `.svelte` files into `.js` files that create the DOM and `.css` files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, deployment, and SSR support. [SvelteKit](https://kit.svelte.dev/) uses [Vite](https://vitejs.dev/) to build your code.
+
+### Alternatives to SvelteKit
+
+If you don't want to use SvelteKit for some reason, you can also use Svelte with Vite (but without SvelteKit) by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory. In most cases, you will probably need to [choose a routing library](/faq#is-there-a-router) as well.
+
+Alternatively, there are [plugins for all the major web bundlers](https://sveltesociety.dev/packages?category=build-plugins) to handle Svelte compilation — which will output `.js` and `.css` that you can insert into your HTML — but most others won't handle SSR.
+
+## Editor tooling
+
+The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) and there are integrations with various other [editors](https://sveltesociety.dev/resources#editor-support) and tools as well.
+
+## Getting help
+
+Don't be shy about asking for help in the [Discord chatroom](https://svelte.dev/chat)! You can also find answers on [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte).
diff --git a/apps/svelte.dev/content/docs/svelte/v04/01-getting-started/index.md b/apps/svelte.dev/content/docs/svelte/v04/01-getting-started/index.md
new file mode 100644
index 0000000000..aa25bbca25
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/01-getting-started/index.md
@@ -0,0 +1,3 @@
+---
+title: "Getting Started"
+---
\ No newline at end of file
diff --git a/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/01-svelte-components.md b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/01-svelte-components.md
new file mode 100644
index 0000000000..c3c2268109
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/01-svelte-components.md
@@ -0,0 +1,351 @@
+---
+title: Svelte components
+---
+
+Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML.
+
+All three sections — script, styles and markup — are optional.
+
+```svelte
+
+
+
+
+
+```
+
+## `
+```
+
+You can specify a default initial value for a prop. It will be used if the component's consumer doesn't specify the prop on the component (or if its initial value is `undefined`) when instantiating the component. Note that if the values of props are subsequently updated, then any prop whose value is not specified will be set to `undefined` (rather than its initial value).
+
+In development mode (see the [compiler options](/docs/svelte-compiler#compile)), a warning will be printed if no default initial value is provided and the consumer does not specify a value. To squelch this warning, ensure that a default initial value is specified, even if it is `undefined`.
+
+```svelte
+
+```
+
+If you export a `const`, `class` or `function`, it is readonly from outside the component. Functions are valid prop values, however, as shown below.
+
+```svelte
+
+
+```
+
+Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs/component-directives#bind-this).
+
+You can use reserved words as prop names.
+
+```svelte
+
+
+```
+
+### 2. Assignments are 'reactive'
+
+To change component state and trigger a re-render, just assign to a locally declared variable.
+
+Update expressions (`count += 1`) and property assignments (`obj.x = y`) have the same effect.
+
+```svelte
+
+```
+
+Because Svelte's reactivity is based on assignments, using array methods like `.push()` and `.splice()` won't automatically trigger updates. A subsequent assignment is required to trigger the update. This and more details can also be found in the [tutorial](https://learn.svelte.dev/tutorial/updating-arrays-and-objects).
+
+```svelte
+
+```
+
+Svelte's `
+```
+
+### 3. `$:` marks a statement as reactive
+
+Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the `$:` [JS label syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). Reactive statements run after other script code and before the component markup is rendered, whenever the values that they depend on have changed.
+
+```svelte
+
+```
+
+Only values which directly appear within the `$:` block will become dependencies of the reactive statement. For example, in the code below `total` will only update when `x` changes, but not `y`.
+
+```svelte
+
+
+
+Total: {total}
+ x++}> Increment X
+
+ y++}> Increment Y
+```
+
+It is important to note that the reactive blocks are ordered via simple static analysis at compile time, and all the compiler looks at are the variables that are assigned to and used within the block itself, not in any functions called by them. This means that `yDependent` will not be updated when `x` is updated in the following example:
+
+```svelte
+
+
+```
+
+Moving the line `$: yDependent = y` below `$: setY(x)` will cause `yDependent` to be updated when `x` is updated.
+
+If a statement consists entirely of an assignment to an undeclared variable, Svelte will inject a `let` declaration on your behalf.
+
+```svelte
+
+
+```
+
+### 4. Prefix stores with `$` to access their values
+
+A _store_ is an object that allows reactive access to a value via a simple _store contract_. The [`svelte/store` module](/docs/svelte-store) contains minimal store implementations which fulfil this contract.
+
+Any time you have a reference to a store, you can access its value inside a component by prefixing it with the `$` character. This causes Svelte to declare the prefixed variable, subscribe to the store at component initialization and unsubscribe when appropriate.
+
+Assignments to `$`-prefixed variables require that the variable be a writable store, and will result in a call to the store's `.set` method.
+
+Note that the store must be declared at the top level of the component — not inside an `if` block or a function, for example.
+
+Local variables (that do not represent store values) must _not_ have a `$` prefix.
+
+```svelte
+
+```
+
+#### Store contract
+
+```ts
+// @noErrors
+store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }
+```
+
+You can create your own stores without relying on [`svelte/store`](/docs/svelte-store), by implementing the _store contract_:
+
+1. A store must contain a `.subscribe` method, which must accept as its argument a subscription function. This subscription function must be immediately and synchronously called with the store's current value upon calling `.subscribe`. All of a store's active subscription functions must later be synchronously called whenever the store's value changes.
+2. The `.subscribe` method must return an unsubscribe function. Calling an unsubscribe function must stop its subscription, and its corresponding subscription function must not be called again by the store.
+3. A store may _optionally_ contain a `.set` method, which must accept as its argument a new value for the store, and which synchronously calls all of the store's active subscription functions. Such a store is called a _writable store_.
+
+For interoperability with RxJS Observables, the `.subscribe` method is also allowed to return an object with an `.unsubscribe` method, rather than return the unsubscription function directly. Note however that unless `.subscribe` synchronously calls the subscription (which is not required by the Observable spec), Svelte will see the value of the store as `undefined` until it does.
+
+## `
+
+
+```
+
+## `
+```
+
+To apply styles to a selector globally, use the `:global(...)` modifier.
+
+```svelte
+
+```
+
+If you want to make @keyframes that are accessible globally, you need to prepend your keyframe names with `-global-`.
+
+The `-global-` part will be removed when compiled, and the keyframe then be referenced using just `my-animation-name` elsewhere in your code.
+
+```svelte
+
+```
+
+There should only be 1 top-level `
+
+```
diff --git a/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/02-basic-markup.md b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/02-basic-markup.md
new file mode 100644
index 0000000000..e6192230d4
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/02-basic-markup.md
@@ -0,0 +1,140 @@
+---
+title: Basic markup
+---
+
+## Tags
+
+A lowercase tag, like ``, denotes a regular HTML element. A capitalised tag, such as `
` or ``, indicates a _component_.
+
+```svelte
+
+
+
+
+
+```
+
+## Attributes and props
+
+By default, attributes work exactly like their HTML counterparts.
+
+```svelte
+
+ can't touch this
+
+```
+
+As in HTML, values may be unquoted.
+
+
+```svelte
+
+```
+
+Attribute values can contain JavaScript expressions.
+
+```svelte
+page {p}
+```
+
+Or they can _be_ JavaScript expressions.
+
+```svelte
+...
+```
+
+Boolean attributes are included on the element if their value is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and excluded if it's [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).
+
+All other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or `undefined`).
+
+```svelte
+
+This div has no title attribute
+```
+
+An expression might include characters that would cause syntax highlighting to fail in regular HTML, so quoting the value is permitted. The quotes do not affect how the value is parsed:
+
+
+```svelte
+...
+```
+
+When the attribute name and value match (`name={name}`), they can be replaced with `{name}`.
+
+```svelte
+...
+
+```
+
+By convention, values passed to components are referred to as _properties_ or _props_ rather than _attributes_, which are a feature of the DOM.
+
+As with elements, `name={name}` can be replaced with the `{name}` shorthand.
+
+```svelte
+
+```
+
+_Spread attributes_ allow many attributes or properties to be passed to an element or component at once.
+
+An element or component can have multiple spread attributes, interspersed with regular ones.
+
+```svelte
+
+```
+
+`$$props` references all props that are passed to a component, including ones that are not declared with `export`. Using `$$props` will not perform as well as references to a specific prop because changes to any prop will cause Svelte to recheck all usages of `$$props`. But it can be useful in some cases – for example, when you don't know at compile time what props might be passed to a component.
+
+```svelte
+
+```
+
+`$$restProps` contains only the props which are _not_ declared with `export`. It can be used to pass down other unknown attributes to an element in a component. It shares the same performance characteristics compared to specific property access as `$$props`.
+
+```svelte
+
+```
+
+> The `value` attribute of an `input` element or its children `option` elements must not be set with spread attributes when using `bind:group` or `bind:checked`. Svelte needs to be able to see the element's `value` directly in the markup in these cases so that it can link it to the bound variable.
+
+> Sometimes, the attribute order matters as Svelte sets attributes sequentially in JavaScript. For example, ` `, Svelte will attempt to set the value to `1` (rounding up from 0.5 as the step by default is 1), and then set the step to `0.1`. To fix this, change it to ` `.
+
+> Another example is ` `. Svelte will set the img `src` before making the img element `loading="lazy"`, which is probably too late. Change this to ` ` to make the image lazily loaded.
+
+## Text expressions
+
+A JavaScript expression can be included as text by surrounding it with curly braces.
+
+```svelte
+{expression}
+```
+
+Curly braces can be included in a Svelte template by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `{`, `{`, or `{` for `{` and `}`, `}`, or `}` for `}`.
+
+> If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.
+
+
+```svelte
+Hello {name}!
+{a} + {b} = {a + b}.
+
+{(/^[A-Za-z ]+$/).test(value) ? x : y}
+```
+
+## Comments
+
+You can use HTML comments inside components.
+
+```svelte
+Hello world
+```
+
+Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason.
+
+```svelte
+
+
+```
diff --git a/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/03-logic-blocks.md b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/03-logic-blocks.md
new file mode 100644
index 0000000000..af47f6dfa7
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/03-logic-blocks.md
@@ -0,0 +1,223 @@
+---
+title: Logic blocks
+---
+
+## {#if ...}
+
+```svelte
+
+{#if expression}...{/if}
+```
+
+```svelte
+
+{#if expression}...{:else if expression}...{/if}
+```
+
+```svelte
+
+{#if expression}...{:else}...{/if}
+```
+
+Content that is conditionally rendered can be wrapped in an if block.
+
+```svelte
+{#if answer === 42}
+ what was the question?
+{/if}
+```
+
+Additional conditions can be added with `{:else if expression}`, optionally ending in an `{:else}` clause.
+
+```svelte
+{#if porridge.temperature > 100}
+ too hot!
+{:else if 80 > porridge.temperature}
+ too cold!
+{:else}
+ just right!
+{/if}
+```
+
+(Blocks don't have to wrap elements, they can also wrap text within elements!)
+
+## {#each ...}
+
+```svelte
+
+{#each expression as name}...{/each}
+```
+
+```svelte
+
+{#each expression as name, index}...{/each}
+```
+
+```svelte
+
+{#each expression as name (key)}...{/each}
+```
+
+```svelte
+
+{#each expression as name, index (key)}...{/each}
+```
+
+```svelte
+
+{#each expression as name}...{:else}...{/each}
+```
+
+Iterating over lists of values can be done with an each block.
+
+```svelte
+Shopping list
+
+ {#each items as item}
+ {item.name} x {item.qty}
+ {/each}
+
+```
+
+You can use each blocks to iterate over any array or array-like value — that is, any object with a `length` property.
+
+An each block can also specify an _index_, equivalent to the second argument in an `array.map(...)` callback:
+
+```svelte
+{#each items as item, i}
+ {i + 1}: {item.name} x {item.qty}
+{/each}
+```
+
+If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
+
+```svelte
+{#each items as item (item.id)}
+ {item.name} x {item.qty}
+{/each}
+
+
+{#each items as item, i (item.id)}
+ {i + 1}: {item.name} x {item.qty}
+{/each}
+```
+
+You can freely use destructuring and rest patterns in each blocks.
+
+```svelte
+{#each items as { id, name, qty }, i (id)}
+ {i + 1}: {name} x {qty}
+{/each}
+
+{#each objects as { id, ...rest }}
+ {id}
+{/each}
+
+{#each items as [id, ...rest]}
+ {id}
+{/each}
+```
+
+An each block can also have an `{:else}` clause, which is rendered if the list is empty.
+
+```svelte
+{#each todos as todo}
+ {todo.text}
+{:else}
+ No tasks today!
+{/each}
+```
+
+Since Svelte 4 it is possible to iterate over iterables like `Map` or `Set`. Iterables need to be finite and static (they shouldn't change while being iterated over). Under the hood, they are transformed to an array using `Array.from` before being passed off to rendering. If you're writing performance-sensitive code, try to avoid iterables and use regular arrays as they are more performant.
+
+## {#await ...}
+
+```svelte
+
+{#await expression}...{:then name}...{:catch name}...{/await}
+```
+
+```svelte
+
+{#await expression}...{:then name}...{/await}
+```
+
+```svelte
+
+{#await expression then name}...{/await}
+```
+
+```svelte
+
+{#await expression catch name}...{/await}
+```
+
+Await blocks allow you to branch on the three possible states of a Promise — pending, fulfilled or rejected.
+In SSR mode, only the pending branch will be rendered on the server.
+If the provided expression is not a Promise only the fulfilled branch will be rendered, including in SSR mode.
+
+```svelte
+{#await promise}
+
+ waiting for the promise to resolve...
+{:then value}
+
+ The value is {value}
+{:catch error}
+
+ Something went wrong: {error.message}
+{/await}
+```
+
+The `catch` block can be omitted if you don't need to render anything when the promise rejects (or no error is possible).
+
+```svelte
+{#await promise}
+
+ waiting for the promise to resolve...
+{:then value}
+
+ The value is {value}
+{/await}
+```
+
+If you don't care about the pending state, you can also omit the initial block.
+
+```svelte
+{#await promise then value}
+ The value is {value}
+{/await}
+```
+
+Similarly, if you only want to show the error state, you can omit the `then` block.
+
+```svelte
+{#await promise catch error}
+ The error is {error}
+{/await}
+```
+
+## {#key ...}
+
+```svelte
+
+{#key expression}...{/key}
+```
+
+Key blocks destroy and recreate their contents when the value of an expression changes.
+
+This is useful if you want an element to play its transition whenever a value changes.
+
+```svelte
+{#key value}
+ {value}
+{/key}
+```
+
+When used around components, this will cause them to be reinstantiated and reinitialised.
+
+```svelte
+{#key value}
+
+{/key}
+```
diff --git a/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/04-special-tags.md b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/04-special-tags.md
new file mode 100644
index 0000000000..a807a19e2d
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/04-special-tags.md
@@ -0,0 +1,88 @@
+---
+title: Special tags
+---
+
+## {@html ...}
+
+```svelte
+
+{@html expression}
+```
+
+In a text expression, characters like `<` and `>` are escaped; however, with HTML expressions, they're not.
+
+The expression should be valid standalone HTML — `{@html ""}content{@html "
"}` will _not_ work, because ` ` is not valid HTML. It also will _not_ compile Svelte code.
+
+> Svelte does not sanitize expressions before injecting HTML. If the data comes from an untrusted source, you must sanitize it, or you are exposing your users to an [XSS vulnerability](https://owasp.org/www-community/attacks/xss/)
+
+```svelte
+
+
{post.title}
+ {@html post.content}
+
+```
+
+## {@debug ...}
+
+```svelte
+
+{@debug}
+```
+
+```svelte
+
+{@debug var1, var2, ..., varN}
+```
+
+The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.
+
+```svelte
+
+
+{@debug user}
+
+Hello {user.firstname}!
+```
+
+`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).
+
+```svelte
+
+{@debug user}
+{@debug user1, user2, user3}
+
+
+{@debug user.firstname}
+{@debug myArray[0]}
+{@debug !isReady}
+{@debug typeof user === 'object'}
+```
+
+The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when _any_ state changes, as opposed to the specified variables.
+
+## {@const ...}
+
+```svelte
+
+{@const assignment}
+```
+
+The `{@const ...}` tag defines a local constant.
+
+```svelte
+
+
+{#each boxes as box}
+ {@const area = box.width * box.height}
+ {box.width} * {box.height} = {area}
+{/each}
+```
+
+`{@const}` is only allowed as direct child of `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, ` ` or ` `.
diff --git a/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/05-element-directives.md b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/05-element-directives.md
new file mode 100644
index 0000000000..60c0ce01dc
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/05-element-directives.md
@@ -0,0 +1,869 @@
+---
+title: Element directives
+---
+
+As well as attributes, elements can have _directives_, which control the element's behaviour in some way.
+
+## on:_eventname_
+
+```svelte
+
+on:eventname={handler}
+```
+
+```svelte
+
+on:eventname|modifiers={handler}
+```
+
+Use the `on:` directive to listen to DOM events.
+
+```svelte
+
+
+
+
+ count: {count}
+
+```
+
+Handlers can be declared inline with no performance penalty. As with attributes, directive values may be quoted for the sake of syntax highlighters.
+
+```svelte
+ (count += 1)}>
+ count: {count}
+
+```
+
+Add _modifiers_ to DOM events with the `|` character.
+
+```svelte
+
+```
+
+The following modifiers are available:
+
+- `preventDefault` — calls `event.preventDefault()` before running the handler
+- `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
+- `stopImmediatePropagation` - calls `event.stopImmediatePropagation()`, preventing other listeners of the same event from being fired.
+- `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
+- `nonpassive` — explicitly set `passive: false`
+- `capture` — fires the handler during the _capture_ phase instead of the _bubbling_ phase
+- `once` — remove the handler after the first time it runs
+- `self` — only trigger handler if `event.target` is the element itself
+- `trusted` — only trigger handler if `event.isTrusted` is `true`. I.e. if the event is triggered by a user action.
+
+Modifiers can be chained together, e.g. `on:click|once|capture={...}`.
+
+If the `on:` directive is used without a value, the component will _forward_ the event, meaning that a consumer of the component can listen for it.
+
+```svelte
+ The component itself will emit the click event
+```
+
+It's possible to have multiple event listeners for the same event:
+
+```svelte
+
+
+
+Click me!
+```
+
+## bind:_property_
+
+```svelte
+
+bind:property={variable}
+```
+
+Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent. Most bindings are specific to particular elements.
+
+The simplest bindings reflect the value of a property, such as `input.value`.
+
+```svelte
+
+
+
+
+```
+
+If the name matches the value, you can use a shorthand.
+
+```svelte
+
+
+```
+
+Numeric input values are coerced; even though `input.value` is a string as far as the DOM is concerned, Svelte will treat it as a number. If the input is empty or invalid (in the case of `type="number"`), the value is `null`.
+
+```svelte
+
+
+```
+
+On ` ` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). It is readonly.
+
+```svelte
+Upload a picture:
+
+```
+
+If you're using `bind:` directives together with `on:` directives, the order that they're defined in affects the value of the bound variable when the event handler is called.
+
+```svelte
+
+
+ console.log('Old value:', value)}
+ bind:value
+ on:input={() => console.log('New value:', value)}
+/>
+```
+
+Here we were binding to the value of a text input, which uses the `input` event. Bindings on other elements may use different events such as `change`.
+
+## Binding `` value
+
+A `` value binding corresponds to the `value` property on the selected ``, which can be any value (not just strings, as is normally the case in the DOM).
+
+```svelte
+
+ a
+ b
+ c
+
+```
+
+A `` element behaves similarly to a checkbox group. The bound variable is an array with an entry corresponding to the `value` property of each selected ``.
+
+```svelte
+
+ Rice
+ Beans
+ Cheese
+ Guac (extra)
+
+```
+
+When the value of an ` ` matches its text content, the attribute can be omitted.
+
+```svelte
+
+ Rice
+ Beans
+ Cheese
+ Guac (extra)
+
+```
+
+Elements with the `contenteditable` attribute support the following bindings:
+
+- [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
+- [`innerText`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)
+- [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+
+There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText).
+
+
+
+```svelte
+
+```
+
+`` elements support binding to the `open` property.
+
+```svelte
+
+ Details
+ Something small enough to escape casual notice.
+
+```
+
+## Media element bindings
+
+Media elements (`` and ``) have their own set of bindings — seven _readonly_ ones...
+
+- `duration` (readonly) — the total duration of the video, in seconds
+- `buffered` (readonly) — an array of `{start, end}` objects
+- `played` (readonly) — ditto
+- `seekable` (readonly) — ditto
+- `seeking` (readonly) — boolean
+- `ended` (readonly) — boolean
+- `readyState` (readonly) — number between (and including) 0 and 4
+
+...and five _two-way_ bindings:
+
+- `currentTime` — the current playback time in the video, in seconds
+- `playbackRate` — how fast or slow to play the video, where 1 is 'normal'
+- `paused` — this one should be self-explanatory
+- `volume` — a value between 0 and 1
+- `muted` — a boolean value indicating whether the player is muted
+
+Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
+
+```svelte
+
+```
+
+## Image element bindings
+
+Image elements (` `) have two readonly bindings:
+
+- `naturalWidth` (readonly) — the original width of the image, available after the image has loaded
+- `naturalHeight` (readonly) — the original height of the image, available after the image has loaded
+
+```svelte
+
+```
+
+## Block-level element bindings
+
+Block-level elements have 4 read-only bindings, measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/):
+
+- `clientWidth`
+- `clientHeight`
+- `offsetWidth`
+- `offsetHeight`
+
+```svelte
+
+
+
+```
+
+## bind:group
+
+```svelte
+
+bind:group={variable}
+```
+
+Inputs that work together can use `bind:group`.
+
+```svelte
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+> `bind:group` only works if the inputs are in the same Svelte component.
+
+## bind:this
+
+```svelte
+
+bind:this={dom_node}
+```
+
+To get a reference to a DOM node, use `bind:this`.
+
+```svelte
+
+
+
+
+```
+
+## class:_name_
+
+```svelte
+
+class:name={value}
+```
+
+```svelte
+
+class:name
+```
+
+A `class:` directive provides a shorter way of toggling a class on an element.
+
+```svelte
+
+...
+...
+
+
+...
+
+
+...
+```
+
+## style:_property_
+
+```svelte
+style:property={value}
+```
+
+```svelte
+style:property="value"
+```
+
+```svelte
+style:property
+```
+
+The `style:` directive provides a shorthand for setting multiple styles on an element.
+
+```svelte
+
+...
+...
+
+
+...
+
+
+...
+
+
+...
+
+
+...
+```
+
+When `style:` directives are combined with `style` attributes, the directives will take precedence:
+
+```svelte
+This will be red
+```
+
+## use:_action_
+
+```svelte
+
+use:action
+```
+
+```svelte
+
+use:action={parameters}
+```
+
+```ts
+/// copy: false
+// @noErrors
+action = (node: HTMLElement, parameters: any) => {
+ update?: (parameters: any) => void,
+ destroy?: () => void
+}
+```
+
+Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
+
+```svelte
+
+
+
+
+```
+
+An action can have a parameter. If the returned value has an `update` method, it will be called whenever that parameter changes, immediately after Svelte has applied updates to the markup.
+
+> Don't worry about the fact that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
+
+```svelte
+
+
+
+
+```
+
+Read more in the [`svelte/action`](/docs/svelte-action) page.
+
+## transition:_fn_
+
+```svelte
+
+transition:fn
+```
+
+```svelte
+
+transition:fn={params}
+```
+
+```svelte
+
+transition:fn|global
+```
+
+```svelte
+
+transition:fn|global={params}
+```
+
+```svelte
+
+transition:fn|local
+```
+
+```svelte
+
+transition:fn|local={params}
+```
+
+```js
+/// copy: false
+// @noErrors
+transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => {
+ delay?: number,
+ duration?: number,
+ easing?: (t: number) => number,
+ css?: (t: number, u: number) => string,
+ tick?: (t: number, u: number) => void
+}
+```
+
+A transition is triggered by an element entering or leaving the DOM as a result of a state change.
+
+When a block is transitioning out, all elements inside the block, including those that do not have their own transitions, are kept in the DOM until every transition in the block has been completed.
+
+The `transition:` directive indicates a _bidirectional_ transition, which means it can be smoothly reversed while the transition is in progress.
+
+```svelte
+{#if visible}
+ fades in and out
+{/if}
+```
+
+Transitions are local by default (in Svelte 3, they were global by default). Local transitions only play when the block they belong to is created or destroyed, _not_ when parent blocks are created or destroyed.
+
+```svelte
+{#if x}
+ {#if y}
+
+ fades in and out only when y changes
+
+
+ fades in and out when x or y change
+ {/if}
+{/if}
+```
+
+> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](/docs/client-side-component-api) and marking the transition as `global`.
+
+## Transition parameters
+
+Like actions, transitions can have parameters.
+
+(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)
+
+```svelte
+{#if visible}
+ fades in and out over two seconds
+{/if}
+```
+
+## Custom transition functions
+
+Transitions can use custom functions. If the returned object has a `css` function, Svelte will create a CSS animation that plays on the element.
+
+The `t` argument passed to `css` is a value between `0` and `1` after the `easing` function has been applied. _In_ transitions run from `0` to `1`, _out_ transitions run from `1` to `0` — in other words, `1` is the element's natural state, as though no transition had been applied. The `u` argument is equal to `1 - t`.
+
+The function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.
+
+```svelte
+
+
+
+{#if visible}
+ whooshes in
+{/if}
+```
+
+A custom transition function can also return a `tick` function, which is called _during_ the transition with the same `t` and `u` arguments.
+
+> If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices.
+
+```svelte
+
+
+
+{#if visible}
+ The quick brown fox jumps over the lazy dog
+{/if}
+```
+
+If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](https://learn.svelte.dev/tutorial/deferred-transitions) possible.
+
+Transition functions also receive a third argument, `options`, which contains information about the transition.
+
+Available values in the `options` object are:
+
+- `direction` - one of `in`, `out`, or `both` depending on the type of transition
+
+## Transition events
+
+An element with transitions will dispatch the following events in addition to any standard DOM events:
+
+- `introstart`
+- `introend`
+- `outrostart`
+- `outroend`
+
+```svelte
+{#if visible}
+ (status = 'intro started')}
+ on:outrostart={() => (status = 'outro started')}
+ on:introend={() => (status = 'intro ended')}
+ on:outroend={() => (status = 'outro ended')}
+ >
+ Flies in and out
+
+{/if}
+```
+
+## in:_fn_/out:_fn_
+
+```svelte
+
+in:fn
+```
+
+```svelte
+
+in:fn={params}
+```
+
+```svelte
+
+in:fn|global
+```
+
+```svelte
+
+in:fn|global={params}
+```
+
+```svelte
+
+in:fn|local
+```
+
+```svelte
+
+in:fn|local={params}
+```
+
+```svelte
+
+out:fn
+```
+
+```svelte
+
+out:fn={params}
+```
+
+```svelte
+
+out:fn|global
+```
+
+```svelte
+
+out:fn|global={params}
+```
+
+```svelte
+
+out:fn|local
+```
+
+```svelte
+
+out:fn|local={params}
+```
+
+Similar to `transition:`, but only applies to elements entering (`in:`) or leaving (`out:`) the DOM.
+
+Unlike with `transition:`, transitions applied with `in:` and `out:` are not bidirectional — an in transition will continue to 'play' alongside the out transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.
+
+```svelte
+{#if visible}
+ flies in, fades out
+{/if}
+```
+
+## animate:_fn_
+
+```svelte
+
+animate:name
+```
+
+```svelte
+
+animate:name={params}
+```
+
+```js
+/// copy: false
+// @noErrors
+animation = (node: HTMLElement, { from: DOMRect, to: DOMRect } , params: any) => {
+ delay?: number,
+ duration?: number,
+ easing?: (t: number) => number,
+ css?: (t: number, u: number) => string,
+ tick?: (t: number, u: number) => void
+}
+```
+
+```ts
+/// copy: false
+// @noErrors
+DOMRect {
+ bottom: number,
+ height: number,
+ left: number,
+ right: number,
+ top: number,
+ width: number,
+ x: number,
+ y: number
+}
+```
+
+An animation is triggered when the contents of a [keyed each block](/docs/logic-blocks#each) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an _immediate_ child of a keyed each block.
+
+Animations can be used with Svelte's [built-in animation functions](/docs/svelte-animate) or [custom animation functions](/docs/element-directives#custom-animation-functions).
+
+```svelte
+
+{#each list as item, index (item)}
+ {item}
+{/each}
+```
+
+## Animation Parameters
+
+As with actions and transitions, animations can have parameters.
+
+(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)
+
+```svelte
+{#each list as item, index (item)}
+ {item}
+{/each}
+```
+
+## Custom animation functions
+
+Animations can use custom functions that provide the `node`, an `animation` object and any `parameters` as arguments. The `animation` parameter is an object containing `from` and `to` properties each containing a [DOMRect](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect#Properties) describing the geometry of the element in its `start` and `end` positions. The `from` property is the DOMRect of the element in its starting position, and the `to` property is the DOMRect of the element in its final position after the list has been reordered and the DOM updated.
+
+If the returned object has a `css` method, Svelte will create a CSS animation that plays on the element.
+
+The `t` argument passed to `css` is a value that goes from `0` and `1` after the `easing` function has been applied. The `u` argument is equal to `1 - t`.
+
+The function is called repeatedly _before_ the animation begins, with different `t` and `u` arguments.
+
+
+
+```svelte
+
+
+{#each list as item, index (item)}
+ {item}
+{/each}
+```
+
+A custom animation function can also return a `tick` function, which is called _during_ the animation with the same `t` and `u` arguments.
+
+> If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices.
+
+```svelte
+
+
+{#each list as item, index (item)}
+ {item}
+{/each}
+```
diff --git a/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/06-component-directives.md b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/06-component-directives.md
new file mode 100644
index 0000000000..39bdf80010
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/06-component-directives.md
@@ -0,0 +1,129 @@
+---
+title: Component directives
+---
+
+## on:_eventname_
+
+```svelte
+
+on:eventname={handler}
+```
+
+Components can emit events using [`createEventDispatcher`](/docs/svelte#createeventdispatcher) or by forwarding DOM events.
+
+```svelte
+
+
+
+ dispatch('hello')}> one
+
+
+ two
+```
+
+Listening for component events looks the same as listening for DOM events:
+
+```svelte
+
+```
+
+As with DOM events, if the `on:` directive is used without a value, the event will be forwarded, meaning that a consumer can listen for it.
+
+```svelte
+
+```
+
+## --style-props
+
+```svelte
+
+--style-props="anycssvalue"
+```
+
+You can also pass styles as props to components for the purposes of theming, using CSS custom properties.
+
+Svelte's implementation is essentially syntactic sugar for adding a wrapper element. This example:
+
+```svelte
+
+```
+
+Desugars to this:
+
+```svelte
+
+
+
+```
+
+**Note**: Since this is an extra ``, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.
+
+For SVG namespace, the example above desugars into using `
` instead:
+
+```svelte
+
+
+
+```
+
+**Note**: Since this is an extra ``, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.
+
+Svelte's CSS Variables support allows for easily themeable components:
+
+```svelte
+
+```
+
+So you can set a high-level theme color:
+
+```css
+/* global.css */
+html {
+ --theme-color: black;
+}
+```
+
+Or override it at the consumer level:
+
+```svelte
+
+```
+
+## bind:_property_
+
+```svelte
+bind:property={variable}
+```
+
+You can bind to component props using the same syntax as for elements.
+
+```svelte
+
+```
+
+While Svelte props are reactive without binding, that reactivity only flows downward into the component by default. Using `bind:property` allows changes to the property from within the component to flow back up out of the component.
+
+## bind:this
+
+```svelte
+
+bind:this={component_instance}
+```
+
+Components also support `bind:this`, allowing you to interact with component instances programmatically.
+
+```svelte
+
+
+ cart.empty()}> Empty shopping cart
+```
+
+> Note that we can't do `{cart.empty}` since `cart` is `undefined` when the button is first rendered and throws an error.
diff --git a/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/07-special-elements.md b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/07-special-elements.md
new file mode 100644
index 0000000000..d8395d4981
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/07-special-elements.md
@@ -0,0 +1,348 @@
+---
+title: Special elements
+---
+
+## ``
+
+```svelte
+
+```
+
+```svelte
+
+```
+
+```svelte
+
+```
+
+Components can have child content, in the same way that elements can.
+
+The content is exposed in the child component using the `` element, which can contain fallback content that is rendered if no children are provided.
+
+```svelte
+
+
+
+ this fallback content will be rendered when no content is provided, like in the first example
+
+
+
+
+
+
+
+
+ this is some child content that will overwrite the default slot content
+
+```
+
+Note: If you want to render regular `` element, You can use ` `.
+
+### ``
+
+Named slots allow consumers to target specific areas. They can also have fallback content.
+
+```svelte
+
+
+
No header was provided
+
Some content between header and footer
+
+
+
+
+
+ Hello
+ Copyright (c) 2019 Svelte Industries
+
+```
+
+Components can be placed in a named slot using the syntax ` `.
+In order to place content in a slot without using a wrapper element, you can use the special element ``.
+
+```svelte
+
+
+
No header was provided
+
Some content between header and footer
+
+
+
+
+
+
+
+ All rights reserved.
+ Copyright (c) 2019 Svelte Industries
+
+
+```
+
+### $$slots
+
+`$$slots` is an object whose keys are the names of the slots passed into the component by the parent. If the parent does not pass in a slot with a particular name, that name will not be present in `$$slots`. This allows components to render a slot (and other elements, like wrappers for styling) only if the parent provides it.
+
+Note that explicitly passing in an empty named slot will add that slot's name to `$$slots`. For example, if a parent passes `
` to a child component, `$$slots.title` will be truthy within the child.
+
+```svelte
+
+
+
+ {#if $$slots.description}
+
+
+
+ {/if}
+
+
+
+
+ Blog Post Title
+
+
+```
+
+### ``
+
+Slots can be rendered zero or more times and can pass values _back_ to the parent using props. The parent exposes the values to the slot template using the `let:` directive.
+
+The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `` is equivalent to ``.
+
+```svelte
+
+
+ {#each items as item}
+
+
+
+ {/each}
+
+
+
+
+ {thing.text}
+
+```
+
+Named slots can also expose values. The `let:` directive goes on the element with the `slot` attribute.
+
+```svelte
+
+
+ {#each items as item}
+
+
+
+ {/each}
+
+
+
+
+
+
+ {item.text}
+ Copyright (c) 2019 Svelte Industries
+
+```
+
+## ``
+
+The `` element allows a component to include itself, recursively.
+
+It cannot appear at the top level of your markup; it must be inside an if or each block or passed to a component's slot to prevent an infinite loop.
+
+```svelte
+
+
+
+{#if count > 0}
+ counting down... {count}
+
+{:else}
+ lift-off!
+{/if}
+```
+
+## ``
+
+```svelte
+
+```
+
+The `` element renders a component dynamically, using the component constructor specified as the `this` property. When the property changes, the component is destroyed and recreated.
+
+If `this` is falsy, no component is rendered.
+
+```svelte
+
+```
+
+## ``
+
+```svelte
+
+```
+
+The `` element lets you render an element of a dynamically specified type. This is useful for example when displaying rich text content from a CMS. Any properties and event listeners present will be applied to the element.
+
+The only supported binding is `bind:this`, since the element type-specific bindings that Svelte does at build time (e.g. `bind:value` for input elements) do not work with a dynamic tag type.
+
+If `this` has a nullish value, the element and its children will not be rendered.
+
+If `this` is the name of a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element) (e.g., `br`) and `` has child elements, a runtime error will be thrown in development mode.
+
+```svelte
+
+
+Foo
+```
+
+## ``
+
+```svelte
+
+```
+
+```svelte
+
+```
+
+The `` element allows you to add event listeners to the `window` object without worrying about removing them when the component is destroyed, or checking for the existence of `window` when server-side rendering.
+
+Unlike ``, this element may only appear at the top level of your component and must never be inside a block or element.
+
+```svelte
+
+
+
+
+```
+
+You can also bind to the following properties:
+
+- `innerWidth`
+- `innerHeight`
+- `outerWidth`
+- `outerHeight`
+- `scrollX`
+- `scrollY`
+- `online` — an alias for `window.navigator.onLine`
+- `devicePixelRatio`
+
+All except `scrollX` and `scrollY` are readonly.
+
+```svelte
+
+```
+
+> Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. However, if the scrolling behaviour is desired, call `scrollTo()` in `onMount()`.
+
+## ``
+
+```svelte
+
+```
+
+```svelte
+
+```
+
+Similarly to ``, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on `document`.
+
+As with ``, this element may only appear the top level of your component and must never be inside a block or element.
+
+```svelte
+
+```
+
+You can also bind to the following properties:
+
+- `fullscreenElement`
+- `visibilityState`
+
+All are readonly.
+
+## ``
+
+```svelte
+
+```
+
+Similarly to ``, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on the `` element.
+
+As with `` and ``, this element may only appear the top level of your component and must never be inside a block or element.
+
+```svelte
+
+```
+
+## ``
+
+```svelte
+...
+```
+
+This element makes it possible to insert elements into `document.head`. During server-side rendering, `head` content is exposed separately to the main `html` content.
+
+As with ``, `` and ``, this element may only appear at the top level of your component and must never be inside a block or element.
+
+```svelte
+
+ Hello world!
+
+
+```
+
+## ``
+
+```svelte
+
+```
+
+The `` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](/docs/svelte-compiler#compile). The possible options are:
+
+- `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
+- `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
+- `accessors={true}` — adds getters and setters for the component's props
+- `accessors={false}` — the default
+- `namespace="..."` — the namespace where this component will be used, most commonly "svg"; use the "foreign" namespace to opt out of case-insensitive attribute names and HTML-specific warnings
+- `customElement="..."` — the name to use when compiling this component as a custom element
+
+```svelte
+
+```
+
+## ``
+
+The `` element allows you to place content in a [named slot](/docs/special-elements#slot-slot-name-name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
+
+```svelte
+
+
+
No header was provided
+
Some content between header and footer
+
+
+
+
+
+ Hello
+
+ All rights reserved.
+ Copyright (c) 2019 Svelte Industries
+
+
+```
diff --git a/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/index.md b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/index.md
new file mode 100644
index 0000000000..0b3aac71ad
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/02-template-syntax/index.md
@@ -0,0 +1,3 @@
+---
+title: "Template Syntax"
+---
\ No newline at end of file
diff --git a/apps/svelte.dev/content/docs/svelte/v04/03-runtime/01-svelte.md b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/01-svelte.md
new file mode 100644
index 0000000000..03851b3ab0
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/01-svelte.md
@@ -0,0 +1,565 @@
+---
+title: svelte
+---
+
+The `svelte` package exposes [lifecycle functions](https://learn.svelte.dev/tutorial/onmount) and the [context API](https://learn.svelte.dev/tutorial/context-api).
+
+## `onMount`
+
+
+
+```dts
+function onMount(
+ fn: () =>
+ | NotFunction
+ | Promise>
+ | (() => any)
+): void;
+```
+
+
+
+The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live _inside_ the component; it can be called from an external module).
+
+`onMount` does not run inside a [server-side component](/docs/server-side-component-api).
+
+```svelte
+
+```
+
+If a function is returned from `onMount`, it will be called when the component is unmounted.
+
+```svelte
+
+```
+
+> This behaviour will only work when the function passed to `onMount` _synchronously_ returns a value. `async` functions always return a `Promise`, and as such cannot _synchronously_ return a function.
+
+## `beforeUpdate`
+
+
+
+```dts
+function beforeUpdate(fn: () => any): void;
+```
+
+
+
+Schedules a callback to run immediately before the component is updated after any state change.
+
+> The first time the callback runs will be before the initial `onMount`
+
+```svelte
+
+```
+
+## `afterUpdate`
+
+
+
+```dts
+function afterUpdate(fn: () => any): void;
+```
+
+
+
+Schedules a callback to run immediately after the component has been updated.
+
+> The first time the callback runs will be after the initial `onMount`
+
+```svelte
+
+```
+
+## `onDestroy`
+
+
+
+```dts
+function onDestroy(fn: () => any): void;
+```
+
+
+
+Schedules a callback to run immediately before the component is unmounted.
+
+Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the only one that runs inside a server-side component.
+
+```svelte
+
+```
+
+## `tick`
+
+
+
+```dts
+function tick(): Promise;
+```
+
+
+
+Returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none.
+
+```svelte
+
+```
+
+## `setContext`
+
+
+
+```dts
+function setContext(key: any, context: T): T;
+```
+
+
+
+Associates an arbitrary `context` object with the current component and the specified `key` and returns that object. The context is then available to children of the component (including slotted content) with `getContext`.
+
+Like lifecycle functions, this must be called during component initialisation.
+
+```svelte
+
+```
+
+> Context is not inherently reactive. If you need reactive values in context then you can pass a store into context, which _will_ be reactive.
+
+## `getContext`
+
+
+
+```dts
+function getContext(key: any): T;
+```
+
+
+
+Retrieves the context that belongs to the closest parent component with the specified `key`. Must be called during component initialisation.
+
+```svelte
+
+```
+
+## `hasContext`
+
+
+
+```dts
+function hasContext(key: any): boolean;
+```
+
+
+
+Checks whether a given `key` has been set in the context of a parent component. Must be called during component initialisation.
+
+```svelte
+
+```
+
+## `getAllContexts`
+
+
+
+```dts
+function getAllContexts<
+ T extends Map
= Map
+>(): T;
+```
+
+
+
+Retrieves the whole context map that belongs to the closest parent component. Must be called during component initialisation. Useful, for example, if you programmatically create a component and want to pass the existing context to it.
+
+```svelte
+
+```
+
+## `createEventDispatcher`
+
+
+
+```dts
+function createEventDispatcher<
+ EventMap extends Record = any
+>(): EventDispatcher;
+```
+
+
+
+Creates an event dispatcher that can be used to dispatch [component events](/docs/component-directives#on-eventname). Event dispatchers are functions that can take two arguments: `name` and `detail`.
+
+Component events created with `createEventDispatcher` create a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture). The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) property and can contain any type of data.
+
+```svelte
+
+
+ dispatch('notify', 'detail value')}>Fire Event
+```
+
+Events dispatched from child components can be listened to in their parent. Any data provided when the event was dispatched is available on the `detail` property of the event object.
+
+```svelte
+
+
+
+```
+
+Events can be cancelable by passing a third parameter to the dispatch function. The function returns `false` if the event is cancelled with `event.preventDefault()`, otherwise it returns `true`.
+
+```svelte
+
+```
+
+You can type the event dispatcher to define which events it can receive. This will make your code more type safe both within the component (wrong calls are flagged) and when using the component (types of the events are now narrowed). See [here](typescript#script-lang-ts-events) how to do it.
+
+## Types
+
+
+
+### ComponentConstructorOptions
+
+
+
+
+
+
+
+```dts
+interface ComponentConstructorOptions<
+ Props extends Record
= Record
+> {/*…*/}
+```
+
+
+
+```dts
+target: Element | Document | ShadowRoot;
+```
+
+
+
+
+
+
+```dts
+anchor?: Element;
+```
+
+
+
+
+
+
+```dts
+props?: Props;
+```
+
+
+
+
+
+
+```dts
+context?: Map
;
+```
+
+
+
+
+
+
+```dts
+hydrate?: boolean;
+```
+
+
+
+
+
+
+```dts
+intro?: boolean;
+```
+
+
+
+
+
+
+```dts
+$$inline?: boolean;
+```
+
+
+
+
+### ComponentEvents
+
+
+
+Convenience type to get the events the given component expects. Example:
+```html
+
+
+
+```
+
+
+
+```dts
+type ComponentEvents
=
+ Component extends SvelteComponent
+ ? Events
+ : never;
+```
+
+
+
+### ComponentProps
+
+
+
+Convenience type to get the props the given component expects. Example:
+```html
+
+```
+
+
+
+```dts
+type ComponentProps =
+ Component extends SvelteComponent
+ ? Props
+ : never;
+```
+
+
+
+### ComponentType
+
+
+
+Convenience type to get the type of a Svelte component. Useful for example in combination with
+dynamic components using ``.
+
+Example:
+```html
+
+
+
+
+```
+
+
+
+```dts
+type ComponentType<
+ Component extends SvelteComponent = SvelteComponent
+> = (new (
+ options: ComponentConstructorOptions<
+ Component extends SvelteComponent
+ ? Props
+ : Record
+ >
+) => Component) & {
+ /** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
+ element?: typeof HTMLElement;
+};
+```
+
+
+
+### SvelteComponent
+
+
+
+Base class for Svelte components with some minor dev-enhancements. Used when dev=true.
+
+Can be used to create strongly typed Svelte components.
+
+#### Example:
+
+You have component library on npm called `component-library`, from which
+you export a component called `MyComponent`. For Svelte+TypeScript users,
+you want to provide typings. Therefore you create a `index.d.ts`:
+```ts
+import { SvelteComponent } from "svelte";
+export class MyComponent extends SvelteComponent<{foo: string}> {}
+```
+Typing this makes it possible for IDEs like VS Code with the Svelte extension
+to provide intellisense and to use the component like this in a Svelte file
+with TypeScript:
+```svelte
+
+
+```
+
+
+
+```dts
+class SvelteComponent<
+ Props extends Record
= any,
+ Events extends Record = any,
+ Slots extends Record = any
+> extends SvelteComponent_1 {/*…*/}
+```
+
+
+
+```dts
+[prop: string]: any;
+```
+
+
+
+
+
+
+```dts
+constructor(options: ComponentConstructorOptions
);
+```
+
+
+
+
+
+
+```dts
+$capture_state(): void;
+```
+
+
+
+
+
+
+```dts
+$inject_state(): void;
+```
+
+
+
+
+### SvelteComponentTyped
+
+ Use SvelteComponent
instead. See PR for more information: https://github.com/sveltejs/svelte/pull/8512
+
+
+
+
+
+
+```dts
+class SvelteComponentTyped<
+ Props extends Record
= any,
+ Events extends Record = any,
+ Slots extends Record = any
+> extends SvelteComponent {}
+```
+
+
+
+
diff --git a/apps/svelte.dev/content/docs/svelte/v04/03-runtime/02-svelte-store.md b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/02-svelte-store.md
new file mode 100644
index 0000000000..92128027ab
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/02-svelte-store.md
@@ -0,0 +1,448 @@
+---
+title: 'svelte/store'
+---
+
+The `svelte/store` module exports functions for creating [readable](/docs/svelte-store#readable), [writable](/docs/svelte-store#writable) and [derived](/docs/svelte-store#derived) stores.
+
+Keep in mind that you don't _have_ to use these functions to enjoy the [reactive `$store` syntax](/docs/svelte-components#script-4-prefix-stores-with-$-to-access-their-values) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](/docs/svelte-store#derived).
+
+This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](/docs/svelte-components#script-4-prefix-stores-with-$-to-access-their-values) to see what a correct implementation looks like.
+
+## `writable`
+
+
+
+```dts
+function writable(
+ value?: T | undefined,
+ start?: StartStopNotifier | undefined
+): Writable;
+```
+
+
+
+Function that creates a store which has values that can be set from 'outside' components. It gets created as an object with additional `set` and `update` methods.
+
+`set` is a method that takes one argument which is the value to be set. The store value gets set to the value of the argument if the store value is not already equal to it.
+
+`update` is a method that takes one argument which is a callback. The callback takes the existing store value as its argument and returns the new value to be set to the store.
+
+```js
+/// file: store.js
+import { writable } from 'svelte/store';
+
+const count = writable(0);
+
+count.subscribe((value) => {
+ console.log(value);
+}); // logs '0'
+
+count.set(1); // logs '1'
+
+count.update((n) => n + 1); // logs '2'
+```
+
+If a function is passed as the second argument, it will be called when the number of subscribers goes from zero to one (but not from one to two, etc). That function will be passed a `set` function which changes the value of the store, and an `update` function which works like the `update` method on the store, taking a callback to calculate the store's new value from its old value. It must return a `stop` function that is called when the subscriber count goes from one to zero.
+
+```js
+/// file: store.js
+import { writable } from 'svelte/store';
+
+const count = writable(0, () => {
+ console.log('got a subscriber');
+ return () => console.log('no more subscribers');
+});
+
+count.set(1); // does nothing
+
+const unsubscribe = count.subscribe((value) => {
+ console.log(value);
+}); // logs 'got a subscriber', then '1'
+
+unsubscribe(); // logs 'no more subscribers'
+```
+
+Note that the value of a `writable` is lost when it is destroyed, for example when the page is refreshed. However, you can write your own logic to sync the value to for example the `localStorage`.
+
+## `readable`
+
+
+
+```dts
+function readable(
+ value?: T | undefined,
+ start?: StartStopNotifier | undefined
+): Readable;
+```
+
+
+
+Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to `writable`.
+
+```ts
+import { readable } from 'svelte/store';
+
+const time = readable(new Date(), (set) => {
+ set(new Date());
+
+ const interval = setInterval(() => {
+ set(new Date());
+ }, 1000);
+
+ return () => clearInterval(interval);
+});
+
+const ticktock = readable('tick', (set, update) => {
+ const interval = setInterval(() => {
+ update((sound) => (sound === 'tick' ? 'tock' : 'tick'));
+ }, 1000);
+
+ return () => clearInterval(interval);
+});
+```
+
+## `derived`
+
+
+
+```dts
+function derived(
+ stores: S,
+ fn: (
+ values: StoresValues,
+ set: (value: T) => void,
+ update: (fn: Updater) => void
+ ) => Unsubscriber | void,
+ initial_value?: T | undefined
+): Readable;
+```
+
+
+
+
+
+```dts
+function derived(
+ stores: S,
+ fn: (values: StoresValues) => T,
+ initial_value?: T | undefined
+): Readable;
+```
+
+
+
+Derives a store from one or more other stores. The callback runs initially when the first subscriber subscribes and then whenever the store dependencies change.
+
+In the simplest version, `derived` takes a single store, and the callback returns a derived value.
+
+```ts
+// @filename: ambient.d.ts
+import { type Writable } from 'svelte/store';
+
+declare global {
+ const a: Writable;
+}
+
+export {};
+
+// @filename: index.ts
+// ---cut---
+import { derived } from 'svelte/store';
+
+const doubled = derived(a, ($a) => $a * 2);
+```
+
+The callback can set a value asynchronously by accepting a second argument, `set`, and an optional third argument, `update`, calling either or both of them when appropriate.
+
+In this case, you can also pass a third argument to `derived` — the initial value of the derived store before `set` or `update` is first called. If no initial value is specified, the store's initial value will be `undefined`.
+
+```ts
+// @filename: ambient.d.ts
+import { type Writable } from 'svelte/store';
+
+declare global {
+ const a: Writable;
+}
+
+export {};
+
+// @filename: index.ts
+// @errors: 18046 2769 7006
+// ---cut---
+import { derived } from 'svelte/store';
+
+const delayed = derived(
+ a,
+ ($a, set) => {
+ setTimeout(() => set($a), 1000);
+ },
+ 2000
+);
+
+const delayedIncrement = derived(a, ($a, set, update) => {
+ set($a);
+ setTimeout(() => update((x) => x + 1), 1000);
+ // every time $a produces a value, this produces two
+ // values, $a immediately and then $a + 1 a second later
+});
+```
+
+If you return a function from the callback, it will be called when a) the callback runs again, or b) the last subscriber unsubscribes.
+
+```ts
+// @filename: ambient.d.ts
+import { type Writable } from 'svelte/store';
+
+declare global {
+ const frequency: Writable;
+}
+
+export {};
+
+// @filename: index.ts
+// ---cut---
+import { derived } from 'svelte/store';
+
+const tick = derived(
+ frequency,
+ ($frequency, set) => {
+ const interval = setInterval(() => {
+ set(Date.now());
+ }, 1000 / $frequency);
+
+ return () => {
+ clearInterval(interval);
+ };
+ },
+ 2000
+);
+```
+
+In both cases, an array of arguments can be passed as the first argument instead of a single store.
+
+```ts
+// @filename: ambient.d.ts
+import { type Writable } from 'svelte/store';
+
+declare global {
+ const a: Writable;
+ const b: Writable;
+}
+
+export {};
+
+// @filename: index.ts
+
+// ---cut---
+import { derived } from 'svelte/store';
+
+const summed = derived([a, b], ([$a, $b]) => $a + $b);
+
+const delayed = derived([a, b], ([$a, $b], set) => {
+ setTimeout(() => set($a + $b), 1000);
+});
+```
+
+## `readonly`
+
+
+
+```dts
+function readonly(store: Readable): Readable;
+```
+
+
+
+This simple helper function makes a store readonly. You can still subscribe to the changes from the original one using this new readable store.
+
+```js
+import { readonly, writable } from 'svelte/store';
+
+const writableStore = writable(1);
+const readableStore = readonly(writableStore);
+
+readableStore.subscribe(console.log);
+
+writableStore.set(2); // console: 2
+// @errors: 2339
+readableStore.set(2); // ERROR
+```
+
+## `get`
+
+
+
+```dts
+function get(store: Readable): T;
+```
+
+
+
+Generally, you should read the value of a store by subscribing to it and using the value as it changes over time. Occasionally, you may need to retrieve the value of a store to which you're not subscribed. `get` allows you to do so.
+
+> This works by creating a subscription, reading the value, then unsubscribing. It's therefore not recommended in hot code paths.
+
+```ts
+// @filename: ambient.d.ts
+import { type Writable } from 'svelte/store';
+
+declare global {
+ const store: Writable;
+}
+
+export {};
+
+// @filename: index.ts
+// ---cut---
+import { get } from 'svelte/store';
+
+const value = get(store);
+```
+
+## Types
+
+
+
+### Readable
+
+
+
+Readable interface for subscribing.
+
+
+
+```dts
+interface Readable
{/*…*/}
+```
+
+
+
+```dts
+subscribe(this: void, run: Subscriber
, invalidate?: Invalidator): Unsubscriber;
+```
+
+
+
+
+
+- `run` subscription callback
+- `invalidate` cleanup callback
+
+
+
+Subscribe on value changes.
+
+
+
+
+### StartStopNotifier
+
+
+
+Start and stop notification callbacks.
+This function is called when the first subscriber subscribes.
+
+
+
+```dts
+type StartStopNotifier = (
+ set: (value: T) => void,
+ update: (fn: Updater) => void
+) => void | (() => void);
+```
+
+
+
+### Subscriber
+
+
+
+Callback to inform of a value updates.
+
+
+
+```dts
+type Subscriber = (value: T) => void;
+```
+
+
+
+### Unsubscriber
+
+
+
+Unsubscribes from value updates.
+
+
+
+```dts
+type Unsubscriber = () => void;
+```
+
+
+
+### Updater
+
+
+
+Callback to update a value.
+
+
+
+```dts
+type Updater = (value: T) => T;
+```
+
+
+
+### Writable
+
+
+
+Writable interface for both updating and subscribing.
+
+
+
+```dts
+interface Writable
extends Readable {/*…*/}
+```
+
+
+
+```dts
+set(this: void, value: T): void;
+```
+
+
+
+
+
+- `value` to set
+
+
+
+Set value and inform subscribers.
+
+
+
+
+
+
+```dts
+update(this: void, updater: Updater
): void;
+```
+
+
+
+
+
+- `updater` callback
+
+
+
+Update value using callback and inform subscribers.
+
+
+
+
+
diff --git a/apps/svelte.dev/content/docs/svelte/v04/03-runtime/03-svelte-motion.md b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/03-svelte-motion.md
new file mode 100644
index 0000000000..c1594221dc
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/03-svelte-motion.md
@@ -0,0 +1,276 @@
+---
+title: 'svelte/motion'
+---
+
+The `svelte/motion` module exports two functions, `tweened` and `spring`, for creating writable stores whose values change over time after `set` and `update`, rather than immediately.
+
+## `tweened`
+
+
+
+```dts
+function tweened(
+ value?: T | undefined,
+ defaults?: TweenedOptions | undefined
+): Tweened;
+```
+
+
+
+Tweened stores update their values over a fixed duration. The following options are available:
+
+- `delay` (`number`, default 0) — milliseconds before starting
+- `duration` (`number` | `function`, default 400) — milliseconds the tween lasts
+- `easing` (`function`, default `t => t`) — an [easing function](/docs/svelte-easing)
+- `interpolate` (`function`) — see below
+
+`store.set` and `store.update` can accept a second `options` argument that will override the options passed in upon instantiation.
+
+Both functions return a Promise that resolves when the tween completes. If the tween is interrupted, the promise will never resolve.
+
+Out of the box, Svelte will interpolate between two numbers, two arrays or two objects (as long as the arrays and objects are the same 'shape', and their 'leaf' properties are also numbers).
+
+```svelte
+
+
+
+ embiggen
+
+```
+
+If the initial value is `undefined` or `null`, the first value change will take effect immediately. This is useful when you have tweened values that are based on props, and don't want any motion when the component first renders.
+
+```ts
+// @filename: ambient.d.ts
+declare global {
+ var $size: number;
+ var big: number;
+}
+
+export {};
+// @filename: motion.ts
+// ---cut---
+import { tweened } from 'svelte/motion';
+import { cubicOut } from 'svelte/easing';
+
+const size = tweened(undefined, {
+ duration: 300,
+ easing: cubicOut
+});
+
+$: $size = big ? 100 : 10;
+```
+
+The `interpolate` option allows you to tween between _any_ arbitrary values. It must be an `(a, b) => t => value` function, where `a` is the starting value, `b` is the target value, `t` is a number between 0 and 1, and `value` is the result. For example, we can use the [d3-interpolate](https://github.com/d3/d3-interpolate) package to smoothly interpolate between two colours.
+
+```svelte
+
+
+{#each colors as c}
+ color.set(c)}>
+ {c}
+
+{/each}
+
+{$color}
+```
+
+## `spring`
+
+
+
+```dts
+function spring(
+ value?: T | undefined,
+ opts?: SpringOpts | undefined
+): Spring;
+```
+
+
+
+A `spring` store gradually changes to its target value based on its `stiffness` and `damping` parameters. Whereas `tweened` stores change their values over a fixed duration, `spring` stores change over a duration that is determined by their existing velocity, allowing for more natural-seeming motion in many situations. The following options are available:
+
+- `stiffness` (`number`, default `0.15`) — a value between 0 and 1 where higher means a 'tighter' spring
+- `damping` (`number`, default `0.8`) — a value between 0 and 1 where lower means a 'springier' spring
+- `precision` (`number`, default `0.01`) — determines the threshold at which the spring is considered to have 'settled', where lower means more precise
+
+All of the options above can be changed while the spring is in motion, and will take immediate effect.
+
+```js
+import { spring } from 'svelte/motion';
+
+const size = spring(100);
+size.stiffness = 0.3;
+size.damping = 0.4;
+size.precision = 0.005;
+```
+
+As with [`tweened`](/docs/svelte-motion#tweened) stores, `set` and `update` return a Promise that resolves if the spring settles.
+
+Both `set` and `update` can take a second argument — an object with `hard` or `soft` properties. `{ hard: true }` sets the target value immediately; `{ soft: n }` preserves existing momentum for `n` seconds before settling. `{ soft: true }` is equivalent to `{ soft: 0.5 }`.
+
+```js
+import { spring } from 'svelte/motion';
+
+const coords = spring({ x: 50, y: 50 });
+// updates the value immediately
+coords.set({ x: 100, y: 200 }, { hard: true });
+// preserves existing momentum for 1s
+coords.update(
+ (target_coords, coords) => {
+ return { x: target_coords.x, y: coords.y };
+ },
+ { soft: 1 }
+);
+```
+
+[See a full example on the spring tutorial.](https://learn.svelte.dev/tutorial/springs)
+
+```svelte
+
+```
+
+If the initial value is `undefined` or `null`, the first value change will take effect immediately, just as with `tweened` values (see above).
+
+```ts
+// @filename: ambient.d.ts
+declare global {
+ var $size: number;
+ var big: number;
+}
+
+export {};
+
+// @filename: motion.ts
+// ---cut---
+import { spring } from 'svelte/motion';
+
+const size = spring();
+$: $size = big ? 100 : 10;
+```
+
+## Types
+
+
+
+### Spring
+
+
+
+
+
+
+
+```dts
+interface Spring
extends Readable {/*…*/}
+```
+
+
+
+```dts
+set: (new_value: T, opts?: SpringUpdateOpts) => Promise
;
+```
+
+
+
+
+
+
+```dts
+update: (fn: Updater
, opts?: SpringUpdateOpts) => Promise;
+```
+
+
+
+
+
+
+```dts
+precision: number;
+```
+
+
+
+
+
+
+```dts
+damping: number;
+```
+
+
+
+
+
+
+```dts
+stiffness: number;
+```
+
+
+
+
+### Tweened
+
+
+
+
+
+
+
+```dts
+interface Tweened
extends Readable {/*…*/}
+```
+
+
+
+```dts
+set(value: T, opts?: TweenedOptions
): Promise;
+```
+
+
+
+
+
+
+```dts
+update(updater: Updater
, opts?: TweenedOptions): Promise;
+```
+
+
+
+
+
diff --git a/apps/svelte.dev/content/docs/svelte/v04/03-runtime/04-svelte-transition.md b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/04-svelte-transition.md
new file mode 100644
index 0000000000..002b490fc6
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/04-svelte-transition.md
@@ -0,0 +1,842 @@
+---
+title: 'svelte/transition'
+---
+
+The `svelte/transition` module exports seven functions: `fade`, `blur`, `fly`, `slide`, `scale`, `draw` and `crossfade`. They are for use with Svelte [`transitions`](/docs/element-directives#transition-fn).
+
+## `fade`
+
+
+
+```dts
+function fade(
+ node: Element,
+ { delay, duration, easing }?: FadeParams | undefined
+): TransitionConfig;
+```
+
+
+
+```svelte
+
+transition:fade={params}
+```
+
+```svelte
+
+in:fade={params}
+```
+
+```svelte
+
+out:fade={params}
+```
+
+Animates the opacity of an element from 0 to the current opacity for `in` transitions and from the current opacity to 0 for `out` transitions.
+
+`fade` accepts the following parameters:
+
+- `delay` (`number`, default 0) — milliseconds before starting
+- `duration` (`number`, default 400) — milliseconds the transition lasts
+- `easing` (`function`, default `linear`) — an [easing function](/docs/svelte-easing)
+
+You can see the `fade` transition in action in the [transition tutorial](https://learn.svelte.dev/tutorial/transition).
+
+```svelte
+
+
+{#if condition}
+ fades in and out
+{/if}
+```
+
+## `blur`
+
+
+
+```dts
+function blur(
+ node: Element,
+ {
+ delay,
+ duration,
+ easing,
+ amount,
+ opacity
+ }?: BlurParams | undefined
+): TransitionConfig;
+```
+
+
+
+```svelte
+
+transition:blur={params}
+```
+
+```svelte
+
+in:blur={params}
+```
+
+```svelte
+
+out:blur={params}
+```
+
+Animates a `blur` filter alongside an element's opacity.
+
+`blur` accepts the following parameters:
+
+- `delay` (`number`, default 0) — milliseconds before starting
+- `duration` (`number`, default 400) — milliseconds the transition lasts
+- `easing` (`function`, default `cubicInOut`) — an [easing function](/docs/svelte-easing)
+- `opacity` (`number`, default 0) - the opacity value to animate out to and in from
+- `amount` (`number | string`, default 5) - the size of the blur. Supports css units (for example: `"4rem"`). The default unit is `px`
+
+```svelte
+
+
+{#if condition}
+ fades in and out
+{/if}
+```
+
+## `fly`
+
+
+
+```dts
+function fly(
+ node: Element,
+ {
+ delay,
+ duration,
+ easing,
+ x,
+ y,
+ opacity
+ }?: FlyParams | undefined
+): TransitionConfig;
+```
+
+
+
+```svelte
+
+transition:fly={params}
+```
+
+```svelte
+
+in:fly={params}
+```
+
+```svelte
+
+out:fly={params}
+```
+
+Animates the x and y positions and the opacity of an element. `in` transitions animate from the provided values, passed as parameters to the element's default values. `out` transitions animate from the element's default values to the provided values.
+
+`fly` accepts the following parameters:
+
+- `delay` (`number`, default 0) — milliseconds before starting
+- `duration` (`number`, default 400) — milliseconds the transition lasts
+- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
+- `x` (`number | string`, default 0) - the x offset to animate out to and in from
+- `y` (`number | string`, default 0) - the y offset to animate out to and in from
+- `opacity` (`number`, default 0) - the opacity value to animate out to and in from
+
+x and y use `px` by default but support css units, for example `x: '100vw'` or `y: '50%'`.
+You can see the `fly` transition in action in the [transition tutorial](https://learn.svelte.dev/tutorial/adding-parameters-to-transitions).
+
+```svelte
+
+
+{#if condition}
+
+ flies in and out
+
+{/if}
+```
+
+## `slide`
+
+
+
+```dts
+function slide(
+ node: Element,
+ {
+ delay,
+ duration,
+ easing,
+ axis
+ }?: SlideParams | undefined
+): TransitionConfig;
+```
+
+
+
+```svelte
+
+transition:slide={params}
+```
+
+```svelte
+
+in:slide={params}
+```
+
+```svelte
+
+out:slide={params}
+```
+
+Slides an element in and out.
+
+`slide` accepts the following parameters:
+
+- `delay` (`number`, default 0) — milliseconds before starting
+- `duration` (`number`, default 400) — milliseconds the transition lasts
+- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
+
+* `axis` (`x` | `y`, default `y`) — the axis of motion along which the transition occurs
+
+```svelte
+
+
+{#if condition}
+
+ slides in and out horizontally
+
+{/if}
+```
+
+## `scale`
+
+
+
+```dts
+function scale(
+ node: Element,
+ {
+ delay,
+ duration,
+ easing,
+ start,
+ opacity
+ }?: ScaleParams | undefined
+): TransitionConfig;
+```
+
+
+
+```svelte
+
+transition:scale={params}
+```
+
+```svelte
+
+in:scale={params}
+```
+
+```svelte
+
+out:scale={params}
+```
+
+Animates the opacity and scale of an element. `in` transitions animate from an element's current (default) values to the provided values, passed as parameters. `out` transitions animate from the provided values to an element's default values.
+
+`scale` accepts the following parameters:
+
+- `delay` (`number`, default 0) — milliseconds before starting
+- `duration` (`number`, default 400) — milliseconds the transition lasts
+- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
+- `start` (`number`, default 0) - the scale value to animate out to and in from
+- `opacity` (`number`, default 0) - the opacity value to animate out to and in from
+
+```svelte
+
+
+{#if condition}
+
+ scales in and out
+
+{/if}
+```
+
+## `draw`
+
+
+
+```dts
+function draw(
+ node: SVGElement & {
+ getTotalLength(): number;
+ },
+ {
+ delay,
+ speed,
+ duration,
+ easing
+ }?: DrawParams | undefined
+): TransitionConfig;
+```
+
+
+
+```svelte
+
+transition:draw={params}
+```
+
+```svelte
+
+in:draw={params}
+```
+
+```svelte
+
+out:draw={params}
+```
+
+Animates the stroke of an SVG element, like a snake in a tube. `in` transitions begin with the path invisible and draw the path to the screen over time. `out` transitions start in a visible state and gradually erase the path. `draw` only works with elements that have a `getTotalLength` method, like `` and ``.
+
+`draw` accepts the following parameters:
+
+- `delay` (`number`, default 0) — milliseconds before starting
+- `speed` (`number`, default undefined) - the speed of the animation, see below.
+- `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
+- `easing` (`function`, default `cubicInOut`) — an [easing function](/docs/svelte-easing)
+
+The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is a modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it.
+
+```svelte
+
+
+
+ {#if condition}
+
+ {/if}
+
+```
+
+## `crossfade`
+
+
+
+```dts
+function crossfade({
+ fallback,
+ ...defaults
+}: CrossfadeParams & {
+ fallback?:
+ | ((
+ node: Element,
+ params: CrossfadeParams,
+ intro: boolean
+ ) => TransitionConfig)
+ | undefined;
+}): [
+ (
+ node: any,
+ params: CrossfadeParams & {
+ key: any;
+ }
+ ) => () => TransitionConfig,
+ (
+ node: any,
+ params: CrossfadeParams & {
+ key: any;
+ }
+ ) => () => TransitionConfig
+];
+```
+
+
+
+The `crossfade` function creates a pair of [transitions](/docs/element-directives#transition-fn) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
+
+`crossfade` accepts the following parameters:
+
+- `delay` (`number`, default 0) — milliseconds before starting
+- `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
+- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
+- `fallback` (`function`) — A fallback [transition](/docs/element-directives#transition-fn) to use for send when there is no matching element being received, and for receive when there is no element being sent.
+
+```svelte
+
+
+{#if condition}
+ BIG ELEM
+{:else}
+ small elem
+{/if}
+```
+
+## Types
+
+
+
+### BlurParams
+
+
+
+
+
+
+
+```dts
+interface BlurParams {/*…*/}
+```
+
+
+
+```dts
+delay?: number;
+```
+
+
+
+
+
+
+```dts
+duration?: number;
+```
+
+
+
+
+
+
+```dts
+easing?: EasingFunction;
+```
+
+
+
+
+
+
+```dts
+amount?: number | string;
+```
+
+
+
+
+
+
+```dts
+opacity?: number;
+```
+
+
+
+
+### CrossfadeParams
+
+
+
+
+
+
+
+```dts
+interface CrossfadeParams {/*…*/}
+```
+
+
+
+```dts
+delay?: number;
+```
+
+
+
+
+
+
+```dts
+duration?: number | ((len: number) => number);
+```
+
+
+
+
+
+
+```dts
+easing?: EasingFunction;
+```
+
+
+
+
+### DrawParams
+
+
+
+
+
+
+
+```dts
+interface DrawParams {/*…*/}
+```
+
+
+
+```dts
+delay?: number;
+```
+
+
+
+
+
+
+```dts
+speed?: number;
+```
+
+
+
+
+
+
+```dts
+duration?: number | ((len: number) => number);
+```
+
+
+
+
+
+
+```dts
+easing?: EasingFunction;
+```
+
+
+
+
+### EasingFunction
+
+
+
+
+
+
+
+```dts
+type EasingFunction = (t: number) => number;
+```
+
+
+
+### FadeParams
+
+
+
+
+
+
+
+```dts
+interface FadeParams {/*…*/}
+```
+
+
+
+```dts
+delay?: number;
+```
+
+
+
+
+
+
+```dts
+duration?: number;
+```
+
+
+
+
+
+
+```dts
+easing?: EasingFunction;
+```
+
+
+
+
+### FlyParams
+
+
+
+
+
+
+
+```dts
+interface FlyParams {/*…*/}
+```
+
+
+
+```dts
+delay?: number;
+```
+
+
+
+
+
+
+```dts
+duration?: number;
+```
+
+
+
+
+
+
+```dts
+easing?: EasingFunction;
+```
+
+
+
+
+
+
+```dts
+x?: number | string;
+```
+
+
+
+
+
+
+```dts
+y?: number | string;
+```
+
+
+
+
+
+
+```dts
+opacity?: number;
+```
+
+
+
+
+### ScaleParams
+
+
+
+
+
+
+
+```dts
+interface ScaleParams {/*…*/}
+```
+
+
+
+```dts
+delay?: number;
+```
+
+
+
+
+
+
+```dts
+duration?: number;
+```
+
+
+
+
+
+
+```dts
+easing?: EasingFunction;
+```
+
+
+
+
+
+
+```dts
+start?: number;
+```
+
+
+
+
+
+
+```dts
+opacity?: number;
+```
+
+
+
+
+### SlideParams
+
+
+
+
+
+
+
+```dts
+interface SlideParams {/*…*/}
+```
+
+
+
+```dts
+delay?: number;
+```
+
+
+
+
+
+
+```dts
+duration?: number;
+```
+
+
+
+
+
+
+```dts
+easing?: EasingFunction;
+```
+
+
+
+
+
+
+```dts
+axis?: 'x' | 'y';
+```
+
+
+
+
+### TransitionConfig
+
+
+
+
+
+
+
+```dts
+interface TransitionConfig {/*…*/}
+```
+
+
+
+```dts
+delay?: number;
+```
+
+
+
+
+
+
+```dts
+duration?: number;
+```
+
+
+
+
+
+
+```dts
+easing?: EasingFunction;
+```
+
+
+
+
+
+
+```dts
+css?: (t: number, u: number) => string;
+```
+
+
+
+
+
+
+```dts
+tick?: (t: number, u: number) => void;
+```
+
+
+
+
+
diff --git a/apps/svelte.dev/content/docs/svelte/v04/03-runtime/05-svelte-animate.md b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/05-svelte-animate.md
new file mode 100644
index 0000000000..fe1449d60f
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/05-svelte-animate.md
@@ -0,0 +1,162 @@
+---
+title: 'svelte/animate'
+---
+
+The `svelte/animate` module exports one function for use with Svelte [animations](/docs/element-directives#animate-fn).
+
+## `flip`
+
+
+
+```dts
+function flip(
+ node: Element,
+ {
+ from,
+ to
+ }: {
+ from: DOMRect;
+ to: DOMRect;
+ },
+ params?: FlipParams
+): AnimationConfig;
+```
+
+
+
+```svelte
+
+animate:flip={params}
+```
+
+The `flip` function calculates the start and end position of an element and animates between them, translating the `x` and `y` values. `flip` stands for [First, Last, Invert, Play](https://aerotwist.com/blog/flip-your-animations/).
+
+`flip` accepts the following parameters:
+
+- `delay` (`number`, default 0) — milliseconds before starting
+- `duration` (`number` | `function`, default `d => Math.sqrt(d) * 120`) — see below
+- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
+
+`duration` can be provided as either:
+
+- a `number`, in milliseconds.
+- a function, `distance: number => duration: number`, receiving the distance the element will travel in pixels and returning the duration in milliseconds. This allows you to assign a duration that is relative to the distance travelled by each element.
+
+You can see a full example on the [animations tutorial](https://learn.svelte.dev/tutorial/animate).
+
+```svelte
+
+
+{#each list as n (n)}
+
+ {n}
+
+{/each}
+```
+
+## Types
+
+
+
+### AnimationConfig
+
+
+
+
+
+
+
+```dts
+interface AnimationConfig {/*…*/}
+```
+
+
+
+```dts
+delay?: number;
+```
+
+
+
+
+
+
+```dts
+duration?: number;
+```
+
+
+
+
+
+
+```dts
+easing?: (t: number) => number;
+```
+
+
+
+
+
+
+```dts
+css?: (t: number, u: number) => string;
+```
+
+
+
+
+
+
+```dts
+tick?: (t: number, u: number) => void;
+```
+
+
+
+
+### FlipParams
+
+
+
+
+
+
+
+```dts
+interface FlipParams {/*…*/}
+```
+
+
+
+```dts
+delay?: number;
+```
+
+
+
+
+
+
+```dts
+duration?: number | ((len: number) => number);
+```
+
+
+
+
+
+
+```dts
+easing?: (t: number) => number;
+```
+
+
+
+
+
diff --git a/apps/svelte.dev/content/docs/svelte/v04/03-runtime/06-svelte-easing.md b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/06-svelte-easing.md
new file mode 100644
index 0000000000..f98d4001f0
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/06-svelte-easing.md
@@ -0,0 +1,31 @@
+---
+title: 'svelte/easing'
+---
+
+Easing functions specify the rate of change over time and are useful when working with Svelte's built-in transitions and animations as well as the tweened and spring utilities. `svelte/easing` contains 31 named exports, a `linear` ease and 3 variants of 10 different easing functions: `in`, `out` and `inOut`.
+
+You can explore the various eases using the [ease visualiser](/examples/easing) in the [examples section](/examples).
+
+| ease | in | out | inOut |
+| ----------- | ----------- | ------------ | -------------- |
+| **back** | `backIn` | `backOut` | `backInOut` |
+| **bounce** | `bounceIn` | `bounceOut` | `bounceInOut` |
+| **circ** | `circIn` | `circOut` | `circInOut` |
+| **cubic** | `cubicIn` | `cubicOut` | `cubicInOut` |
+| **elastic** | `elasticIn` | `elasticOut` | `elasticInOut` |
+| **expo** | `expoIn` | `expoOut` | `expoInOut` |
+| **quad** | `quadIn` | `quadOut` | `quadInOut` |
+| **quart** | `quartIn` | `quartOut` | `quartInOut` |
+| **quint** | `quintIn` | `quintOut` | `quintInOut` |
+| **sine** | `sineIn` | `sineOut` | `sineInOut` |
+
+
+
+
diff --git a/apps/svelte.dev/content/docs/svelte/v04/03-runtime/07-svelte-action.md b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/07-svelte-action.md
new file mode 100644
index 0000000000..f69e9e5190
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/07-svelte-action.md
@@ -0,0 +1,192 @@
+---
+title: svelte/action
+---
+
+Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
+
+```svelte
+
+
+
+
+```
+
+An action can have a parameter. If the returned value has an `update` method, it will be called immediately after Svelte has applied updates to the markup whenever that parameter changes.
+
+> Don't worry that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
+
+```svelte
+
+
+
+
+```
+
+## Attributes
+
+Sometimes actions emit custom events and apply custom attributes to the element they are applied to. To support this, actions typed with `Action` or `ActionReturn` type can have a last parameter, `Attributes`:
+
+```svelte
+
+
+
+
+```
+
+## Types
+
+
+
+### Action
+
+
+
+Actions are functions that are called when an element is created.
+You can use this interface to type such actions.
+The following example defines an action that only works on `` elements
+and optionally accepts a parameter which it has a default value for:
+```ts
+export const myAction: Action
= (node, param = { someProperty: true }) => {
+ // ...
+}
+```
+`Action` and `Action` both signal that the action accepts no parameters.
+
+You can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has.
+See interface `ActionReturn` for more details.
+
+Docs: https://svelte.dev/docs/svelte-action
+
+
+
+```dts
+interface Action<
+ Element = HTMLElement,
+ Parameter = undefined,
+ Attributes extends Record
= Record<
+ never,
+ any
+ >
+> {/*…*/}
+```
+
+
+
+```dts
+
(
+ ...args: undefined extends Parameter
+ ? [node: Node, parameter?: Parameter]
+ : [node: Node, parameter: Parameter]
+): void | ActionReturn;
+```
+
+
+
+
+### ActionReturn
+
+
+
+Actions can return an object containing the two properties defined in this interface. Both are optional.
+- update: An action can have a parameter. This method will be called whenever that parameter changes,
+ immediately after Svelte has applied updates to the markup. `ActionReturn` and `ActionReturn` both
+ mean that the action accepts no parameters.
+- destroy: Method that is called after the element is unmounted
+
+Additionally, you can specify which additional attributes and events the action enables on the applied element.
+This applies to TypeScript typings only and has no effect at runtime.
+
+Example usage:
+```ts
+interface Attributes {
+ newprop?: string;
+ 'on:event': (e: CustomEvent) => void;
+}
+
+export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn {
+ // ...
+ return {
+ update: (updatedParameter) => {...},
+ destroy: () => {...}
+ };
+}
+```
+
+Docs: https://svelte.dev/docs/svelte-action
+
+
+
+```dts
+interface ActionReturn<
+ Parameter = undefined,
+ Attributes extends Record
= Record<
+ never,
+ any
+ >
+> {/*…*/}
+```
+
+
+
+```dts
+update?: (parameter: Parameter) => void;
+```
+
+
+
+
+
+
+```dts
+destroy?: () => void;
+```
+
+
+
+
+
diff --git a/apps/svelte.dev/content/docs/svelte/v04/03-runtime/index.md b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/index.md
new file mode 100644
index 0000000000..ba41692d65
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/03-runtime/index.md
@@ -0,0 +1,3 @@
+---
+title: "Runtime"
+---
\ No newline at end of file
diff --git a/apps/svelte.dev/content/docs/svelte/v04/04-compiler-and-api/01-svelte-compiler.md b/apps/svelte.dev/content/docs/svelte/v04/04-compiler-and-api/01-svelte-compiler.md
new file mode 100644
index 0000000000..caff38dfb8
--- /dev/null
+++ b/apps/svelte.dev/content/docs/svelte/v04/04-compiler-and-api/01-svelte-compiler.md
@@ -0,0 +1,1203 @@
+---
+title: 'svelte/compiler'
+---
+
+Typically, you won't interact with the Svelte compiler directly, but will instead integrate it into your build system using a bundler plugin. The bundler plugin that the Svelte team most recommends and invests in is [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). The [SvelteKit](https://kit.svelte.dev/) framework provides a setup leveraging `vite-plugin-svelte` to build applications as well as a [tool for packaging Svelte component libraries](https://kit.svelte.dev/docs/packaging). Svelte Society maintains a list of [other bundler plugins](https://sveltesociety.dev/packages?category=bundler-plugins) for additional tools like Rollup and Webpack.
+
+Nonetheless, it's useful to understand how to use the compiler, since bundler plugins generally expose compiler options to you.
+
+## compile
+
+
+
+```dts
+function compile(
+ source: string,
+ options?: CompileOptions
+): CompileResult;
+```
+
+
+
+This is where the magic happens. `svelte.compile` takes your component source code, and turns it into a JavaScript module that exports a class.
+
+```js
+// @filename: ambient.d.ts
+declare global {
+ var source: string
+}
+
+export {}
+
+// @filename: index.ts
+// ---cut---
+import { compile } from 'svelte/compiler';
+
+const result = compile(source, {
+ // options
+});
+```
+
+Refer to [CompileOptions](#types-compileoptions) for all the available options.
+
+The returned `result` object contains the code for your component, along with useful bits of metadata.
+
+```ts
+// @filename: ambient.d.ts
+declare global {
+ const source: string;
+}
+
+export {};
+
+// @filename: main.ts
+import { compile } from 'svelte/compiler';
+// ---cut---
+const { js, css, ast, warnings, vars, stats } = compile(source);
+```
+
+Refer to [CompileResult](#types-compileresult) for a full description of the compile result.
+
+## parse
+
+
+
+```dts
+function parse(
+ template: string,
+ options?: ParserOptions
+): Ast;
+```
+
+
+
+The `parse` function parses a component, returning only its abstract syntax tree. Unlike compiling with the `generate: false` option, this will not perform any validation or other analysis of the component beyond parsing it. Note that the returned AST is not considered public API, so breaking changes could occur at any point in time.
+
+```js
+// @filename: ambient.d.ts
+declare global {
+ var source: string;
+}
+
+export {};
+
+// @filename: main.ts
+// ---cut---
+import { parse } from 'svelte/compiler';
+
+const ast = parse(source, { filename: 'App.svelte' });
+```
+
+## preprocess
+
+
+
+```dts
+function preprocess(
+ source: string,
+ preprocessor: PreprocessorGroup | PreprocessorGroup[],
+ options?:
+ | {
+ filename?: string | undefined;
+ }
+ | undefined
+): Promise
;
+```
+
+
+
+A number of [official and community-maintained preprocessing plugins](https://sveltesociety.dev/packages?category=preprocessors) are available to allow you to use Svelte with tools like TypeScript, PostCSS, SCSS, and Less.
+
+You can write your own preprocessor using the `svelte.preprocess` API.
+
+The `preprocess` function provides convenient hooks for arbitrarily transforming component source code. For example, it can be used to convert a `