# Svelte

## Docs

- [Accessibility (A11y)](https://mintlify.wiki/sveltejs/svelte/advanced/accessibility.md): Comprehensive guide to Svelte's accessibility features, warnings, and best practices for building inclusive web applications
- [Custom Elements (Web Components)](https://mintlify.wiki/sveltejs/svelte/advanced/custom-elements.md): Learn how to compile Svelte components to standards-based Web Components with custom element support
- [Debugging](https://mintlify.wiki/sveltejs/svelte/advanced/debugging.md): Tools, techniques, and best practices for debugging Svelte applications including devtools, inspecting reactivity, and troubleshooting common issues
- [Performance Optimization](https://mintlify.wiki/sveltejs/svelte/advanced/performance.md): Techniques and best practices for optimizing Svelte application performance including reactivity, rendering, and bundle size
- [Server-Side Rendering (SSR)](https://mintlify.wiki/sveltejs/svelte/advanced/server-side-rendering.md): Understanding server-side rendering, client-side rendering, and hydration in Svelte applications
- [TypeScript Support](https://mintlify.wiki/sveltejs/svelte/advanced/typescript.md): Complete guide to using TypeScript with Svelte including configuration, typing props, generics, and best practices
- [Actions](https://mintlify.wiki/sveltejs/svelte/api/actions.md): Reusable element-level lifecycle functions
- [afterUpdate](https://mintlify.wiki/sveltejs/svelte/api/after-update.md): Schedule a callback after the component updates (deprecated)
- [animate:](https://mintlify.wiki/sveltejs/svelte/api/animations/animate.md): Animate elements when their position changes in a keyed each block
- [flip](https://mintlify.wiki/sveltejs/svelte/api/animations/flip.md): Animate element position changes using the FLIP technique for smooth list reordering
- [beforeUpdate](https://mintlify.wiki/sveltejs/svelte/api/before-update.md): Schedule a callback before the component updates (deprecated)
- [compile()](https://mintlify.wiki/sveltejs/svelte/api/compiler/compile.md): Convert Svelte source code into a JavaScript module
- [migrate()](https://mintlify.wiki/sveltejs/svelte/api/compiler/migrate.md): Automatically migrate Svelte 4 code to Svelte 5 syntax
- [Compiler Options](https://mintlify.wiki/sveltejs/svelte/api/compiler/options.md): Configuration options for the Svelte compiler
- [preprocess()](https://mintlify.wiki/sveltejs/svelte/api/compiler/preprocess.md): Transform Svelte component source code before compilation
- [createRawSnippet](https://mintlify.wiki/sveltejs/svelte/api/create-raw-snippet.md): Create snippets programmatically from a render function
- [Easing Functions](https://mintlify.wiki/sveltejs/svelte/api/easing/overview.md): Built-in easing functions for smooth animations and transitions
- [createEventDispatcher](https://mintlify.wiki/sveltejs/svelte/api/events/create-event-dispatcher.md): Create a typed event dispatcher for component events (legacy)
- [flushSync()](https://mintlify.wiki/sveltejs/svelte/api/flush-sync.md): Synchronously flush any pending state updates
- [fork](https://mintlify.wiki/sveltejs/svelte/api/fork.md): Create parallel state updates that can be committed or discarded
- [getAbortSignal](https://mintlify.wiki/sveltejs/svelte/api/get-abort-signal.md): Get an AbortSignal that aborts when the current effect re-runs or is destroyed
- [getAllContexts()](https://mintlify.wiki/sveltejs/svelte/api/get-all-contexts.md): Retrieve the whole context map that belongs to the closest parent component.
- [getContext()](https://mintlify.wiki/sveltejs/svelte/api/get-context.md): Retrieve the context that belongs to the closest parent component with the specified key.
- [hasContext()](https://mintlify.wiki/sveltejs/svelte/api/has-context.md): Check whether a given key has been set in the context of a parent component.
- [hydrate()](https://mintlify.wiki/sveltejs/svelte/api/hydrate.md): Hydrates a server-rendered component
- [spring](https://mintlify.wiki/sveltejs/svelte/api/motion/spring.md): A store with spring physics for natural, momentum-based animations
- [tweened](https://mintlify.wiki/sveltejs/svelte/api/motion/tweened.md): A store that interpolates values smoothly over time using easing functions
- [mount()](https://mintlify.wiki/sveltejs/svelte/api/mount.md): Mounts a component to the DOM
- [onDestroy](https://mintlify.wiki/sveltejs/svelte/api/on-destroy.md): Schedule a callback to run when a component is unmounted
- [onMount](https://mintlify.wiki/sveltejs/svelte/api/on-mount.md): Schedule a function to run when a component is mounted to the DOM
- [MediaQuery](https://mintlify.wiki/sveltejs/svelte/api/reactivity/media-query.md): Reactive media query that updates when the match state changes
- [SvelteDate](https://mintlify.wiki/sveltejs/svelte/api/reactivity/svelte-date.md): Reactive Date object that triggers updates when modified
- [SvelteMap](https://mintlify.wiki/sveltejs/svelte/api/reactivity/svelte-map.md): Reactive Map that triggers updates when modified
- [SvelteSet](https://mintlify.wiki/sveltejs/svelte/api/reactivity/svelte-set.md): Reactive Set that triggers updates when modified
- [SvelteURL](https://mintlify.wiki/sveltejs/svelte/api/reactivity/svelte-url.md): Reactive URL object that triggers updates when modified
- [render()](https://mintlify.wiki/sveltejs/svelte/api/server/render.md): Server-side rendering function to generate HTML from Svelte components
- [setContext()](https://mintlify.wiki/sveltejs/svelte/api/set-context.md): Associate a context object with the current component and a specified key, making it available to child components.
- [settled](https://mintlify.wiki/sveltejs/svelte/api/settled.md): Wait for all pending effects to complete execution
- [derived](https://mintlify.wiki/sveltejs/svelte/api/stores/derived.md): Create a derived store by synchronizing one or more readable stores
- [get](https://mintlify.wiki/sveltejs/svelte/api/stores/get.md): Get the current value from a store by subscribing and immediately unsubscribing
- [readable](https://mintlify.wiki/sveltejs/svelte/api/stores/readable.md): Create a readable store that allows reading by subscription
- [writable](https://mintlify.wiki/sveltejs/svelte/api/stores/writable.md): Create a writable store that allows both updating and reading by subscription
- [tick()](https://mintlify.wiki/sveltejs/svelte/api/tick.md): Returns a promise that resolves after pending state changes are applied
- [blur](https://mintlify.wiki/sveltejs/svelte/api/transitions/blur.md): API reference for the blur transition in Svelte
- [crossfade](https://mintlify.wiki/sveltejs/svelte/api/transitions/crossfade.md): API reference for the crossfade transition pair in Svelte
- [draw](https://mintlify.wiki/sveltejs/svelte/api/transitions/draw.md): API reference for the draw transition in Svelte for SVG paths
- [fade](https://mintlify.wiki/sveltejs/svelte/api/transitions/fade.md): API reference for the fade transition in Svelte
- [fly](https://mintlify.wiki/sveltejs/svelte/api/transitions/fly.md): API reference for the fly transition in Svelte
- [scale](https://mintlify.wiki/sveltejs/svelte/api/transitions/scale.md): API reference for the scale transition in Svelte
- [slide](https://mintlify.wiki/sveltejs/svelte/api/transitions/slide.md): API reference for the slide transition in Svelte
- [unmount()](https://mintlify.wiki/sveltejs/svelte/api/unmount.md): Unmounts a component that was previously mounted
- [untrack()](https://mintlify.wiki/sveltejs/svelte/api/untrack.md): Reads reactive state without creating dependencies
- [Component Structure](https://mintlify.wiki/sveltejs/svelte/components/component-structure.md): Understanding the anatomy and structure of Svelte components
- [Context API](https://mintlify.wiki/sveltejs/svelte/components/context.md): Sharing data between components using Svelte's Context API
- [Component Lifecycle](https://mintlify.wiki/sveltejs/svelte/components/lifecycle.md): Understanding component lifecycle hooks and timing in Svelte
- [Props and State](https://mintlify.wiki/sveltejs/svelte/components/props-and-state.md): Managing component props and reactive state in Svelte
- [Slots and Content Projection](https://mintlify.wiki/sveltejs/svelte/components/slots.md): Passing and rendering content in Svelte components using snippets and slots
- [Getting started](https://mintlify.wiki/sveltejs/svelte/introduction/getting-started.md): Install Svelte and create your first component using SvelteKit or standalone Vite setup
- [Overview](https://mintlify.wiki/sveltejs/svelte/introduction/overview.md): Svelte is a compiler-based framework that transforms declarative components into highly efficient JavaScript that surgically updates the DOM
- [Svelte files](https://mintlify.wiki/sveltejs/svelte/introduction/svelte-files.md): Understanding the structure of .svelte component files with script, markup, and style sections
- [React to Svelte Migration Guide](https://mintlify.wiki/sveltejs/svelte/migration/from-react.md): Comprehensive guide for migrating from React to Svelte, including concept mapping, syntax comparison, and migration strategies
- [Vue to Svelte Migration Guide](https://mintlify.wiki/sveltejs/svelte/migration/from-vue.md): Comprehensive guide for migrating from Vue to Svelte, including concept mapping, syntax comparison, and migration strategies
- [Svelte 4 to 5 Migration Guide](https://mintlify.wiki/sveltejs/svelte/migration/v5-migration-guide.md): Complete guide for migrating your Svelte 4 application to Svelte 5 with runes, new component model, and breaking changes
- [$bindable](https://mintlify.wiki/sveltejs/svelte/runes/bindable.md): Create bindable props in Svelte with the $bindable rune
- [$derived](https://mintlify.wiki/sveltejs/svelte/runes/derived.md): Create derived state in Svelte with the $derived rune
- [$effect](https://mintlify.wiki/sveltejs/svelte/runes/effect.md): Run side effects in Svelte with the $effect rune
- [$host](https://mintlify.wiki/sveltejs/svelte/runes/host.md): Access the custom element host in Svelte with the $host rune
- [$inspect](https://mintlify.wiki/sveltejs/svelte/runes/inspect.md): Debug reactive values in Svelte with the $inspect rune
- [What are runes?](https://mintlify.wiki/sveltejs/svelte/runes/overview.md): Understanding Svelte runes - symbols that control the Svelte compiler
- [$props](https://mintlify.wiki/sveltejs/svelte/runes/props.md): Declare component props in Svelte with the $props rune
- [$state](https://mintlify.wiki/sveltejs/svelte/runes/state.md): Create reactive state in Svelte with the $state rune
- [<svelte:body>](https://mintlify.wiki/sveltejs/svelte/special-elements/svelte-body.md): Add event listeners and actions to the document body
- [<svelte:component>](https://mintlify.wiki/sveltejs/svelte/special-elements/svelte-component.md): Dynamic component rendering in Svelte (legacy mode)
- [<svelte:document>](https://mintlify.wiki/sveltejs/svelte/special-elements/svelte-document.md): Add event listeners and bindings to the document object
- [<svelte:element>](https://mintlify.wiki/sveltejs/svelte/special-elements/svelte-element.md): Render dynamic HTML elements in Svelte
- [<svelte:fragment>](https://mintlify.wiki/sveltejs/svelte/special-elements/svelte-fragment.md): Place content in named slots without a wrapper element (legacy)
- [<svelte:head>](https://mintlify.wiki/sveltejs/svelte/special-elements/svelte-head.md): Insert elements into the document head
- [<svelte:options>](https://mintlify.wiki/sveltejs/svelte/special-elements/svelte-options.md): Configure per-component compiler options
- [<svelte:window>](https://mintlify.wiki/sveltejs/svelte/special-elements/svelte-window.md): Add event listeners and bindings to the window object
- [Class directives](https://mintlify.wiki/sveltejs/svelte/styling/class-directives.md): Learn how to conditionally set CSS classes using the class attribute with objects and arrays, or the class directive in Svelte
- [Component Styles](https://mintlify.wiki/sveltejs/svelte/styling/component-styles.md): Learn how Svelte scopes CSS to components using hash-based class names, ensuring styles only affect elements within the component.
- [CSS Variables](https://mintlify.wiki/sveltejs/svelte/styling/css-variables.md): Learn how to pass CSS custom properties to Svelte components for dynamic theming and styling.
- [Await Blocks](https://mintlify.wiki/sveltejs/svelte/template-syntax/await-blocks.md): Handle async operations with {#await} blocks in Svelte templates
- [Basic Markup](https://mintlify.wiki/sveltejs/svelte/template-syntax/basic-markup.md): Learn how to write HTML, use expressions, and add comments in Svelte templates
- [Bindings](https://mintlify.wiki/sveltejs/svelte/template-syntax/bindings.md): Create two-way data flow with bind directives in Svelte
- [Each Blocks](https://mintlify.wiki/sveltejs/svelte/template-syntax/each-blocks.md): Loop over arrays and iterables with {#each} blocks in Svelte
- [Event handlers](https://mintlify.wiki/sveltejs/svelte/template-syntax/event-handlers.md): Handle DOM events with on attributes in Svelte components
- [If Blocks](https://mintlify.wiki/sveltejs/svelte/template-syntax/if-blocks.md): Conditionally render content with {#if} blocks in Svelte
- [Key Blocks](https://mintlify.wiki/sveltejs/svelte/template-syntax/key-blocks.md): Force component re-initialization with {#key} blocks in Svelte
- [Snippets](https://mintlify.wiki/sveltejs/svelte/template-syntax/snippets.md): Create reusable template chunks with {#snippet} in Svelte 5