cursor

name	cursor
description	[!NOTE] Vite is often used in standalone mode to build [single page apps (SPAs)](../kit/glossary#SPA), which you can also [build with SvelteKit](../kit/single-page-apps).

Cursor

[!NOTE] Vite is often used in standalone mode to build single page apps (SPAs), which you can also build with SvelteKit.

[!NOTE] Vite is often used in standalone mode to build single page apps (SPAs), which you can also build with SvelteKit.

Available Resources

Alternatives to SvelteKit

Editor tooling

Getting help

<script>

<script module>

<style>

$state.raw

$state.snapshot

$state.eager

Passing state into functions

Passing state across modules

$derived.by

Understanding dependencies

Overriding derived values

Deriveds and reactivity

Destructuring

Update propagation

$effect.pre

$effect.tracking

$effect.pending

$effect.root

When not to use $effect

Fallback values

Renaming props

Rest props

Updating props

Type safety

$props.id()

$inspect(...).with

$inspect.trace(...)

Tags

Element attributes

Component props

Spread attributes

Events

Text expressions

Comments

Keyed each blocks

Each blocks without an item

Else blocks

Snippet scope

Passing snippets to components

Typing snippets

Exporting snippets

Programmatic snippets

Snippets and slots

Styling

Attachment factories

Inline attachments

Conditional attachments

Passing attachments to components

Controlling when attachments re-run

Creating attachments programmatically

Converting actions to attachments

Function bindings

<input bind:value>

<input bind:checked>

<input bind:indeterminate>

<input bind:group>

<input bind:files>

<select bind:value>

<audio>

• currentTime

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

• playbackRate

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate

• paused

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused

• volume

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume

• muted

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted

• duration

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration

• buffered

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered

• seekable

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable

• seeking

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event

• ended

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended

• readyState

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

• played

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/played

<video>

<img>

• naturalWidth

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth

• naturalHeight

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight

<details bind:open>

window and document

Contenteditable bindings

• innerHTML

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

• innerText

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText

• textContent

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

Dimensions

• clientWidth

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth

• clientHeight

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

• offsetWidth

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth

• offsetHeight

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

• contentRect

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect

• contentBoxSize

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize

• borderBoxSize

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize

• devicePixelContentBoxSize

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize

bind:this

bind:property for components

Typing

Local vs global

Built-in transitions

Transition parameters

Custom transition functions

Transition events

Animation Parameters

Custom animation functions

Attributes

The class: directive

Synchronized updates

Concurrency

Indicating loading states

Error handling

Server-side rendering

Forking

Caveats

Breaking changes

Specificity

Scoped keyframes

:global(...)

:global

• await
  • URL: await-expressions

Properties

Using transformError

• Legacy APIs

  • URL: legacy-overview

• options

  • URL: custom-elements#Component-options

When to use stores

svelte/store

Store contract

setContext and getContext

Using context with state

Component testing

Replacing global state

onMount

onDestroy

tick

Deprecated: beforeUpdate / afterUpdate

• Before

  • URL: /REMOVED

• After

  • URL: /REMOVED

mount

unmount

render

hydrate

Serialization

CSP

$state

$derived

$effect

• {@attach ...}

  • URL: @attach

• function binding

  • URL: bind#Function-bindings

• $inspect

  • URL: $inspect

• createSubscriber

  • URL: svelte-reactivity#createSubscriber

$props

$inspect.trace

Events

Snippets

Each blocks

Using JavaScript variables in CSS

Styling child components

Context

Async Svelte

Avoid legacy features

Unit and component tests with Vitest

Component tests with Storybook

End-to-end tests with Playwright

<script lang="ts">

Preprocessor setup

tsconfig.json settings

• target

  • URL: https://www.typescriptlang.org/tsconfig/#target

• verbatimModuleSyntax

  • URL: https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax

• isolatedModules

  • URL: https://www.typescriptlang.org/tsconfig/#isolatedModules

Typing $props

Generic $props

Typing wrapper components

Typing $state

The Component type

Enhancing built-in DOM types

Exceptions

SvelteComponent

• migration guide

  • URL: https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes

• migration guide

  • URL: https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes

• migration guide

  • URL: https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes

• migration guide

  • URL: https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes

SvelteComponentTyped

afterUpdate

beforeUpdate

createContext

createEventDispatcher

createRawSnippet

flushSync

fork

getAbortSignal

getAllContexts

getContext

hasContext

hydratable

hydrate

mount

onDestroy

onMount

setContext

settled

tick

unmount

untrack

Component

ComponentConstructorOptions

ComponentEvents

ComponentInternals

ComponentProps

ComponentType

EventDispatcher

Fork

MountOptions

Snippet

Action

ActionReturn

flip

AnimationConfig

FlipParams

createAttachmentKey

fromAction

Attachment

VERSION

compile

compileModule

migrate

parse

parseCss

preprocess

print

walk

AST

CompileError

CompileOptions

• Content Security Policy
  • URL: https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP

CompileResult

MarkupPreprocessor

ModuleCompileOptions

Preprocessor

PreprocessorGroup

Processed

Warning

backIn

backInOut

backOut

bounceIn

bounceInOut

bounceOut

circIn

circInOut

circOut

cubicIn

cubicInOut

cubicOut

elasticIn

elasticInOut

elasticOut

expoIn

expoInOut

expoOut

linear

quadIn

quadInOut

quadOut

quartIn

quartInOut

quartOut

quintIn

quintInOut

quintOut

sineIn

sineInOut

sineOut

on

Spring

Tween

prefersReducedMotion

spring

tweened

Spring

SpringOptions

SpringUpdateOptions

TweenOptions

Tweened

Updater

devicePixelRatio

innerHeight

innerWidth

online

outerHeight

outerWidth

screenLeft

screenTop

scrollX

scrollY

MediaQuery

SvelteDate

SvelteMap

SvelteSet

SvelteURL

SvelteURLSearchParams

createSubscriber

render

derived

fromStore

get

readable

readonly

toStore

writable

Readable

StartStopNotifier

Subscriber

Unsubscriber

Updater

Writable

blur

crossfade

draw

fade

fly

scale

slide

BlurParams

CrossfadeParams

DrawParams

EasingFunction

FadeParams

FlyParams

ScaleParams

SlideParams

TransitionConfig

Before we begin

What is SvelteKit?

What is Svelte?

SvelteKit vs Svelte

• Svelte
  • URL: ../svelte

Editor setup

Default rendering

Static site generation

Single-page app

Multi-page app

Separate backend

Serverless app

Your own server

Container

Library

Offline app

Mobile app

Desktop app

Browser extension

Embedded device

Project files

• $lib

  • URL: $lib

• param matchers

  • URL: advanced-routing#Matching

• routes

  • URL: routing

• paths.assets

  • URL: configuration#paths

• hooks

  • URL: hooks

• hooks

  • URL: hooks

• service worker

  • URL: service-workers

• observability

  • URL: observability

Other files

Fetch APIs

FormData

Stream APIs

URL APIs

Web Crypto

+page

+error

+layout

+server

$types

Other files

Further reading

• Tutorial: Routing

  • URL: /tutorial/kit/pages

• Tutorial: API routes

  • URL: /tutorial/kit/get-handlers

• Docs: Advanced routing

  • URL: advanced-routing

Page data

Layout data

page.data

Universal vs server

Using URL data

Making fetch requests

• filterSerializedResponseHeaders
  • URL: hooks#Server-hooks-handle

Cookies

Headers

Using parent data

Errors

Redirects

Streaming with promises

Parallel loading

Rerunning load functions

• fetch

  • URL: #Making-fetch-requests

• invalidateAll()

  • URL: $app-navigation#invalidateAll

Implications for authentication

• (When do load functions rerun?)

  • URL: load#Rerunning-load-functions-When-do-load-functions-rerun

• hooks

  • URL: hooks

Using getRequestEvent

Further reading

• Tutorial: Loading data

  • URL: /tutorial/kit/page-data

• Tutorial: Errors and redirects

  • URL: /tutorial/kit/error-basics

• Tutorial: Advanced loading

  • URL: /tutorial/kit/await-parent

Default actions

Named actions

Anatomy of an action

Loading data

Progressive enhancement

• applyAction

  • URL: #Progressive-enhancement-Customising-use:enhance

• reset focus

  • URL: accessibility#Focus-management

Alternatives

GET vs POST

Further reading

• Tutorial: Forms
  • URL: /tutorial/kit/the-form-element

prerender

• config.kit.prerender.entries
  • URL: configuration#prerender

entries

ssr

csr

• progressively enhanced
  • URL: form-actions#Progressive-enhancement

trailingSlash

config

Further reading

• Tutorial: Page options
  • URL: /tutorial/kit/page-options

Avoid shared state on the server

No side-effects in load

Using state and stores with context

Component and page state is preserved

Storing state in the URL

Storing ephemeral state in snapshots

Overview

query

query.batch

query.live

form

command

Single-flight mutations

prerender

Handling validation errors

Using getRequestEvent

Redirects

• $env/static/private

  • URL: $env-static-private

• $env/static/public

  • URL: $env-static-public

• $env/dynamic/private

  • URL: $env-dynamic-private

• $env/dynamic/public

  • URL: $env-dynamic-public

Explicit environment variables

• $app/env/private

  • URL: $app-env-private

• $app/env/public

  • URL: $app-env-public

During the build

Preview your app

• @sveltejs/adapter-cloudflare

  • URL: adapter-cloudflare

• @sveltejs/adapter-netlify

  • URL: adapter-netlify

• @sveltejs/adapter-node

  • URL: adapter-node

• @sveltejs/adapter-static

  • URL: adapter-static

• @sveltejs/adapter-vercel

  • URL: adapter-vercel

Using adapters

Platform-specific context

Usage

Prerendering individual pages

Apache

Rest parameters

Matching

Sorting

• matchers
  • URL: #Matching

Encoding

Advanced layouts

Further reading

• Tutorial: Advanced Routing
  • URL: /tutorial/kit/optional-params

Server hooks

Shared hooks

Universal hooks

Further reading

• Tutorial: Hooks
  • URL: /tutorial/kit/handle

Error objects

Expected errors

Unexpected errors

Rendering errors

Responses

Type safety

Further reading

• Tutorial: Errors and redirects

  • URL: /tutorial/kit/error-basics

• Tutorial: Hooks

  • URL: /tutorial/kit/handle

data-sveltekit-preload-data

data-sveltekit-preload-code

data-sveltekit-reload

data-sveltekit-replacestate

data-sveltekit-keepfocus

data-sveltekit-noscroll

Disabling options

Inside the service worker

Manual registration

Other solutions

References

Private environment variables

Server-only utilities

Your modules

How it works

Further reading

• Tutorial: Environment variables
  • URL: /tutorial/kit/env-static-private

API

Loading data for a route

Caveats

• handle

  • URL: hooks#Server-hooks-handle

• load

  • URL: load

• Form actions

  • URL: form-actions

• Remote functions

  • URL: remote-functions

Augmenting the built-in tracing

Development quickstart

@opentelemetry/api

Sessions vs tokens

Integration points

Libraries

Guides

CSS

Svelte

Vite's built-in handling

@sveltejs/enhanced-img

Loading images dynamically from a CDN

Best practices

• largest contentful paint (LCP)

  • URL: https://web.dev/articles/lcp

• cumulative layout shift (CLS)

  • URL: https://web.dev/articles/cls

Route announcements

Focus management

The "lang" attribute

Further reading

• MDN Web Docs: Accessibility

  • URL: https://developer.mozilla.org/en-US/docs/Learn/Accessibility

• The A11y Project

  • URL: https://www.a11yproject.com/

• How to Meet WCAG (Quick Reference)

  • URL: https://www.w3.org/WAI/WCAG21/quickref/

Out of the box

Manual setup

Server

VERSION

error

fail

invalid

isActionFailure

isHttpError

isRedirect

isValidationError

json

normalizeUrl

redirect

text

Action

ActionFailure

ActionResult

Actions

Adapter

AfterNavigate

AwaitedActions

BeforeNavigate

Builder

ClientInit

Config

Cookies

• here

  • URL: https://github.com/jshttp/cookie#cookieparsestr-options

• here

  • URL: https://github.com/jshttp/cookie#cookieparsestr-options

• here

  • URL: https://github.com/jshttp/cookie#cookieserializename-value-options

• here

  • URL: https://github.com/jshttp/cookie#cookieserializename-value-options

• here

  • URL: https://github.com/jshttp/cookie#cookieserializename-value-options

Emulator

EnvVarConfig

• server-only module
  • URL: /docs/kit/server-only-modules

Handle

HandleClientError

HandleFetch

HandleServerError

HandleValidationError

HttpError

InvalidField

KitConfig

LessThan

LiveQueryRequestedResult

LiveRequestedEntry

Load

LoadEvent

• filterSerializedResponseHeaders
  • URL: /docs/kit/hooks#Server-hooks-handle

LoadProperties

Navigation

NavigationBase

NavigationEnter

NavigationEvent

NavigationExternal

NavigationFormSubmit

NavigationGoto

NavigationLeave

NavigationLink

NavigationPopState

NavigationTarget

NavigationType

NumericRange

OnNavigate

Page

ParamMatcher

PrerenderOption

QueryRequestedResult

Redirect

RemoteCommand

RemoteForm

RemoteFormEnhanceCallback

RemoteFormEnhanceInstance

RemoteFormField

RemoteFormFieldType

RemoteFormFieldValue

RemoteFormFields

RemoteFormInput

RemoteFormIssue

RemoteLiveQuery

RemoteLiveQueryFunction

RemotePrerenderFunction

RemoteQuery

RemoteQueryFunction

RemoteQueryOverride

RemoteQueryUpdate

RemoteResource

RequestEvent

• filterSerializedResponseHeaders
  • URL: /docs/kit/hooks#Server-hooks-handle

RequestHandler

RequestedEntry

RequestedResult

Reroute

ResolveOptions

RouteDefinition

SSRManifest

ServerInit

ServerInitOptions

ServerLoad

ServerLoadEvent

Snapshot

SubmitFunction

Transport

Transporter

ValidationError

Private types

AdapterEntry

Csp

CspDirectives

DeepPartial

HttpMethod

IsAny

Logger

MaybePromise

PrerenderEntryGeneratorMismatchHandler

PrerenderEntryGeneratorMismatchHandlerValue

PrerenderHttpErrorHandler

PrerenderHttpErrorHandlerValue

PrerenderInvalidUrlHandler

PrerenderInvalidUrlHandlerValue

PrerenderMap

PrerenderMissingIdHandler

PrerenderMissingIdHandlerValue

PrerenderOption

PrerenderUnseenRoutesHandler

PrerenderUnseenRoutesHandlerValue

Prerendered

RequestOptions

RouteSegment

TrailingSlash

defineEnvVars

sequence

installPolyfills

createReadableStream

getRequest

setResponse

sveltekit

browser

building

dev

version

browser

building

dev

version

applyAction

deserialize

enhance

afterNavigate

beforeNavigate

disableScrollHandling

goto

invalidate

invalidateAll

onNavigate

preloadCode

preloadData

pushState

refreshAll

replaceState

asset

assets

base

match

resolve

resolveRoute

command

form

getRequestEvent

prerender

query

read

requested

query

navigating

page

• loading data

  • URL: /docs/kit/load

• form actions

  • URL: /docs/kit/form-actions

• goto

  • URL: /docs/kit/$app-navigation#goto

updated

getStores

navigating

page

updated

Asset

RouteId

Pathname

ResolvedPathname

RouteParams

LayoutParams

• config.kit.env.publicPrefix

  • URL: /docs/kit/configuration#env

• config.kit.env.publicPrefix

  • URL: /docs/kit/configuration#env

• config.kit.env.publicPrefix

  • URL: /docs/kit/configuration#env

• config.kit.env.publicPrefix

  • URL: /docs/kit/configuration#env

base

build

files

prerendered

version

Config

KitConfig

adapter

alias

appDir

csp

csrf

embedded

env

experimental

files

• monorepos

  • URL: https://levelup.video/tutorials/monorepos-with-pnpm

• monorepos

  • URL: https://levelup.video/tutorials/monorepos-with-pnpm

• monorepos

  • URL: https://levelup.video/tutorials/monorepos-with-pnpm

• monorepos

  • URL: https://levelup.video/tutorials/monorepos-with-pnpm

• monorepos

  • URL: https://levelup.video/tutorials/monorepos-with-pnpm

• monorepos

  • URL: https://levelup.video/tutorials/monorepos-with-pnpm

• monorepos

  • URL: https://levelup.video/tutorials/monorepos-with-pnpm

• monorepos

  • URL: https://levelup.video/tutorials/monorepos-with-pnpm

• monorepos

  • URL: https://levelup.video/tutorials/monorepos-with-pnpm

• monorepos

  • URL: https://levelup.video/tutorials/monorepos-with-pnpm

• monorepos

  • URL: https://levelup.video/tutorials/monorepos-with-pnpm

• monorepos

  • URL: https://levelup.video/tutorials/monorepos-with-pnpm

inlineStyleThreshold

moduleExtensions

outDir

output

paths

prerender

• Link: default `"
  • URL: http://sveltekit-prerender"`

router

serviceWorker

typescript

version

svelte-kit sync

Generated types

$lib

app.d.ts

Error

Locals

PageData

PageState

Platform

Usage

Acknowledgements

How do I run the sv CLI?

npx sv is not working

• npx sv create does nothing

  • URL: https://github.com/sveltejs/cli/issues/472

• sv command name collides with runit

  • URL: https://github.com/sveltejs/cli/issues/259

• sv in windows powershell conflicts with Set-Variable

  • URL: https://github.com/sveltejs/cli/issues/317

Usage

Options

• JSDoc syntax
  • URL: https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html

Usage

Options

Official add-ons

• better-auth

  • URL: better-auth

• drizzle

  • URL: drizzle

• eslint

  • URL: eslint

• mcp

  • URL: mcp

• mdsvex

  • URL: mdsvex

• paraglide

  • URL: paraglide

• playwright

  • URL: playwright

• prettier

  • URL: prettier

• storybook

  • URL: storybook

• sveltekit-adapter

  • URL: sveltekit-adapter

• tailwindcss

  • URL: tailwind

• vitest

  • URL: vitest

Community add-ons

Installation

Usage

Options

Troubleshooting

Machine-readable output

Credits

• VTI
  • URL: https://github.com/vuejs/vetur/tree/master/vti

FAQ

Usage

Migrations

Usage

What you get

Options

Usage

What you get

Options

Usage

What you get

Usage

What you get

Options

Usage

What you get

• local

  • URL: https://svelte.dev/docs/ai/local-setup

• README for agents

  • URL: https://agents.md/

Options

Usage

What you get

Usage

What you get

Options

Usage

What you get

Usage

What you get

Usage

What you get

• Storybook for SvelteKit
  • URL: https://storybook.js.org/docs/get-started/frameworks/sveltekit

Usage

What you get

Options

• @sveltejs/adapter-auto

  • URL: /docs/kit/adapter-auto

• @sveltejs/adapter-node

  • URL: /docs/kit/adapter-node

• @sveltejs/adapter-static

  • URL: /docs/kit/adapter-static

• @sveltejs/adapter-vercel

  • URL: /docs/kit/adapter-vercel

• @sveltejs/adapter-cloudflare

  • URL: /docs/kit/adapter-cloudflare

• @sveltejs/adapter-netlify

  • URL: /docs/kit/adapter-netlify

Usage

What you get

• Tailwind for SvelteKit guide
  • URL: https://tailwindcss.com/docs/installation/framework-guides/sveltekit

Options

• @tailwindcss/typography

  • URL: https://github.com/tailwindlabs/tailwindcss-typography

• @tailwindcss/forms

  • URL: https://github.com/tailwindlabs/tailwindcss-forms

Usage

What you get

Options

Quick start

Project structure

• sv

  • URL: sv

• @sveltejs/sv-utils

  • URL: sv-utils

Development

Testing

Publishing

Next steps

Version compatibility

Examples

defineAddon

defineAddonOptions

create

add

transforms

Parsers (low-level)

Language tooling

Svelte config

Package manager helpers

• Instructions: small prompt always injected into your session to make your agent more aware of the available tools

  • URL: instructions

• MCP Server: with tools, prompts and resources to give your agent more context, by pulling directly from the official Svelte documentation and using static analysis to correct common generative AI pitfalls

  • URL: mcp

• Skills: lazy-loaded descriptions that teach your agent Svelte best practices, and how to use the @sveltejs/mcp cli

  • URL: skills

• Subagents: focused agents that can be invoked in parallel to execute atomic operations in a separate context window

  • URL: subagent

Setup

• local setup

  • URL: local-setup

• remote setup

  • URL: remote-setup

Usage

Claude Code

Claude Desktop

Codex CLI

Copilot CLI

Antigravity CLI

OpenCode

VS Code

Cursor

Zed

Other clients

Claude Code

Claude Desktop

• Link: Under the Remote MCP server URL input, use `
  • URL: https://mcp.svelte.dev/mcp`

Codex CLI

Copilot CLI

Antigravity CLI

OpenCode

VS Code

• Link: Insert in the input and pressEnter`
  • URL: https://mcp.svelte.dev/mcp`

Cursor

GitHub Coding Agent

Other clients

list-sections

get-documentation

svelte-autofixer

playground-link

doc-section

svelte-task

Usage

list-sections

get-documentation

svelte-autofixer

svelte-code-writer

svelte-core-bestpractices

Installation

Installation

Configuration

Installation

Additional Resources (Optional)

Optional snippets

Optional parameters

HasNonOptionalBoolean

How to Use This Skill

Reference these resources when working with Cursor.