diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..79518f7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,21 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..b6f27f1
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..ab78a95
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..f8200bd
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,16 @@
+{
+ "useTabs": true,
+ "semi": false,
+ "singleQuote": true,
+ "trailingComma": "none",
+ "printWidth": 100,
+ "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+ "overrides": [
+ {
+ "files": "*.svelte",
+ "options": {
+ "parser": "svelte"
+ }
+ }
+ ]
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..5ce6766
--- /dev/null
+++ b/README.md
@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
diff --git a/bun.lockb b/bun.lockb
new file mode 100755
index 0000000..4239b86
Binary files /dev/null and b/bun.lockb differ
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..ce35209
--- /dev/null
+++ b/components.json
@@ -0,0 +1,14 @@
+{
+ "$schema": "https://shadcn-svelte.com/schema.json",
+ "style": "default",
+ "tailwind": {
+ "config": "tailwind.config.ts",
+ "css": "src/app.css",
+ "baseColor": "stone"
+ },
+ "aliases": {
+ "components": "$lib/components",
+ "utils": "$lib/utils"
+ },
+ "typescript": true
+}
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..426c4a7
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,33 @@
+import js from '@eslint/js'
+import ts from 'typescript-eslint'
+import svelte from 'eslint-plugin-svelte'
+import prettier from 'eslint-config-prettier'
+import globals from 'globals'
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+ js.configs.recommended,
+ ...ts.configs.recommended,
+ ...svelte.configs['flat/recommended'],
+ prettier,
+ ...svelte.configs['flat/prettier'],
+ {
+ languageOptions: {
+ globals: {
+ ...globals.browser,
+ ...globals.node
+ }
+ }
+ },
+ {
+ files: ['**/*.svelte'],
+ languageOptions: {
+ parserOptions: {
+ parser: ts.parser
+ }
+ }
+ },
+ {
+ ignores: ['build/', '.svelte-kit/', 'dist/']
+ }
+]
diff --git a/markdown_files/sveltejs-svelte/cache.json b/markdown_files/sveltejs-svelte/cache.json
new file mode 100644
index 0000000..08ab8f3
--- /dev/null
+++ b/markdown_files/sveltejs-svelte/cache.json
@@ -0,0 +1 @@
+{"content":"--- title: Overview --- - Short intro to what Svelte is and why it's the best ever - A few code examples to have a very rough understanding of how Svelte code looks like - Jump off points to tutorial, SvelteKit etc Svelte is a web UI framework that uses a compiler to turn declarative component code like this... ...into tightly optimized JavaScript that updates the document when state like count changes. Because the compiler can 'see' where count is referenced, the generated code is highly efficient, and because we're hijacking syntax like `$state` and `=` instead of using cumbersome APIs, you can write less code. Besides being fun to work with, Svelte offers a lot of features built-in, such as animations and transitions. Once you've written your first components you can reach for our batteries included metaframework which provides you with an opinionated router, data loading and more. If you're new to Svelte, visit the before consulting this documentation. You can try Svelte online using the . Alternatively, if you'd like a more fully-featured environment, you can try Svelte on . --- title: Getting started --- - `npm create svelte@latest`, describe that it scaffolds SvelteKit project - `npm create vite@latest`, describe that it scaffolds Svelte SPA powered by Vite - mention `svelte-add` - Jump off points to tutorial, SvelteKit etc ## Start a new project We recommend using , the official application framework from the Svelte team: SvelteKit will handle calling 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. uses to build your code. Don't worry if you don't know Svelte yet! You can ignore all the nice features SvelteKit brings on top for now and dive into it later. ### Alternatives to SvelteKit If you don't want to use SvelteKit for some reason, you can also use Svelte with Vite 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 thanks using . In most cases, you will probably need to as well. Alternatively, there are plugins for , to handle Svelte compilation — which will output `.js` and `.css` that you can insert into your HTML — but setting up SSR with them requires more manual work. ## Editor tooling The Svelte team maintains a and there are integrations with various other and tools as well. You can also check your code from the command line using . ## Getting help Don't be shy about asking for help in the ! You can also find answers on . --- title: Reactivity fundamentals --- Reactivity is at the heart of interactive UIs. When you click a button, you expect some kind of response. It's your job as a developer to make this happen. It's Svelte's job to make your job as intuitive as possible, by providing a good API to express reactive systems. ## Runes Svelte 5 uses _runes_, a powerful set of primitives for controlling reactivity inside your Svelte components and inside `.svelte.js` and `.svelte.ts` modules. Runes are function-like symbols that provide instructions to the Svelte compiler. You don't need to import them from anywhere — when you use Svelte, they're part of the language. The following sections introduce the most important runes for declare state, derived state and side effects at a high level. For more details refer to the later sections on and . ## `$state` Reactive state is declared with the `$state` rune: You can also use `$state` in class fields : ## `$derived` Derived state is declared with the `$derived` rune: The expression inside `$derived` should be free of side-effects. Svelte will disallow state changes inside derived expressions. As with `$state`, you can mark class fields as `$derived`. ## `$effect` To run _side-effects_ when the component is mounted to the DOM, and when values change, we can use the `$effect` rune ): The function passed to `$effect` will run when the component mounts, and will re-run after any changes to the values it reads that were declared with `$state` or `$derived` . Re-runs are batched , and happen after any DOM updates have been applied. --- title: Introduction --- --- title: Component fundamentals --- - script / template / style - `$props` / `$state` 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. ## <script> A `
+
+
+```
+
+...into tightly optimized JavaScript that updates the document when state like count changes. Because the compiler can 'see' where count is referenced, the generated code is highly efficient, and because we're hijacking syntax like `$state(...)` and `=` instead of using cumbersome APIs, you can write less code.
+
+Besides being fun to work with, Svelte offers a lot of features built-in, such as animations and transitions. Once you've written your first components you can reach for our batteries included metaframework [SvelteKit](/docs/kit) which provides you with an opinionated router, data loading and more.
+
+If you're new to Svelte, visit the [interactive tutorial](/tutorial) before consulting this documentation. 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).
diff --git a/markdown_files/sveltejs-svelte/docs/01-introduction/02-getting-started.md b/markdown_files/sveltejs-svelte/docs/01-introduction/02-getting-started.md
new file mode 100644
index 0000000..0f896ab
--- /dev/null
+++ b/markdown_files/sveltejs-svelte/docs/01-introduction/02-getting-started.md
@@ -0,0 +1,39 @@
+---
+title: Getting started
+---
+
+- `npm create svelte@latest`, describe that it scaffolds SvelteKit project
+- `npm create vite@latest`, describe that it scaffolds Svelte SPA powered by Vite
+- mention `svelte-add`
+- Jump off points to tutorial, SvelteKit etc
+
+## 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.
+
+Don't worry if you don't know Svelte yet! You can ignore all the nice features SvelteKit brings on top for now and dive into it later.
+
+### 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 thanks using [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). In most cases, you will probably need to [choose a routing library](faq#is-there-a-router) as well.
+
+Alternatively, there are plugins for [Rollup](https://github.com/sveltejs/rollup-plugin-svelte), [Webpack](https://github.com/sveltejs/svelte-loader) [and a few others](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 setting up SSR with them requires more manual work.
+
+## 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.
+
+You can also check your code from the command line using [svelte-check](https://www.npmjs.com/package/svelte-check) (using the Svelte or Vite CLI setup will install this for you).
+
+## 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/markdown_files/sveltejs-svelte/docs/01-introduction/03-reactivity-fundamentals.md b/markdown_files/sveltejs-svelte/docs/01-introduction/03-reactivity-fundamentals.md
new file mode 100644
index 0000000..0f1c8e0
--- /dev/null
+++ b/markdown_files/sveltejs-svelte/docs/01-introduction/03-reactivity-fundamentals.md
@@ -0,0 +1,88 @@
+---
+title: Reactivity fundamentals
+---
+
+Reactivity is at the heart of interactive UIs. When you click a button, you expect some kind of response. It's your job as a developer to make this happen. It's Svelte's job to make your job as intuitive as possible, by providing a good API to express reactive systems.
+
+## Runes
+
+Svelte 5 uses _runes_, a powerful set of primitives for controlling reactivity inside your Svelte components and inside `.svelte.js` and `.svelte.ts` modules.
+
+Runes are function-like symbols that provide instructions to the Svelte compiler. You don't need to import them from anywhere — when you use Svelte, they're part of the language.
+
+The following sections introduce the most important runes for declare state, derived state and side effects at a high level. For more details refer to the later sections on [state](/docs/svelte/runes/state) and [side effects](/docs/svelte/runes/side-effects).
+
+## `$state`
+
+Reactive state is declared with the `$state` rune:
+
+```svelte
+
+
+
+```
+
+You can also use `$state` in class fields (whether public or private):
+
+```js
+// @errors: 7006 2554
+class Todo {
+ done = $state(false);
+ text = $state();
+
+ constructor(text) {
+ this.text = text;
+ }
+}
+```
+
+## `$derived`
+
+Derived state is declared with the `$derived` rune:
+
+```svelte
+
+
+
+
+
{count} doubled is {doubled}
+```
+
+The expression inside `$derived(...)` should be free of side-effects. Svelte will disallow state changes (e.g. `count++`) inside derived expressions.
+
+As with `$state`, you can mark class fields as `$derived`.
+
+## `$effect`
+
+To run _side-effects_ when the component is mounted to the DOM, and when values change, we can use the `$effect` rune ([demo](/#H4sIAAAAAAAAE31T24rbMBD9lUG7kAQ2sbdlX7xOYNk_aB_rQhRpbAsU2UiTW0P-vbrYubSlYGzmzMzROTPymdVKo2PFjzMzfIusYB99z14YnfoQuD1qQh-7bmdFQEonrOppVZmKNBI49QthCc-OOOH0LZ-9jxnR6c7eUpOnuv6KeT5JFdcqbvbcBcgDz1jXKGg6ncFyBedYR6IzLrAZwiN5vtSxaJA-EzadfJEjKw11C6GR22-BLH8B_wxdByWpvUYtqqal2XB6RVkG1CoHB6U1WJzbnYFDiwb3aGEdDa3Bm1oH12sQLTcNPp7r56m_00mHocSG97_zd7ICUXonA5fwKbPbkE2ZtMJGGVkEdctzQi4QzSwr9prnFYNk5hpmqVuqPQjNnfOJoMF22lUsrq_UfIN6lfSVyvQ7grB3X2mjMZYO3XO9w-U5iLx42qg29md3BP_ni5P4gy9ikTBlHxjLzAtPDlyYZmRdjAbGq7HprEQ7p64v4LU_guu0kvAkhBim3nMplWl8FreQD-CW20aZR0wq12t-KqDWeBywhvexKC3memmDwlHAv9q4Vo2ZK8KtK0CgX7u9J8wXbzdKv-nRnfF_2baTqlYoWUF2h5efl9-n0O6koAMAAA==)):
+
+```svelte
+
+
+
+```
+
+The function passed to `$effect` will run when the component mounts, and will re-run after any changes to the values it reads that were declared with `$state` or `$derived` (including those passed in with `$props`). Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.
diff --git a/markdown_files/sveltejs-svelte/docs/01-introduction/index.md b/markdown_files/sveltejs-svelte/docs/01-introduction/index.md
new file mode 100644
index 0000000..8f14f7a
--- /dev/null
+++ b/markdown_files/sveltejs-svelte/docs/01-introduction/index.md
@@ -0,0 +1,3 @@
+---
+title: Introduction
+---
diff --git a/markdown_files/sveltejs-svelte/docs/02-template-syntax/01-component-fundamentals.md b/markdown_files/sveltejs-svelte/docs/02-template-syntax/01-component-fundamentals.md
new file mode 100644
index 0000000..fc81bb2
--- /dev/null
+++ b/markdown_files/sveltejs-svelte/docs/02-template-syntax/01-component-fundamentals.md
@@ -0,0 +1,202 @@
+---
+title: Component fundamentals
+---
+
+- script (module) / template / style (rough overview)
+- `$props` / `$state` (in the context of 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
+
+
+
+
+
+```
+
+## <script>
+
+A `
+```
+
+You can specify a fallback value for a prop. It will be used if the component's consumer doesn't specify the prop on the component when instantiating the component, or if the passed value is `undefined` at some point.
+
+```svelte
+
+```
+
+To get all properties, use rest syntax:
+
+```svelte
+
+```
+
+You can use reserved words as prop names.
+
+```svelte
+
+```
+
+If you're using TypeScript, you can declare the prop types:
+
+```svelte
+
+```
+
+If you're using JavaScript, you can declare the prop types using JSDoc:
+
+```svelte
+
+```
+
+If you export a `const`, `class` or `function`, it is readonly from outside the component.
+
+```svelte
+
+```
+
+Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs/component-directives#bind-this).
+
+### Reactive variables
+
+To change component state and trigger a re-render, just assign to a locally declared variable that was declared using the `$state` rune.
+
+Update expressions (`count += 1`) and property assignments (`obj.x = y`) have the same effect.
+
+```svelte
+
+```
+
+Svelte's `
+```
+
+If you'd like to react to changes to a prop, use the `$derived` or `$effect` runes instead.
+
+```svelte
+
+```
+
+For more information on reactivity, read the documentation around runes.
+
+## <script module>
+
+A `
+
+
+```
+
+## <style>
+
+CSS inside a `
+```
+
+For more information regarding styling, read the documentation around [styles and classes](styles-and-classes).
diff --git a/markdown_files/sveltejs-svelte/docs/02-template-syntax/02-basic-markup.md b/markdown_files/sveltejs-svelte/docs/02-template-syntax/02-basic-markup.md
new file mode 100644
index 0000000..8bf9b2c
--- /dev/null
+++ b/markdown_files/sveltejs-svelte/docs/02-template-syntax/02-basic-markup.md
@@ -0,0 +1,218 @@
+---
+title: Basic markup
+---
+
+- [basically what we have in the Svelte docs today](https://svelte.dev/docs/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
+
+
+
+```
+
+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
+```
+
+Quoting a singular expression does not affect how the value is parsed yet, but in Svelte 6 it will:
+
+
+```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
+
+```
+
+> 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.
+
+## Events
+
+Listening to DOM events is possible by adding attributes to the element that start with `on`. For example, to listen to the `click` event, add the `onclick` attribute to a button:
+
+```svelte
+
+```
+
+Event attributes are case sensitive. `onclick` listens to the `click` event, `onClick` listens to the `Click` event, which is different. This ensures you can listen to custom events that have uppercase characters in them.
+
+Because events are just attributes, the same rules as for attributes apply:
+
+- you can use the shorthand form: ``
+- you can spread them: ``
+- component events are just (callback) properties and don't need a separate concept
+
+Timing-wise, event attributes always fire after events from bindings (e.g. `oninput` always fires after an update to `bind:value`). Under the hood, some event handlers are attached directly with `addEventListener`, while others are _delegated_.
+
+When using `onwheel`, `onmousewheel`, `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) to align with browser defaults. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`.
+
+In the very rare cases that you need to prevent these event defaults, you should use [`on`](https://svelte-5-preview.vercel.app/docs/imports#svelte-events) instead (for example inside an action).
+
+### Event delegation
+
+To reduce memory footprint and increase performance, Svelte uses a technique called event delegation. This means that for certain events — see the list below — a single event listener at the application root takes responsibility for running any handlers on the event's path.
+
+There are a few gotchas to be aware of:
+
+- when you manually dispatch an event with a delegated listener, make sure to set the `{ bubbles: true }` option or it won't reach the application root
+- when using `addEventListener` directly, avoid calling `stopPropagation` or the event won't reach the application root and handlers won't be invoked. Similarly, handlers added manually inside the application root will run _before_ handlers added declaratively deeper in the DOM (with e.g. `onclick={...}`), in both capturing and bubbling phases. For these reasons it's better to use the `on` function imported from `svelte/events` rather than `addEventListener`, as it will ensure that order is preserved and `stopPropagation` is handled correctly.
+
+The following event handlers are delegated:
+
+- `beforeinput`
+- `click`
+- `change`
+- `dblclick`
+- `contextmenu`
+- `focusin`
+- `focusout`
+- `input`
+- `keydown`
+- `keyup`
+- `mousedown`
+- `mousemove`
+- `mouseout`
+- `mouseover`
+- `mouseup`
+- `pointerdown`
+- `pointermove`
+- `pointerout`
+- `pointerover`
+- `pointerup`
+- `touchend`
+- `touchmove`
+- `touchstart`
+
+## 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}
+```
+
+The expression will be stringified and escaped to prevent code injections. If you want to render HTML, use the `{@html}` tag instead.
+
+```svelte
+{@html potentiallyUnsafeHtmlString}
+```
+
+> Make sure that you either escape the passed string or only populate it with values that are under your control in order to prevent [XSS attacks](https://owasp.org/www-community/attacks/xss/)
+
+## 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
+
+
+```
+
+You can add a special comment starting with `@component` that will show up when hovering over the component name in other files.
+
+````svelte
+
+
+
+
+
+ Hello, {name}
+
+
+````
diff --git a/markdown_files/sveltejs-svelte/docs/02-template-syntax/03-control-flow.md b/markdown_files/sveltejs-svelte/docs/02-template-syntax/03-control-flow.md
new file mode 100644
index 0000000..84c4456
--- /dev/null
+++ b/markdown_files/sveltejs-svelte/docs/02-template-syntax/03-control-flow.md
@@ -0,0 +1,148 @@
+---
+title: Control flow
+---
+
+- if
+- each
+- await (or move that into some kind of data loading section?)
+- NOT: key (move into transition section, because that's the common use case)
+
+Svelte augments HTML with control flow blocks to be able to express conditionally rendered content or lists.
+
+The syntax between these blocks is the same:
+
+- `{#` denotes the start of a block
+- `{:` denotes a different branch part of the block. Depending on the block, there can be multiple of these
+- `{/` denotes the end of a block
+
+## {#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}
+```
+
+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.
+
+## Other block types
+
+Svelte also provides [`#snippet`](snippets), [`#key`](transitions-and-animations) and [`#await`](data-fetching) blocks. You can find out more about them in their respective sections.
diff --git a/markdown_files/sveltejs-svelte/docs/02-template-syntax/04-snippets.md b/markdown_files/sveltejs-svelte/docs/02-template-syntax/04-snippets.md
new file mode 100644
index 0000000..ffaecd7
--- /dev/null
+++ b/markdown_files/sveltejs-svelte/docs/02-template-syntax/04-snippets.md
@@ -0,0 +1,253 @@
+---
+title: Snippets
+---
+
+Better title needed?
+
+- `#snippet`
+- `@render`
+- how they can be used to reuse markup
+- how they can be used to pass UI content to components
+
+Snippets, and _render tags_, are a way to create reusable chunks of markup inside your components. Instead of writing duplicative code like [this](/#H4sIAAAAAAAAE5VUYW-kIBD9K8Tmsm2yXXRzvQ-s3eR-R-0HqqOQKhAZb9sz_vdDkV1t000vRmHewMx7w2AflbIGG7GnPlK8gYhFv42JthG-m9Gwf6BGcLbVXZuPSGrzVho8ZirDGpDIhldgySN5GpEMez9kaNuckY1ANJZRamRuu2ZnhEZt6a84pvs43mzD4pMsUDDi8DMkQFYCGdkvsJwblFq5uCik9bmJ4JZwUkv1eoknWigX2eGNN6aGXa6bjV8ybP-X7sM36T58SVcrIIV2xVIaA41xeD5kKqWXuqpUJEefOqVuOkL9DfBchGrzWfu0vb-RpTd3o-zBR045Ga3HfuE5BmJpKauuhbPtENlUF2sqR9jqpsPSxWsMrlngyj3VJiyYjJXb1-lMa7IWC-iSk2M5Zzh-SJjShe-siq5kpZRPs55BbSGU5YPyte4vVV_VfFXxVb10dSLf17pS2lM5HnpPxw4Zpv6x-F57p0jI3OKlVnhv5V9wPQrNYQQ9D_f6aGHlC89fq1Z3qmDkJCTCweOGF4VUFSPJvD_DhreVdA0eu8ehJJ5x91dBaBkpWm3ureCFPt3uzRv56d4kdp-2euG38XZ6dsnd3ZmPG9yRBCrzRUvi-MccOdwz3qE-fOZ7AwAhlrtTUx3c76vRhSwlFBHDtoPhefgHX3dM0PkEAAA=)...
+
+```svelte
+{#each images as image}
+ {#if image.href}
+
+
+
+ {image.caption}
+
+
+ {:else}
+
+
+ {image.caption}
+
+ {/if}
+{/each}
+```
+
+...you can write [this](/#H4sIAAAAAAAAE5VUYW-bMBD9KxbRlERKY4jWfSA02n5H6QcXDmwVbMs-lnaI_z6D7TTt1moTAnPvzvfenQ_GpBEd2CS_HxPJekjy5IfWyS7BFz0b9id0CM62ajDVjBS2MkLjqZQldoBE9KwFS-7I_YyUOPqlRGuqnKw5orY5pVpUduj3mitUln5LU3pI0_UuBp9FjTwnDr9AHETLMSeHK6xiGoWSLi9yYT034cwSRjohn17zcQPNFTs8s153sK9Uv_Yh0-5_5d7-o9zbD-UqCaRWrllSYZQxLw_HUhb0ta-y4NnJUxfUvc7QuLJSaO0a3oh2MLBZat8u-wsPnXzKQvTtVVF34xK5d69ThFmHEQ4SpzeVRediTG8rjD5vBSeN3E5JyHh6R1DQK9-iml5kjzQUN_lSgVU8DhYLx7wwjSvRkMDvTjiwF4zM1kXZ7DlF1eN3A7IG85e-zRrYEjjm0FkI4Cc7Ripm0pHOChexhcWXzreeZyRMU6Mk3ljxC9w4QH-cQZ_b3T5pjHxk1VNr1CDrnJy5QDh6XLO6FrLNSRb2l9gz0wo3S6m7HErSgLsPGMHkpDZK31jOanXeHPQz-eruLHUP0z6yTbpbrn223V70uMXNSpQSZjpL0y8hcxxpNqA6_ql3BQAxlxvfpQ_uT9GrWjQC6iRHM8D0MP0GQsIi92QEAAA=):
+
+```svelte
+{#snippet figure(image)}
+
+
+ {image.caption}
+
+{/snippet}
+
+{#each images as image}
+ {#if image.href}
+
+ {@render figure(image)}
+
+ {:else}
+ {@render figure(image)}
+ {/if}
+{/each}
+```
+
+Like function declarations, snippets can have an arbitrary number of parameters, which can have default values, and you can destructure each parameter. You cannot use rest parameters however.
+
+## Snippet scope
+
+Snippets can be declared anywhere inside your component. They can reference values declared outside themselves, for example in the `
+
+{#snippet hello(name)}
+
hello {name}! {message}!
+{/snippet}
+
+{@render hello('alice')}
+{@render hello('bob')}
+```
+
+...and they are 'visible' to everything in the same lexical scope (i.e. siblings, and children of those siblings):
+
+```svelte
+
+
+
+{@render x()}
+```
+
+Snippets can reference themselves and each other ([demo](/#H4sIAAAAAAAAE2WPTQqDMBCFrxLiRqH1Zysi7TlqF1YnENBJSGJLCYGeo5tesUeosfYH3c2bee_jjaWMd6BpfrAU6x5oTvdS0g01V-mFPkNnYNRaDKrxGxto5FKCIaeu1kYwFkauwsoUWtZYPh_3W5FMY4U2mb3egL9kIwY0rbhgiO-sDTgjSEqSTvIDs-jiOP7i_MHuFGAL6p9BtiSbOTl0GtzCuihqE87cqtyam6WRGz_vRcsZh5bmRg3gju4Fptq_kzQBAAA=)):
+
+```svelte
+{#snippet blastoff()}
+ 🚀
+{/snippet}
+
+{#snippet countdown(n)}
+ {#if n > 0}
+ {n}...
+ {@render countdown(n - 1)}
+ {:else}
+ {@render blastoff()}
+ {/if}
+{/snippet}
+
+{@render countdown(10)}
+```
+
+## Passing snippets to components
+
+Within the template, snippets are values just like any other. As such, they can be passed to components as props ([demo](/#H4sIAAAAAAAAE41SwY6bMBD9lRGplKQlYRMpF5ZF7T_0ttmDwSZYJbZrT9pGlv-9g4Fkk-xhxYV5vHlvhjc-aWQnXJK_-kSxo0jy5IcxSZrg2fSF-yM6FFQ7fbJ1jxSuttJguVd7lEejLcJPVnUCGquPMF9nsVoPjfNnohGx1sohMU4SHbzAa4_t0UNvmcOcGUNDzFP4jeccdikYK2v6sIWQ3lErpui5cDdPF_LmkVy3wlp5Vd5e2U_rHYSe_kYjFtl1KeVnTkljBEIrGBd2sYy8AtsyLlBk9DYhJHtTR_UbBDWybkR8NkqHWyOr_y74ZMNLz9f9AoG6ePkOJLMHLBp-xISvcPf11r0YUuMM2Ysfkgngh5XphUYKkJWU_FFz2UjBkxztSYT0cihR4LOn0tGaPrql439N-7Uh0Dl8MVYbt1jeJ1Fg7xDb_Uw2Y18YQqZ_S2U5FH1pS__dCkWMa3C0uR0pfQRTg89kE4bLLLDS_Dxy_Eywuo1TAnPAw4fqY1rvtH3W9w35ZZMgvU3jq8LhedwkguCHRhT_cMU6eVA5dKLB5wGutCWjlTOslupAxxrxceKoD2hzhe2qbmXHF1v1bbOcNCtW_zpYfVI8h5kQ4qY3mueHTlesW2C7TOEO4hcdwzgf3Nc7cZxUKKC4yuNhvIX_MlV_Xk0EAAA=)):
+
+```svelte
+
+
+{#snippet header()}
+
fruit
+
qty
+
price
+
total
+{/snippet}
+
+{#snippet row(d)}
+
{d.name}
+
{d.qty}
+
{d.price}
+
{d.qty * d.price}
+{/snippet}
+
+
+```
+
+Think about it like passing content instead of data to a component. The concept is similar to slots in web components.
+
+As an authoring convenience, snippets declared directly _inside_ a component implicitly become props _on_ the component ([demo](/#H4sIAAAAAAAAE41Sy27bMBD8lYVcwHYrW4kBXxRFaP-htzgHSqQsojLJkuu2BqF_74qUrfhxCHQRh7MzO9z1SSM74ZL8zSeKHUSSJz-MSdIET2Y4uD-iQ0Fnp4-2HpDC1VYaLHdqh_JgtEX4yapOQGP1AebrLJzWsXD-QjQi1lo5JMZRooNXeBuwHXoYLHOYM2OoiXkKv_GUwzYFY2VNFxvo0xtqxRR9F-7z04X8fE-uW2GtnJQ3E_tpvYV-oL9Ti0U2hVJFjMMZslcfW-5DWj9zShojEFrBuLCLZR_9CmzLQCwy-psw8rxBgvkNhhpZd8F8NppE7Stbq_8u-GTKS8_XQ9Keqnl5BZP1AzTYP2bDV7i7_9hLEeda0iocNJeNFDzJ0R5Fn142JzA-uzsdBfLhldPxPdMhIPS0H1-M1cYtlnejwdBDfBXZjHXTFOg4BhuOtvTfrVDEmAZG2ew5ezYV-Ew2fVzVAivNTyPHzwSr29AlMAe8f6g-zuWDts-GusAmdBSkv3P7qnB4GpMEEHwsRPEPV6yTe5VDJxp8iXClLRmtnGG1VHva3oCPHQd9QJsrbFd1Kzu-2Khvz8uzZsXqX3urj4rnMBNCXNUG83zf6Yp1C2yXKdxA_KJjGOfRfb0Vh7MKDShEuV-M9_4_nq6svF4EAAA=)):
+
+```svelte
+
+
+ {#snippet header()}
+
fruit
+
qty
+
price
+
total
+ {/snippet}
+
+ {#snippet row(d)}
+
{d.name}
+
{d.qty}
+
{d.price}
+
{d.qty * d.price}
+ {/snippet}
+
+```
+
+Any content inside the component tags that is _not_ a snippet declaration implicitly becomes part of the `children` snippet ([demo](/#H4sIAAAAAAAAE41S247aMBD9lVFYCegGsiDxks1G7T_0bdkHJ3aI1cR27aEtsvzvtZ0LZeGhiiJ5js-cmTMemzS8YybJ320iSM-SPPmmVJImeFEhML9Yh8zHRp51HZDC1JorLI_iiLxXUiN8J1XHoNGyh-U2i9F2SFy-epon1lIY9IwzRwNv8B6wI1oIJXNYEqV8E8sUfuIlh0MKSvPaX-zBpZ-oFRH-m7m7l5m8uyfXLdOaX5X3V_bL9gAu0D98i0V2NSWKwQ4lSN7s0LKLbgtsyxgXmT9NiBe-iaP-DYISSTcj4bcLI7hSDEHL3yu6dkPfBdLS0m1o3nk-LW9gX-gBGss9ZsMXuLu32VjZBdfRaelft5eUN5zRJEd9Zi6dlyEy_ncdOm_IxsGlULe8o5qJNFgE5x_9SWmpzGp9N2-MXQxz4c2cOQ-lZWQyF0Jd2q_-mjI9U1fr4FBPE8iuKTbjjRt2sMBK0svIsQtG6jb2CsQAdQ_1x9f5R9tmIS-yPToK-tNkQRQGL6ObCIIdEpH9wQ3p-Enk0LEGXwe4ktoX2hhFai5Ofi0jPnYc9QF1LrDdRK-rvXjerSfNitQ_TlqeBc1hwRi7yY3F81MnK9KtsF2n8Amis44ilA7VtwfWTyr-kaKV-_X4cH8BTOhfRzcEAAA=)):
+
+```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
+```
+
+## --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
+
+
+
+```
+
+For SVG namespace, the example above desugars into using `` instead:
+
+```svelte
+
+
+
+```
+
+> Since this is an extra `
` (or ``), 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
+
+```
diff --git a/markdown_files/sveltejs-svelte/docs/02-template-syntax/06-transitions-and-animations.md b/markdown_files/sveltejs-svelte/docs/02-template-syntax/06-transitions-and-animations.md
new file mode 100644
index 0000000..8163d96
--- /dev/null
+++ b/markdown_files/sveltejs-svelte/docs/02-template-syntax/06-transitions-and-animations.md
@@ -0,0 +1,432 @@
+---
+title: Transitions & Animations
+---
+
+- how to use (template syntax)
+- when to use
+- global vs local
+- easing & motion
+- mention imports
+- key block
+
+Svelte provides different techniques and syntax for incorporating motion into your Svelte projects.
+
+## 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. 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/runtime/imperative-component-api) and marking the transition as `global`.
+
+## Transition parameters
+
+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](/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}
+
+{/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](control-flow#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/reference/svelte-animate) or [custom animation functions](#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}
+```
+
+## {#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/markdown_files/sveltejs-svelte/docs/02-template-syntax/07-actions.md b/markdown_files/sveltejs-svelte/docs/02-template-syntax/07-actions.md
new file mode 100644
index 0000000..5752b03
--- /dev/null
+++ b/markdown_files/sveltejs-svelte/docs/02-template-syntax/07-actions.md
@@ -0,0 +1,103 @@
+---
+title: Actions
+---
+
+- template syntax
+- how to write
+- typings
+- adjust so that `$effect` is used instead of update/destroy?
+
+```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 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
+
+
+
+
+```
diff --git a/markdown_files/sveltejs-svelte/docs/02-template-syntax/08-bindings.md b/markdown_files/sveltejs-svelte/docs/02-template-syntax/08-bindings.md
new file mode 100644
index 0000000..73b49cd
--- /dev/null
+++ b/markdown_files/sveltejs-svelte/docs/02-template-syntax/08-bindings.md
@@ -0,0 +1,305 @@
+---
+title: Bindings
+---
+
+- how for dom elements
+- list of all bindings
+- how for components
+
+Most of the time a clear separation between data flowing down and events going up is worthwhile and results in more robust apps. But in some cases - especially when interacting with form elements - it's more ergonomic to declare a two way binding. Svelte provides many element bindings out of the box, and also allows component bindings.
+
+## bind:_property_ for elements
+
+```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 `undefined`.
+
+```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
+
+
+```
+
+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 `