1<!doctype html> 2<html lang="en" class="theme-default typo-default"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width,initial-scale=1" /> 6 <meta name="theme-color" content="#ff3e00" /> 7 8 <link rel="manifest" href="/manifest.json" /> 9 <link rel="icon" type="image/png" href="/favicon.png" /> 10 11 <meta name="twitter:site" content="@sveltejs" /> 12 <meta name="twitter:creator" content="@sveltejs" /> 13 14 <link 15 rel="search" 16 type="application/opensearchdescription+xml" 17 href="/opensearch.xml" 18 title="Svelte" 19 /> 20 21
21<script> 22 try { 23 document.documentElement.classList.add( 24 `font-${localStorage.getItem('svelte:font') ?? 'elegant'}` 25 ); 26 } catch { 27 // localStorage access disabled 28 } 29 </script>
29 30 31 <link href="../../_app/immutable/assets/eb-garamond-latin-400-normal.DSJrtJSV.woff2" rel="preload" as="font" type="font/woff2" crossorigin> 32 <link href="../../_app/immutable/assets/dm-serif-display-latin-400-normal.C5_t9oOD.woff2" rel="preload" as="font" type="font/woff2" crossorigin> 33 <link href="../../_app/immutable/assets/fira-sans-latin-400-normal.a0AnQzuD.woff2" rel="preload" as="font" type="font/woff2" crossorigin> 34 <link href="../../_app/immutable/entry/start.kU3ZOo6P.js" rel="modulepreload"> 35 <link href="../../_app/immutable/chunks/kNaey6uv.js" rel="modulepreload"> 36 <link href="../../_app/immutable/entry/payload.DSmR2FwN.js" rel="modulepreload"> 37 <link href="../../_app/immutable/chunks/CM-d7kh4.js" rel="modulepreload"> 38 <link href="../../_app/immutable/chunks/B3VH3IKy.js" rel="modulepreload"> 39 <link href="../../_app/immutable/chunks/BZtWyCfz.js" rel="modulepreload"> 40 <link href="../../_app/immutable/chunks/9UEQW3Ry.js" rel="modulepreload"> 41 <link href="../../_app/immutable/chunks/DYrviY11.js" rel="modulepreload"> 42 <link href="../../_app/immutable/chunks/ADgAMhAY.js" rel="modulepreload"> 43 <link href="../../_app/immutable/entry/app.C_wfGPRW.js" rel="modulepreload"> 44 <link href="../../_app/immutable/chunks/C6WuQBXR.js" rel="modulepreload"> 45 <link href="../../_app/immutable/nodes/0.40upcTLR.js" rel="modulepreload"> 46 <link href="../../_app/immutable/chunks/tTSrAR-7.js" rel="modulepreload"> 47 <link href="../../_app/immutable/chunks/mf4J78rW.js" rel="modulepreload"> 48 <link href="../../_app/immutable/chunks/Cyuzqnbw.js" rel="modulepreload"> 49 <link href="../../_app/immutable/chunks/CT1pIz1V.js" rel="modulepreload"> 50 <link href="../../_app/immutable/chunks/BH-e7qfU.js" rel="modulepreload"> 51 <link href="../../_app/immutable/chunks/G6Q6idGW.js" rel="modulepreload"> 52 <link href="../../_app/immutable/chunks/CBlAkRQ_.js" rel="modulepreload"> 53 <link href="../../_app/immutable/chunks/G5j1rIeX.js" rel="modulepreload"> 54 <link href="../../_app/immutable/chunks/BvYsTj2T.js" rel="modulepreload"> 55 <link href="../../_app/immutable/chunks/CdR2q7cZ.js" rel="modulepreload"> 56 <link href="../../_app/immutable/nodes/3.ELkY1l4Y.js" rel="modulepreload"> 57 <link href="../../_app/immutable/chunks/B-49R3cA.js" rel="modulepreload"> 58 <link href="../../_app/immutable/nodes/16.D2wUnuDy.js" rel="modulepreload"> 59 <link href="../../_app/immutable/chunks/wP95Vntn2.js" rel="modulepreload"> 60 <link href="../../_app/immutable/chunks/B5MBBn9V2.js" rel="modulepreload"> 61 <!--12qhfyh--><!--[-1--><!--]--><!----><!--16r4un1-->
61<script> 62 try { 63 const theme = localStorage.getItem('sv:theme'); 64 65 document.documentElement.classList.add( 66 !theme || theme === 'system' 67 ? window.matchMedia('(prefers-color-scheme: dark)').matches 68 ? 'dark' 69 : 'light' 70 : theme 71 ); 72 } catch { 73 // localStorage access disabled 74 } 75 </script>
75<!----><!----><!--16r4un1-->
75<script> 76 try { 77 const theme = localStorage.getItem('sv:theme'); 78 79 document.documentElement.classList.add( 80 !theme || theme === 'system' 81 ? window.matchMedia('(prefers-color-scheme: dark)').matches 82 ? 'dark' 83 : 'light' 84 : theme 85 ); 86 } catch { 87 // localStorage access disabled 88 } 89 </script>
89<!----><!----><!--1o0cdxx--><meta name="twitter:title" content="Overview ⢠Svelte Docs"/> <meta name="twitter:description" content="Overview ⢠Svelte documentation"/> <meta name="twitter:card" content="summary_large_image"/> <meta name="description" content="Overview ⢠Svelte documentation"/> <meta name="twitter:image" content="https://svelte.dev/docs/svelte/overview/card.png"/> <meta name="og:image" content="https://svelte.dev/docs/svelte/overview/card.png"/><!----><title>Overview ⢠Svelte Docs</title> 90 <style>svg.svelte-hfc14b{vertical-align:middle;-o-object-fit:contain;object-fit:contain;transform-origin:50%;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;fill:none;position:relative;overflow:hidden} 91</style> 92 <link href="../../_app/immutable/assets/stores.DoLKfBGK.css" rel="stylesheet" disabled media="(max-width: 0)"> 93 <link href="../../_app/immutable/assets/search.Bf59X-yG.css" rel="stylesheet"> 94 <link href="../../_app/immutable/assets/Text.BJRd3UIj.css" rel="stylesheet"> 95 <link href="../../_app/immutable/assets/components.HzKhVTre.css" rel="stylesheet"> 96 <link href="../../_app/immutable/assets/0.Bk4lPAYY.css" rel="stylesheet"> 97 <link href="../../_app/immutable/assets/docs.oLguDx27.css" rel="stylesheet"> 98 <link href="../../_app/immutable/assets/3.CiFzdkuY.css" rel="stylesheet"> 99 <link href="../../_app/immutable/assets/RelatedLinks.B9ui4heR.css" rel="stylesheet"> 100 <link href="../../_app/immutable/assets/16.CG3JcozE.css" rel="stylesheet"> 101 </head> 102 <body data-sveltekit-preload-data="hover"> 103
103<script> 104 { 105 const div = document.createElement('div'); 106 107 Object.assign(div.style, { 108 width: '100px', 109 height: '100px', 110 overflow: 'scroll', 111 position: 'absolute', 112 top: '-9999px' 113 }); 114 115 document.body.append(div); 116 117 document.documentElement.classList.add( 118 div.offsetWidth - div.clientWidth > 0 ? 'scrollbars-visible' : 'scrollbars-invisible' 119 ); 120 121 div.remove(); 122 } 123 </script>
123 124 125 <div style="height: 100%"><!--[--><!--[--><!--[0--><!--[--><div style="display: none"><svg><symbol id="arrow-left" class="icon" viewBox="0 0 24 24"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></symbol><symbol id="arrow-right" class="icon" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></symbol><symbol id="arrow-right-chevron" viewBox="0 0 24 24"><path fill="currentColor" d="M8.7 17.3q-.275-.275-.275-.7t.275-.7l3.9-3.9l-3.9-3.9q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375q0 .2-.063.375t-.212.325l-4.6 4.6q-.275.275-.7.275t-.7-.275Z"></path></symbol><symbol id="arrow-up" class="icon" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></symbol><symbol id="arrow-down" class="icon" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></symbol><symbol id="check" class="icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></symbol><symbol id="close" class="icon" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></symbol><symbol id="download" class="icon" viewBox="0 0 24 24"><path d="M21 15V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V15"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></symbol><symbol id="edit" class="icon" viewBox="0 0 24 24"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></symbol><symbol id="git-branch" class="icon" viewBox="0 0 24 24"><line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></symbol><symbol id="log-in" class="icon" viewBox="0 0 24 24"><path d="M15 3H19A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H15"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></symbol><symbol id="maximize" class="icon" viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></symbol><symbol id="maximize-2" class="icon" viewBox="0 0 24 24"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></symbol><symbol id="menu" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M7.95 11.95h32m-32 12h32m-32 12h32"></path></symbol><symbol id="message-square" class="icon" viewBox="0 0 24 24"><g transform="translate(0, 1)"><path d="M16.5 19H11V15H18V11H22V19H19.5L18 20.5L16.5 19Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2 3H18V15H8.5L6.5 17L4.5 15H2V3 M5 10L5 12L10 12L10 10 M5 6L5 9L13 9L13 6Z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></symbol><symbol id="minus" class="icon" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"></line></symbol><symbol id="plus" class="icon" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></symbol><symbol id="save" class="icon" viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></symbol><symbol id="link" class="icon" viewBox="0 0 24 24"><path d="M9,7L6,7A2 2 0 0 0 6,17L9,17"></path><path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"></path><path d="M7,12L17,12"></path></symbol><symbol viewBox="0 0 24 24" id="external-link"><path fill="currentColor" stroke-width="0" d="m16 8.4l-8.875 8.9q-.3.3-.713.3t-.712-.3q-.3-.3-.3-.713t.3-.712L14.6 7H7q-.425 0-.713-.288T6 6q0-.425.288-.713T7 5h10q.425 0 .713.288T18 6v10q0 .425-.288.713T17 17q-.425 0-.713-.288T16 16V8.4Z"></path></symbol>
125<symbol id="chevron-up" class="icon" viewBox="0 0 24 24"><polyline points="18 15 12 9 6 15"></polyline></symbol><symbol id="chevron-down" class="icon" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"></path></symbol><symbol id="delete" class="icon" viewBox="0 0 24 24"><path fill="currentColor" stroke="none" d="M22 4.2h-5.6L15 1.6c-.1-.2-.4-.4-.7-.4H9.6c-.2 0-.5.2-.6.4L7.6 4.2H2c-.4 0-.8.4-.8.8s.4.8.8.8h1.8V22c0 .4.3.8.8.8h15c.4 0 .8-.3.8-.8V5.8H22c.4 0 .8-.3.8-.8s-.4-.8-.8-.8zM10.8 16.5c0 .4-.3.8-.8.8s-.8-.3-.8-.8V10c0-.4.3-.8.8-.8s.8.3.8.8v6.5zm4 0c0 .4-.3.8-.8.8s-.8-.3-.8-.8V10c0-.4.3-.8.8-.8s.8.3.8.8v6.5z"></path></symbol><symbol id="home" viewBox="0 0 256 256"><path fill="currentColor" d="m221.56 100.85l-79.95-75.47l-.16-.15a19.93 19.93 0 0 0-26.91 0l-.17.15l-79.93 75.47a20.07 20.07 0 0 0-6.44 14.7V208a20 20 0 0 0 20 20h48a20 20 0 0 0 20-20v-44h24v44a20 20 0 0 0 20 20h48a20 20 0 0 0 20-20v-92.45a20.07 20.07 0 0 0-6.44-14.7ZM204 204h-40v-44a20 20 0 0 0-20-20h-32a20 20 0 0 0-20 20v44H52v-86.72l76-71.75l76 71.75Z"></path></symbol><symbol id="search" viewBox="0 0 24 24"><path stroke-width="0.2" fill="currentColor" d="m18.9 20.3l-5.6-5.6q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5q0-2.725 1.888-4.612T9.5 3q2.725 0 4.612 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.625 5.625q.275.275.275.675t-.3.7q-.275.275-.7.275t-.7-.275ZM9.5 14q1.875 0 3.188-1.313T14 9.5q0-1.875-1.313-3.188T9.5 5Q7.625 5 6.312 6.313T5 9.5q0 1.875 1.313 3.188T9.5 14Z"></path></symbol>
125<symbol id="docs" viewBox="0 0 16 16"><path fill="currentColor" d="M1 3.25C1 2.56 1.56 2 2.249 2h.5c.69 0 1.248.56 1.248 1.25v9.495c0 .69-.559 1.25-1.248 1.25h-.5A1.25 1.25 0 0 1 1 12.744V3.249ZM2.249 3a.25.25 0 0 0-.25.25v9.495c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25V3.249a.25.25 0 0 0-.25-.25h-.5Zm2.748.25c0-.69.559-1.25 1.249-1.25h.5c.689 0 1.248.56 1.248 1.25v9.495c0 .69-.56 1.25-1.249 1.25h-.5a1.25 1.25 0 0 1-1.248-1.25V3.249ZM6.246 3a.25.25 0 0 0-.25.25v9.495c0 .138.112.25.25.25h.5a.25.25 0 0 0 .249-.25V3.249a.25.25 0 0 0-.25-.25h-.5Zm5.726 1.777a1.249 1.249 0 0 0-1.57-.713l-.583.204a1.25 1.25 0 0 0-.746 1.645l2.937 7.304c.249.62.94.933 1.571.713l.582-.204a1.25 1.25 0 0 0 .746-1.646l-2.937-7.303Zm-1.24.23a.25.25 0 0 1 .313.143l2.937 7.303a.25.25 0 0 1-.149.33l-.582.203a.25.25 0 0 1-.314-.142L10 5.54a.25.25 0 0 1 .149-.329l.582-.204Z"></path></symbol><symbol id="contents" viewBox="0 0 256 256" stroke-width="0"><path fill="currentColor" d="M224 44h-64a43.86 43.86 0 0 0-32 13.85A43.86 43.86 0 0 0 96 44H32a20 20 0 0 0-20 20v128a20 20 0 0 0 20 20h64a20 20 0 0 1 20 20a12 12 0 0 0 24 0a20 20 0 0 1 20-20h64a20 20 0 0 0 20-20V64a20 20 0 0 0-20-20ZM96 188H36V68h60a20 20 0 0 1 20 20v104.81A43.79 43.79 0 0 0 96 188Zm124 0h-60a43.71 43.71 0 0 0-20 4.83V88a20 20 0 0 1 20-20h60Z"></path></symbol>
125<symbol viewBox="0 0 24 24" id="copy-to-clipboard-empty"><path fill="currentColor" d="M5 22q-.825 0-1.413-.588T3 20V6h2v14h11v2H5Zm4-4q-.825 0-1.413-.588T7 16V4q0-.825.588-1.413T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.588 1.413T18 18H9Zm0-2h9V4H9v12Zm0 0V4v12Z"></path></symbol><symbol viewBox="0 0 24 24" id="copy-to-clipboard-filled"><path fill="currentColor" d="M5 22q-.825 0-1.413-.588T3 20V6h2v14h11v2H5Zm4-4q-.825 0-1.413-.588T7 16V4q0-.825.588-1.413T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.588 1.413T18 18H9Z"></path></symbol><symbol viewBox="0 0 24 24" id="font-toggle"><g stroke="currentColor"><path d="m3 15 4-8 4 8"></path><path d="M4 13h6"></path><circle cx="18" cy="12" r="3"></circle><path d="M21 9v6"></path></g></symbol></svg></div><!----> <!--[-1--><!--]--> <!--[0--><a href="#main" class="svelte-1kjmc9y"><!--[-1-->Skip to main content<!--]--></a><!----> <nav aria-label="Primary" class="svelte-wf8082 visible"><a class="home-link svelte-wf8082" href="/" title="Homepage" aria-label="Svelte"></a> <!--[0--><div class="current-section mobile svelte-wf8082">Docs</div><!--]--> <div class="desktop svelte-wf8082"><div class="links svelte-wf8082"><!--[--><!--[0--><div class="dropdown svelte-fwukmr"><a href="/docs" aria-current="page" class="svelte-wf8082">Docs <svg width="20" height="20" class="svelte-hfc14b"><use href="#chevron-down"></use></svg><!----></a><!----> <nav class="dropdown-content svelte-fwukmr"><div class="hover-menu svelte-1ftqc6l"><!--[--><a class="secondary svelte-wf8082" href="/docs/svelte" aria-current="page">Svelte</a><a class="secondary svelte-wf8082" href="/docs/kit">SvelteKit</a><a class="secondary svelte-wf8082" href="/docs/cli">CLI</a><a class="secondary svelte-wf8082" href="/docs/ai">AI</a><!--]--><!----></div><!----></nav></div><!--]--><!--[0--><div class="dropdown svelte-fwukmr"><a href="/playground" class="svelte-wf8082">Playground <svg width="20" height="20" class="svelte-hfc14b"><use href="#chevron-down"></use></svg><!----></a><!----> <nav class="dropdown-content svelte-fwukmr"><div class="hover-menu svelte-1ftqc6l"><!--[--><a class="secondary svelte-wf8082" href="/playground">Create new app</a><a class="secondary svelte-wf8082" href="/apps">Your saved apps</a><!--]--><!----></div><!----></nav></div><!--]--><!--[-1--><a href="/tutorial" class="svelte-wf8082">Tutorial</a><!--]--><!--[-1--><a href="/packages" class="svelte-wf8082">Packages</a><!--]--><!--[-1--><a href="/blog" class="svelte-wf8082">Blog</a><!--]--><!--]--></div> <div class="menu svelte-wf8082"><form class="search-container svelte-curb4c" action="/search"><input value="" type="search" name="q" placeholder="Search" aria-label="Search" spellcheck="false" class="svelte-curb4c"/> <!--[-1--><!--]--></form><!----> <div class="external-links svelte-wf8082"><a href="/chat" aria-label="Discord Chat" class="svelte-wf8082"><span data-icon="discord" class="svelte-wf8082"></span></a> <a href="https://bsky.app/profile/svelte.dev" aria-label="Svelte on Bluesky" class="svelte-wf8082"><span data-icon="bluesky" class="svelte-wf8082"></span></a> <a href="https://github.com/sveltejs" aria-label="GitHub Organization" class="svelte-wf8082"><span data-icon="github" class="svelte-wf8082"></span></a></div> <button class="raised svelte-ocz8b7" type="button" aria-pressed="false" aria-label="Toggle font"><span class="icon svelte-ocz8b7"></span></button><!----> <button class="raised" type="button" aria-pressed="false" aria-label="Toggle dark mode"><span class="icon svelte-16r4un1"></span></button><!----></div></div> <div class="mobile mobile-menu svelte-wf8082"><button aria-label="Search" class="raised icon search"><svg width="18" height="18" class="svelte-hfc14b"><use href="#search"></use></svg><!----></button> <button class="raised svelte-ocz8b7" type="button" aria-pressed="false" aria-label="Toggle font"><span class="icon svelte-ocz8b7"></span></button><!----> <button class="raised" type="button" aria-pressed="false" aria-label="Toggle dark mode"><span class="icon svelte-16r4un1"></span></button><!----> <button aria-label="Toggle menu" aria-expanded="false" class="menu-toggle raised icon"><svg width="16" height="16" class="svelte-hfc14b"><use href="#menu"></use></svg><!----></button></div></nav> <!--[-1--><!--]--><!----><!--]--> <!--[-1--><!--]-->
125 <main id="main" class="svelte-1ftfg6q"><!--[--><!--[0--><!--[--><div class="container svelte-13r3uwa"><div class="toc-container svelte-13r3uwa" style="order: 1"><nav aria-label="Docs" class="svelte-1dx26b8"><ul class="sidebar svelte-1dx26b8"><!--[--><li class="svelte-1dx26b8"><h3 class="svelte-1dx26b8">Introduction</h3> <ul class="svelte-1dx26b8"><!--[--><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" aria-current="page" href="/docs/svelte/overview">Overview</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/getting-started">Getting started</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-files">.svelte files</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-js-files">.svelte.js and .svelte.ts files</a></li><!--]--></ul></li><li class="svelte-1dx26b8"><h3 class="svelte-1dx26b8">Runes</h3> <ul class="svelte-1dx26b8"><!--[--><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/what-are-runes">What are runes?</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/$state">$state</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/$derived">$derived</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/$effect">$effect</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/$props">$props</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/$bindable">$bindable</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/$inspect">$inspect</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/$host">$host</a></li><!--]--></ul></li><li class="svelte-1dx26b8"><h3 class="svelte-1dx26b8">Template syntax</h3> <ul class="svelte-1dx26b8"><!--[--><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/basic-markup">Basic markup</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/if">{#if ...}</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/each">{#each ...}</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/key">{#key ...}</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/await">{#await ...}</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/snippet">{#snippet ...}</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/@render">{@render ...}</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/@html">{@html ...}</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/@attach">{@attach ...}</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/@const">{@const ...}</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/@debug">{@debug ...}</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/declaration-tags">{let/const ...}</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/bind">bind:</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/use">use:</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/transition">transition:</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/in-and-out">in: and out:</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/animate">animate:</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/style">style:</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/class">class</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/await-expressions">await</a></li><!--]--></ul></li><li class="svelte-1dx26b8"><h3 class="svelte-1dx26b8">Styling</h3> <ul class="svelte-1dx26b8"><!--[--><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/scoped-styles">Scoped styles</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/global-styles">Global styles</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/custom-properties">Custom properties</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/nested-style-elements">Nested <style> elements</a></li>
125<!--]--></ul></li><li class="svelte-1dx26b8"><h3 class="svelte-1dx26b8">Special elements</h3> <ul class="svelte-1dx26b8"><!--[--><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-boundary"><svelte:boundary></a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-window"><svelte:window></a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-document"><svelte:document></a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-body"><svelte:body></a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-head"><svelte:head></a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-element"><svelte:element></a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-options"><svelte:options></a></li><!--]--></ul></li><li class="svelte-1dx26b8"><h3 class="svelte-1dx26b8">Runtime</h3> <ul class="svelte-1dx26b8"><!--[--><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/stores">Stores</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/context">Context</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/lifecycle-hooks">Lifecycle hooks</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/imperative-component-api">Imperative component API</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/hydratable">Hydratable data</a></li><!--]--></ul></li><li class="svelte-1dx26b8"><h3 class="svelte-1dx26b8">Misc</h3> <ul class="svelte-1dx26b8"><!--[--><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/best-practices">Best practices</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/testing">Testing</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/typescript">TypeScript</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/custom-elements">Custom elements</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/browser-support">Browser support</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/v4-migration-guide">Svelte 4 migration guide</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/v5-migration-guide">Svelte 5 migration guide</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/faq">Frequently asked questions</a></li><!--]--></ul></li><li class="svelte-1dx26b8"><h3 class="svelte-1dx26b8">Reference</h3> <ul class="svelte-1dx26b8"><!--[--><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte">svelte</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-action">svelte/action</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-animate">svelte/animate</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-attachments">svelte/attachments</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-compiler">svelte/compiler</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-easing">svelte/easing</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-events">svelte/events</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-legacy">svelte/legacy</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-motion">svelte/motion</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-reactivity-window">svelte/reactivity/window</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-reactivity">svelte/reactivity</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-server">svelte/server</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-store">svelte/store</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/svelte-transition">svelte/transition</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/compiler-errors">Compiler errors</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/compiler-warnings">Compiler warnings</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/runtime-errors">Runtime errors</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/runtime-warnings">Runtime warnings</a></li>
125<!--]--></ul></li><li class="svelte-1dx26b8"><h3 class="svelte-1dx26b8">Legacy APIs</h3> <ul class="svelte-1dx26b8"><!--[--><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/legacy-overview">Overview</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/legacy-let">Reactive let/var declarations</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/legacy-reactive-assignments">Reactive $: statements</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/legacy-export-let">export let</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/legacy-$$props-and-$$restProps">$$props and $$restProps</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/legacy-on">on:</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/legacy-slots"><slot></a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/legacy-$$slots">$$slots</a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/legacy-svelte-fragment"><svelte:fragment></a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/legacy-svelte-component"><svelte:component></a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/legacy-svelte-self"><svelte:self></a></li><li class="svelte-1dx26b8"><a class="page svelte-1dx26b8" href="/docs/svelte/legacy-component-api">Imperative component API</a></li><!--]--></ul></li><!--]--></ul></nav><!----></div> <div class="page content svelte-13r3uwa"><!--[--><!--[-1--><!--[--><div id="docs-content"><header><div class="breadcrumbs svelte-1prekrl"><!--[--><span class="svelte-1prekrl">Svelte</span><span class="svelte-1prekrl">Introduction</span><!--]--></div><!----> <h1><!---->Overview<!----></h1> <!--[-1--><!--]--></header> <aside class="on-this-page svelte-42rdnp"><label class="svelte-42rdnp"><input type="checkbox" aria-label="Toggle 'on this page' menu" class="svelte-42rdnp"/> <h3 class="svelte-42rdnp">On this page</h3></label> <nav class="svelte-42rdnp"><ul class="svelte-42rdnp"><li class="svelte-42rdnp"><a href="/docs/svelte/overview" class="svelte-42rdnp active">Overview</a></li> <!--[--><!--]--></ul></nav></aside><!----> <div class="text content"><div class="text svelte-h44pz9"><!----><p>Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript...</p> 126<div class="code-block"><div class="controls"><span class="filename" data-ext=".svelte">App</span><input class="ts-toggle raised" checked title="Toggle language" type="checkbox" aria-label="Toggle JS/TS">
126<button class="copy-to-clipboard raised" title="Copy to clipboard" aria-label="Copy to clipboard"></button></div><pre data-js data-language="svelte" class="twinkleplop"><code><span class="l"><span class="tok punctuation"><</span><span class="tok tag_name">script</span><span class="tok punctuation">></span></span> 127 <span class="l"><span class="tok keyword">function</span> <span class="tok function">greet</span><span class="tok punctuation">()</span> <span class="tok punctuation">{</span></span> 128 <span class="l"><span class="tok function">alert</span><span class="tok punctuation">(</span><span class="tok string">'Welcome to Svelte!'</span><span class="tok punctuation">);</span></span> 129 <span class="l"><span class="tok punctuation">}</span></span> 130<span class="l"><span class="tok punctuation"></</span><span class="tok tag_name">script</span><span class="tok punctuation">></span></span> 131<span class="l"></span> 132<span class="l"><span class="tok punctuation"><</span><span class="tok tag_name">button</span> <span class="tok attr_name">onclick</span><span class="tok operator">=</span><span class="tok expression">{</span><span class="tok identifier">greet</span><span class="tok expression">}</span><span class="tok punctuation">></span>click me<span class="tok punctuation"></</span><span class="tok tag_name">button</span><span class="tok punctuation">></span></span> 133<span class="l"></span> 134<span class="l"><span class="tok punctuation"><</span><span class="tok tag_name">style</span><span class="tok punctuation">></span></span> 135 <span class="l"><span class="tok selector">button</span> <span class="tok punctuation">{</span></span> 136 <span class="l"><span class="tok property">font-size</span><span class="tok punctuation">:</span> <span class="tok number">2</span><span class="tok unit">em</span><span class="tok punctuation">;</span></span> 137 <span class="l"><span class="tok punctuation">}</span></span> 138<span class="l"><span class="tok punctuation"></</span><span class="tok tag_name">style</span><span class="tok punctuation">></span></span></code></pre><pre data-ts data-language="svelte" class="twinkleplop"><code><span class="l"><span class="tok punctuation"><</span><span class="tok tag_name">script</span> <span class="tok attr_name">lang</span><span class="tok operator">=</span><span class="tok string">"ts"</span><span class="tok punctuation">></span></span> 139 <span class="l"><span class="tok keyword">function</span> <span class="tok function">greet</span><span class="tok punctuation">()</span> <span class="tok punctuation">{</span></span> 140 <span class="l"><span class="tok function">alert</span><span class="tok punctuation">(</span><span class="tok string">'Welcome to Svelte!'</span><span class="tok punctuation">);</span></span> 141 <span class="l"><span class="tok punctuation">}</span></span> 142<span class="l"><span class="tok punctuation"></</span><span class="tok tag_name">script</span><span class="tok punctuation">></span></span> 143<span class="l"></span> 144<span class="l"><span class="tok punctuation"><</span><span class="tok tag_name">button</span> <span class="tok attr_name">onclick</span><span class="tok operator">=</span><span class="tok expression">{</span><span class="tok identifier">greet</span><span class="tok expression">}</span><span class="tok punctuation">></span>click me<span class="tok punctuation"></</span><span class="tok tag_name">button</span><span class="tok punctuation">></span></span> 145<span class="l"></span> 146<span class="l"><span class="tok punctuation"><</span><span class="tok tag_name">style</span><span class="tok punctuation">></span></span> 147 <span class="l"><span class="tok selector">button</span> <span class="tok punctuation">{</span></span> 148 <span class="l"><span class="tok property">font-size</span><span class="tok punctuation">:</span> <span class="tok number">2</span><span class="tok unit">em</span><span class="tok punctuation">;</span></span> 149 <span class="l"><span class="tok punctuation">}</span></span> 150<span class="l"><span class="tok punctuation"></</span><span class="tok tag_name">style</span><span class="tok punctuation">></span></span></code></pre></div><p>...into lean, tightly optimized JavaScript.</p> 151<p>You can use it to build anything on the web, from standalone components to ambitious full stack apps (using Svelteâs companion application framework, <a href="../kit">SvelteKit</a>) and everything in between.</p> 152<p>These pages serve as reference documentation. If youâre new to Svelte, we recommend starting with the <a href="/tutorial">
152interactive tutorial</a> and coming back here when you have questions.</p> 153<p>You can also try Svelte online in the <a href="/playground">playground</a> or, if you need a more fully-featured environment, on <a href="https://sveltekit.new">StackBlitz</a>.</p> 154<!----><!----></div><!----></div> <p class="edit svelte-s202gb"><a href="https://github.com/sveltejs/svelte/edit/main/documentation/docs/01-introduction/01-overview.md" class="svelte-s202gb"><svg width="20" height="20" class="svelte-hfc14b"><use href="#edit"></use></svg><!----> Edit this page on GitHub</a> <!--[0--><a href="/docs/svelte/overview/llms.txt" class="svelte-s202gb"><svg width="20" height="20" class="svelte-hfc14b"><use href="#contents"></use></svg><!----> llms.txt</a><!--]--></p> <div class="controls svelte-s202gb"><div class="flex svelte-s202gb"><span class="svelte-s202gb faded">previous</span> <span class="next svelte-s202gb">next</span></div> <div class="flex svelte-s202gb"><!--[-1--><!--]--> <!--[0--><a class="next svelte-s202gb" href="/docs/svelte/getting-started">Getting started</a><!--]--></div></div><!----></div><!--]--><!--]--><!--]--><!----></div></div><!--]--><!--]--><!--]--><!----><!----></main> <!--[0--><!--[-1--><!--]--><!--]--><!----><!----> <!--[-1--><!--]--><!--]--><!--]--><!--]--><!----> <!--[-1--><!--]--><!--]--> 155 156
156<script> 157 { 158 __sveltekit_ht6de8 = { 159 base: new URL("../..", location).pathname.slice(0, -1), 160 version: "1790794872269" 161 }; 162 163 const element = document.currentScript.parentElement; 164 165 import("../../_app/immutable/entry/start.kU3ZOo6P.js").then(async (kit) => { 166 kit.init(__sveltekit_ht6de8); 167 const app = await import("../../_app/immutable/entry/app.C_wfGPRW.js"); 168 kit.start(app, element, { 169 node_ids: [0, 3, 16], 170 data: [{type:"data",data:{nav_links:[{title:"Docs",slug:"docs",sections:[{title:"Svelte",path:"/docs/svelte",sections:[{title:"Introduction",sections:[{title:"Overview",path:"/docs/svelte/overview"},{title:"Getting started",path:"/docs/svelte/getting-started"},{title:".svelte files",path:"/docs/svelte/svelte-files"},{title:".svelte.js and .svelte.ts files",path:"/docs/svelte/svelte-js-files"}]},{title:"Runes",sections:[{title:"What are runes?",path:"/docs/svelte/what-are-runes"},{title:"$state",path:"/docs/svelte/$state"},{title:"$derived",path:"/docs/svelte/$derived"},{title:"$effect",path:"/docs/svelte/$effect"},{title:"$props",path:"/docs/svelte/$props"},{title:"$bindable",path:"/docs/svelte/$bindable"},{title:"$inspect",path:"/docs/svelte/$inspect"},{title:"$host",path:"/docs/svelte/$host"}]},{title:"Template syntax",sections:[{title:"Basic markup",path:"/docs/svelte/basic-markup"},{title:"{#if ...}",path:"/docs/svelte/if"},{title:"{#each ...}",path:"/docs/svelte/each"},{title:"{#key ...}",path:"/docs/svelte/key"},{title:"{#await ...}",path:"/docs/svelte/await"},{title:"{#snippet ...}",path:"/docs/svelte/snippet"},{title:"{@render ...}",path:"/docs/svelte/@render"},{title:"{@html ...}",path:"/docs/svelte/@html"},{title:"{@attach ...}",path:"/docs/svelte/@attach"},{title:"{@const ...}",path:"/docs/svelte/@const"},{title:"{@debug ...}",path:"/docs/svelte/@debug"},{title:"{let/const ...}",path:"/docs/svelte/declaration-tags"},{title:"bind:",path:"/docs/svelte/bind"},{title:"use:",path:"/docs/svelte/use"},{title:"transition:",path:"/docs/svelte/transition"},{title:"in: and out:",path:"/docs/svelte/in-and-out"},{title:"animate:",path:"/docs/svelte/animate"},{title:"style:",path:"/docs/svelte/style"},{title:"class",path:"/docs/svelte/class"},{title:"await",path:"/docs/svelte/await-expressions"}]},{title:"Styling",sections:[{title:"Scoped styles",path:"/docs/svelte/scoped-styles"},{title:"Global styles",path:"/docs/svelte/global-styles"},{title:"Custom properties",path:"/docs/svelte/custom-properties"},{title:"Nested \u003Cstyle> elements",path:"/docs/svelte/nested-style-elements"}]},{title:"Special elements",sections:[{title:"\u003Csvelte:boundary>",path:"/docs/svelte/svelte-boundary"},{title:"\u003Csvelte:window>",path:"/docs/svelte/svelte-window"},{title:"\u003Csvelte:document>",path:"/docs/svelte/svelte-document"},{title:"\u003Csvelte:body>",path:"/docs/svelte/svelte-body"},{title:"\u003Csvelte:head>",path:"/docs/svelte/svelte-head"},{title:"\u003Csvelte:element>",path:"/docs/svelte/svelte-element"},{title:"\u003Csvelte:options>",path:"/docs/svelte/svelte-options"}]},{title:"Runtime",sections:[{title:"Stores",path:"/docs/svelte/stores"},{title:"Context",path:"/docs/svelte/context"},{title:"Lifecycle hooks",path:"/docs/svelte/lifecycle-hooks"},{title:"Imperative component API",path:"/docs/svelte/imperative-component-api"},{title:"Hydratable data",path:"/docs/svelte/hydratable"}]},{title:"Misc",sections:[{title:"Best practices",path:"/docs/svelte/best-practices"},{title:"Testing",path:"/docs/svelte/testing"},{title:"TypeScript",path:"/docs/svelte/typescript"},{title:"Custom elements",path:"/docs/svelte/custom-elements"},{title:"Browser support",path:"/docs/svelte/browser-support"},{title:"Svelte 4 migration guide",path:"/docs/svelte/v4-migration-guide"},{title:"Svelte 5 migration guide",path:"/docs/svelte/v5-migration-guide"},{title:"Frequently asked questions",path:"/docs/svelte/faq"}]},{title:"Reference",sections:[{title:"svelte",path:"/docs/svelte/svelte"},{title:"svelte/action",path:"/docs/svelte/svelte-action"},{title:"svelte/animate",path:"/docs/svelte/svelte-animate"},{title:"svelte/attachments",path:"/docs/svelte/svelte-attachments"},{title:"svelte/compiler",path:"/docs/svelte/svelte-compiler"},{title:"svelte/easing",path:"/docs/svelte/svelte-easing"},{title:"svelte/events",path:"/docs/svelte/svelte-events"},{title:"svelte/legacy",path:"/docs/svelte/svelte-legacy"},{title:"svelte/motion",path:"/docs/svelte/svelte-motion"},{title:"svelte/reactivity/window",path:"/docs/svelte/svelte-reactivity-window"},{title:"svelte/reactivity",path:"/docs/svelte/svelte-reactivity"},{title:"svelte/server",path:"/docs/svelte/svelte-server"},{title:"svelte/store",path:"/docs/svelte/svelte-store"},{title:"svelte/transition",path:"/docs/svelte/svelte-transition"},{title:"Compiler errors",path:"/docs/svelte/compiler-errors"},{title:"Compiler warnings",path:"/docs/svelte/compiler-warnings"},{title:"Runtime errors",path:"/docs/svelte/runtime-errors"},{title:"Runtime warnings",path:"/docs/svelte/runtime-warnings"}]},{title:"Legacy APIs",sections:[{title:"Overview",path:"/docs/svelte/legacy-overview"},{title:"Reactive let/var declarations",path:"/docs/svelte/legacy-let"},{title:"Reactive $: statements",path:"/docs/svelte/legacy-reactive-assignments"},{title:"export let",path:"/docs/svelte/legacy-export-let"},{title:"$$props and $$restProps",path:"/docs/svelte/legacy-$$props-and-$$restProps"},{title:"on:",path:"/docs/svelte/legacy-on"},{title:"\u003Cslot>",path:"/docs/svelte/legacy-slots"},{title:"$$slots",path:"/docs/svelte/legacy-$$slots"},{title:"\u003Csvelte:fragment>",path:"/docs/svelte/legacy-svelte-fragment"},{title:"\u003Csvelte:component>",path:"/docs/svelte/legacy-svelte-component"},{title:"\u003Csvelte:self>",path:"/docs/svelte/legacy-svelte-self"},{title:"Imperative component API",path:"/docs/svelte/legacy-component-api"}]}]},{title:"SvelteKit",path:"/docs/kit",sections:[{title:"Getting started",sections:[{title:"Introduction",path:"/docs/kit/introduction"},{title:"Creating a project",path:"/docs/kit/creating-a-project"},{title:"Project types",path:"/docs/kit/project-types"},{title:"Project structure",path:"/docs/kit/project-structure"},{title:"Web standards",path:"/docs/kit/web-standards"}]},{title:"Core concepts",sections:[{title:"Routing",path:"/docs/kit/routing"},{title:"Loading data",path:"/docs/kit/load"},{title:"Form actions",path:"/docs/kit/form-actions"},{title:"Page options",path:"/docs/kit/page-options"},{title:"State management",path:"/docs/kit/state-management"},{title:"Remote functions",path:"/docs/kit/remote-functions"},{title:"Environment variables",path:"/docs/kit/environment-variables"}]},{title:"Build and deploy",sections:[{title:"Building your app",path:"/docs/kit/building-your-app"},{title:"Adapters",path:"/docs/kit/adapters"},{title:"Zero-config deployments",path:"/docs/kit/adapter-auto"},{title:"Node servers",path:"/docs/kit/adapter-node"},{title:"Static site generation",path:"/docs/kit/adapter-static"},{title:"Single-page apps",path:"/docs/kit/single-page-apps"},{title:"Cloudflare",path:"/docs/kit/adapter-cloudflare"},{title:"Cloudflare Workers",path:"/docs/kit/adapter-cloudflare-workers"},{title:"Netlify",path:"/docs/kit/adapter-netlify"},{title:"Vercel",path:"/docs/kit/adapter-vercel"}
170,{title:"Writing adapters",path:"/docs/kit/writing-adapters"}]},{title:"Advanced",sections:[{title:"Advanced routing",path:"/docs/kit/advanced-routing"},{title:"Hooks",path:"/docs/kit/hooks"},{title:"Errors",path:"/docs/kit/errors"},{title:"Link options",path:"/docs/kit/link-options"},{title:"Service workers",path:"/docs/kit/service-workers"},{title:"Server-only modules",path:"/docs/kit/server-only-modules"},{title:"Snapshots",path:"/docs/kit/snapshots"},{title:"Shallow routing",path:"/docs/kit/shallow-routing"},{title:"Observability",path:"/docs/kit/observability"},{title:"Packaging",path:"/docs/kit/packaging"}]},{title:"Best practices",sections:[{title:"Auth",path:"/docs/kit/auth"},{title:"Performance",path:"/docs/kit/performance"},{title:"Icons",path:"/docs/kit/icons"},{title:"Images",path:"/docs/kit/images"},{title:"Accessibility",path:"/docs/kit/accessibility"},{title:"SEO",path:"/docs/kit/seo"}]},{title:"Appendix",sections:[{title:"Frequently asked questions",path:"/docs/kit/faq"},{title:"Integrations",path:"/docs/kit/integrations"},{title:"Breakpoint Debugging",path:"/docs/kit/debugging"},{title:"Migrating to SvelteKit v2",path:"/docs/kit/migrating-to-sveltekit-2"},{title:"Migrating from Sapper",path:"/docs/kit/migrating"},{title:"Additional resources",path:"/docs/kit/additional-resources"},{title:"Glossary",path:"/docs/kit/glossary"}]},{title:"Reference",sections:[{title:"@sveltejs/kit",path:"/docs/kit/@sveltejs-kit"},{title:"@sveltejs/kit/env",path:"/docs/kit/@sveltejs-kit-env"},{title:"@sveltejs/kit/hooks",path:"/docs/kit/@sveltejs-kit-hooks"},{title:"@sveltejs/kit/node/polyfills",path:"/docs/kit/@sveltejs-kit-node-polyfills"},{title:"@sveltejs/kit/node",path:"/docs/kit/@sveltejs-kit-node"},{title:"@sveltejs/kit/vite",path:"/docs/kit/@sveltejs-kit-vite"},{title:"$app/env",path:"/docs/kit/$app-env"},{title:"$app/env/private",path:"/docs/kit/$app-env-private"},{title:"$app/env/public",path:"/docs/kit/$app-env-public"},{title:"$app/environment",path:"/docs/kit/$app-environment"},{title:"$app/forms",path:"/docs/kit/$app-forms"},{title:"$app/navigation",path:"/docs/kit/$app-navigation"},{title:"$app/paths",path:"/docs/kit/$app-paths"},{title:"$app/server",path:"/docs/kit/$app-server"},{title:"$app/state",path:"/docs/kit/$app-state"},{title:"$app/stores",path:"/docs/kit/$app-stores"},{title:"$app/types",path:"/docs/kit/$app-types"},{title:"$env/dynamic/private",path:"/docs/kit/$env-dynamic-private"},{title:"$env/dynamic/public",path:"/docs/kit/$env-dynamic-public"},{title:"$env/static/private",path:"/docs/kit/$env-static-private"},{title:"$env/static/public",path:"/docs/kit/$env-static-public"},{title:"$lib",path:"/docs/kit/$lib"},{title:"$service-worker",path:"/docs/kit/$service-worker"},{title:"Configuration",path:"/docs/kit/configuration"},{title:"Command Line Interface",path:"/docs/kit/cli"},{title:"Types",path:"/docs/kit/types"}]}]},{title:"CLI",path:"/docs/cli",sections:[{title:"Introduction",sections:[{title:"Overview",path:"/docs/cli/overview"},{title:"Frequently asked questions",path:"/docs/cli/faq"}]},{title:"Commands",sections:[{title:"sv create",path:"/docs/cli/sv-create"},{title:"sv add",path:"/docs/cli/sv-add"},{title:"sv check",path:"/docs/cli/sv-check"},{title:"sv migrate",path:"/docs/cli/sv-migrate"}]},{title:"Add-ons",sections:[{title:"ai-tools",path:"/docs/cli/ai-tools"},{title:"better-auth",path:"/docs/cli/better-auth"},{title:"drizzle",path:"/docs/cli/drizzle"},{title:"eslint",path:"/docs/cli/eslint"},{title:"experimental",path:"/docs/cli/experimental"},{title:"mdsvex",path:"/docs/cli/mdsvex"},{title:"paraglide",path:"/docs/cli/paraglide"},{title:"playwright",path:"/docs/cli/playwright"},{title:"prettier",path:"/docs/cli/prettier"},{title:"storybook",path:"/docs/cli/storybook"},{title:"sveltekit-adapter",path:"/docs/cli/sveltekit-adapter"},{title:"tailwindcss",path:"/docs/cli/tailwind"},{title:"vitest",path:"/docs/cli/vitest"},{title:"[create your own]",path:"/docs/cli/community"}]},{title:"API",sections:[{title:"sv",path:"/docs/cli/sv"},{title:"sv-utils",path:"/docs/cli/sv-utils"}]}]},{title:"AI",path:"/docs/ai",sections:[{title:"Introduction",sections:[{title:"Overview",path:"/docs/ai/overview"}]},{title:"Instructions",sections:[{title:"AGENTS.md",path:"/docs/ai/instructions"}]},{title:"MCP server",sections:[{title:"Overview",path:"/docs/ai/mcp"},{title:"Local setup",path:"/docs/ai/local-setup"},{title:"Remote setup",path:"/docs/ai/remote-setup"},{title:"Tools",path:"/docs/ai/tools"},{title:"Resources",path:"/docs/ai/resources"},{title:"Prompts",path:"/docs/ai/prompts"},{title:"CLI",path:"/docs/ai/cli"}]},{title:"Skills",sections:[{title:"Overview",path:"/docs/ai/skills"}]},{title:"Subagents",sections:[{title:"Overview",path:"/docs/ai/subagent"}]},{title:"Plugins",sections:[{title:"Claude Code",path:"/docs/ai/claude-plugin"},{title:"OpenCode",path:"/docs/ai/opencode-plugin"},{title:"Cursor",path:"/docs/ai/cursor-plugin"},{title:"GitHub Copilot CLI",path:"/docs/ai/copilot-plugin"},{title:"Codex CLI",path:"/docs/ai/codex-plugin"}]}]}]},{title:"Playground",slug:"playground",match:new RegExp("^\\/(playground|apps)(\\/|$)"),sections:[{title:"Create new app",path:"/playground",match:false,sections:[]},{title:"Your saved apps",path:"/apps",match:new RegExp("^\\/apps$"),sections:[]}]},{title:"Tutorial",slug:"tutorial",sections:[{title:"Basic Svelte",sections:[{title:"Introduction",sections:[{title:"Welcome to Svelte",path:"/tutorial/svelte/welcome-to-svelte"},{title:"Your first component",path:"/tutorial/svelte/your-first-component"},{title:"Dynamic attributes",path:"/tutorial/svelte/dynamic-attributes"},{title:"Styling",path:"/tutorial/svelte/styling"},{title:"Nested components",path:"/tutorial/svelte/nested-components"},{title:"HTML tags",path:"/tutorial/svelte/html-tags"}]},{title:"Reactivity",sections:[{title:"State",path:"/tutorial/svelte/state"},{title:"Deep state",path:"/tutorial/svelte/deep-state"},{title:"Derived state",path:"/tutorial/svelte/derived-state"},{title:"Inspecting state",path:"/tutorial/svelte/inspecting-state"},{title:"Effects",path:"/tutorial/svelte/effects"},{title:"Universal reactivity",path:"/tutorial/svelte/universal-reactivity"}]}
170,{title:"Props",sections:[{title:"Declaring props",path:"/tutorial/svelte/declaring-props"},{title:"Default values",path:"/tutorial/svelte/default-values"},{title:"Spread props",path:"/tutorial/svelte/spread-props"}]},{title:"Logic",sections:[{title:"If blocks",path:"/tutorial/svelte/if-blocks"},{title:"Else blocks",path:"/tutorial/svelte/else-blocks"},{title:"Else-if blocks",path:"/tutorial/svelte/else-if-blocks"},{title:"Each blocks",path:"/tutorial/svelte/each-blocks"},{title:"Keyed each blocks",path:"/tutorial/svelte/keyed-each-blocks"},{title:"Await blocks",path:"/tutorial/svelte/await-blocks"}]},{title:"Events",sections:[{title:"DOM events",path:"/tutorial/svelte/dom-events"},{title:"Inline handlers",path:"/tutorial/svelte/inline-handlers"},{title:"Capturing",path:"/tutorial/svelte/capturing"},{title:"Component events",path:"/tutorial/svelte/component-events"},{title:"Spreading events",path:"/tutorial/svelte/spreading-events"}]},{title:"Bindings",sections:[{title:"Text inputs",path:"/tutorial/svelte/text-inputs"},{title:"Numeric inputs",path:"/tutorial/svelte/numeric-inputs"},{title:"Checkbox inputs",path:"/tutorial/svelte/checkbox-inputs"},{title:"Select bindings",path:"/tutorial/svelte/select-bindings"},{title:"Group inputs",path:"/tutorial/svelte/group-inputs"},{title:"Select multiple",path:"/tutorial/svelte/multiple-select-bindings"},{title:"Textarea inputs",path:"/tutorial/svelte/textarea-inputs"}]},{title:"Classes and styles",sections:[{title:"The class attribute",path:"/tutorial/svelte/classes"},{title:"The style directive",path:"/tutorial/svelte/styles"},{title:"Component styles",path:"/tutorial/svelte/component-styles"}]},{title:"Attachments",sections:[{title:"The attach tag",path:"/tutorial/svelte/attach"},{title:"Attachment factories",path:"/tutorial/svelte/attachment-factories"}]},{title:"Transitions",sections:[{title:"The transition directive",path:"/tutorial/svelte/transition"},{title:"Adding parameters",path:"/tutorial/svelte/adding-parameters-to-transitions"},{title:"In and out",path:"/tutorial/svelte/in-and-out"},{title:"Custom CSS transitions",path:"/tutorial/svelte/custom-css-transitions"},{title:"Custom JS transitions",path:"/tutorial/svelte/custom-js-transitions"},{title:"Transition events",path:"/tutorial/svelte/transition-events"},{title:"Global transitions",path:"/tutorial/svelte/global-transitions"},{title:"Key blocks",path:"/tutorial/svelte/key-blocks"}]}]},{title:"Advanced Svelte",sections:[{title:"Advanced reactivity",sections:[{title:"Raw state",path:"/tutorial/svelte/raw-state"},{title:"Reactive classes",path:"/tutorial/svelte/reactive-classes"},{title:"Getters and setters",path:"/tutorial/svelte/getters-and-setters"},{title:"Reactive built-ins",path:"/tutorial/svelte/reactive-builtins"},{title:"Stores",path:"/tutorial/svelte/stores"}]},{title:"Reusing content",sections:[{title:"Snippets and render tags",path:"/tutorial/svelte/snippets-and-render-tags"},{title:"Passing snippets to components",path:"/tutorial/svelte/passing-snippets"},{title:"Implicit snippet props",path:"/tutorial/svelte/implicit-snippet-props"}]},{title:"Motion",sections:[{title:"Tweened values",path:"/tutorial/svelte/tweens"},{title:"Springs",path:"/tutorial/svelte/springs"}]},{title:"Advanced bindings",sections:[{title:"Contenteditable bindings",path:"/tutorial/svelte/contenteditable-bindings"},{title:"Each block bindings",path:"/tutorial/svelte/each-block-bindings"},{title:"Media elements",path:"/tutorial/svelte/media-elements"},{title:"Dimensions",path:"/tutorial/svelte/dimensions"},{title:"This",path:"/tutorial/svelte/bind-this"},{title:"Component bindings",path:"/tutorial/svelte/component-bindings"},{title:"Binding to component instances",path:"/tutorial/svelte/component-this"}]},{title:"Advanced transitions",sections:[{title:"Deferred transitions",path:"/tutorial/svelte/deferred-transitions"},{title:"Animations",path:"/tutorial/svelte/animations"}]},{title:"Context API",sections:[{title:"setContext and getContext",path:"/tutorial/svelte/context-api"}]},{title:"Special elements",sections:[{title:"\u003Csvelte:window>",path:"/tutorial/svelte/svelte-window"},{title:"\u003Csvelte:window> bindings",path:"/tutorial/svelte/svelte-window-bindings"},{title:"\u003Csvelte:document>",path:"/tutorial/svelte/svelte-document"},{title:"\u003Csvelte:body>",path:"/tutorial/svelte/svelte-body"},{title:"\u003Csvelte:head>",path:"/tutorial/svelte/svelte-head"},{title:"\u003Csvelte:element>",path:"/tutorial/svelte/svelte-element"},{title:"\u003Csvelte:boundary>",path:"/tutorial/svelte/svelte-boundary"}]},{title:"\u003Cscript module>",sections:[{title:"Sharing code",path:"/tutorial/svelte/sharing-code"},{title:"Exports",path:"/tutorial/svelte/module-exports"}]},{title:"Next steps",sections:[{title:"Congratulations!",path:"/tutorial/svelte/congratulations"}]}]},{title:"Basic SvelteKit",sections:[{title:"Introduction",sections:[{title:"What is SvelteKit?",path:"/tutorial/kit/introducing-sveltekit"}]},{title:"Routing",sections:[{title:"Pages",path:"/tutorial/kit/pages"},{title:"Layouts",path:"/tutorial/kit/layouts"},{title:"Route parameters",path:"/tutorial/kit/params"}]},{title:"Loading data",sections:[{title:"Page data",path:"/tutorial/kit/page-d
170ata"},{title:"Layout data",path:"/tutorial/kit/layout-data"}]},{title:"Headers and cookies",sections:[{title:"Setting headers",path:"/tutorial/kit/headers"},{title:"Reading and writing cookies",path:"/tutorial/kit/cookies"}]},{title:"Shared modules",sections:[{title:"The $lib alias",path:"/tutorial/kit/lib"}]},{title:"Forms",sections:[{title:"The \u003Cform> element",path:"/tutorial/kit/the-form-element"},{title:"Named form actions",path:"/tutorial/kit/named-form-actions"},{title:"Validation",path:"/tutorial/kit/form-validation"},{title:"Progressive enhancement",path:"/tutorial/kit/progressive-enhancement"},{title:"Customizing use:enhance",path:"/tutorial/kit/customizing-use-enhance"}]},{title:"API routes",sections:[{title:"GET handlers",path:"/tutorial/kit/get-handlers"},{title:"POST handlers",path:"/tutorial/kit/post-handlers"},{title:"Other handlers",path:"/tutorial/kit/other-handlers"}]},{title:"$app/state",sections:[{title:"page",path:"/tutorial/kit/page-state"},{title:"navigating",path:"/tutorial/kit/navigating-state"},{title:"updated",path:"/tutorial/kit/updated-state"}]},{title:"Errors and redirects",sections:[{title:"Basics",path:"/tutorial/kit/error-basics"},{title:"Error pages",path:"/tutorial/kit/error-pages"},{title:"Fallback errors",path:"/tutorial/kit/fallback-errors"},{title:"Redirects",path:"/tutorial/kit/redirects"}]}]},{title:"Advanced SvelteKit",sections:[{title:"Hooks",sections:[{title:"handle",path:"/tutorial/kit/handle"},{title:"The RequestEvent object",path:"/tutorial/kit/event"},{title:"handleFetch",path:"/tutorial/kit/handlefetch"},{title:"handleError",path:"/tutorial/kit/handleerror"}]},{title:"Page options",sections:[{title:"Basics",path:"/tutorial/kit/page-options"},{title:"ssr",path:"/tutorial/kit/ssr"},{title:"csr",path:"/tutorial/kit/csr"},{title:"prerender",path:"/tutorial/kit/prerender"},{title:"trailingSlash",path:"/tutorial/kit/trailingslash"}]},{title:"Link options",sections:[{title:"Preloading",path:"/tutorial/kit/preload"},{title:"Reloading the page",path:"/tutorial/kit/reload"}]},{title:"Advanced routing",sections:[{title:"Optional parameters",path:"/tutorial/kit/optional-params"},{title:"Rest parameters",path:"/tutorial/kit/rest-params"},{title:"Param matchers",path:"/tutorial/kit/param-matchers"},{title:"Route groups",path:"/tutorial/kit/route-groups"},{title:"Breaking out of layouts",path:"/tutorial/kit/breaking-out-of-layouts"}]},{title:"Advanced loading",sections:[{title:"Universal load functions",path:"/tutorial/kit/universal-load-functions"},{title:"Using both load functions",path:"/tutorial/kit/using-both-load-functions"},{title:"Using parent data",path:"/tutorial/kit/await-parent"},{title:"Invalidation",path:"/tutorial/kit/invalidation"},{title:"Custom dependencies",path:"/tutorial/kit/custom-dependencies"},{title:"invalidateAll",path:"/tutorial/kit/invalidate-all"}]},{title:"Environment variables",sections:[{title:"$env/static/private",path:"/tutorial/kit/env-static-private"},{title:"$env/dynamic/private",path:"/tutorial/kit/env-dynamic-private"},{title:"$env/static/public",path:"/tutorial/kit/env-static-public"},{title:"$env/dynamic/public",path:"/tutorial/kit/env-dynamic-public"}]},{title:"Conclusion",sections:[{title:"Next steps",path:"/tutorial/kit/next-steps"}]}]}]},{title:"Packages",slug:"packages"},{title:"Blog",slug:"blog"}],banner:{id:"ljubljana-2026-tickets-available",start:new Date(1785542400000),end:new Date(1795219199000),arrow:true,content:{lg:"Svelte Summit Ljubljana and online, Nov 19-20: Tickets now available!",sm:"Svelte Summit Nov 19-20"},href:"https://www.sveltesummit.com/"}},uses:{}},{type:"data",data:{sections:[{slug:"docs/svelte/introduction",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Introduction"},children:[{slug:"docs/svelte/overview",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Overview"},children:[]},{slug:"docs/svelte/getting-started",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Getting started"},children:[]},{slug:"docs/svelte/svelte-files",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:".svelte files"},children:[]},{slug:"docs/svelte/svelte-js-files",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:".svelte.js and .svelte.ts files"},children:[]}]},{slug:"docs/svelte/runes",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Runes"},children:[{slug:"docs/svelte/what-are-runes",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"What are runes?"},children:[]},{slug:"docs/svelte/$state",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$state",tags:"rune-state"},children:[]},{slug:"docs/svelte/$derived",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$derived",tags:"rune-derived"},children:[]},{slug:"docs/svelte/$effect",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$effect",tags:"rune-effect"},children:[]},{slug:"docs/svelte/$props",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$props",tags:"rune-props"},children:[]},{slug:"docs/svelte/$bindable",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$bindable"},children:[]},{slug:"docs/svelte/$inspect",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$inspect",tags:"rune-inspect"},children:[]},{slug:"docs/svelte/$host",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$host"},children:[]}]},{slug:"docs/svelte/template-syntax",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Template syntax"},children:[{slug:"docs/svelte/basic-markup",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Basic markup"},children:[]},{slug:"docs/svelte/if",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{#if ...}",tags:"template-if"},children:[]},{slug:"docs/svelte/each",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{#each ...}",tags:"template-each"},children:[]},{slug:"docs/svelte/key",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{#key ...}",tags:"template-key"},children:[]},{slug:"docs/svelte/await",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{#await ...}",tags:"template-await"},children:[]},{slug:"docs/svelte/snippet",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{#snippet ...}"},children:[]},{slug:"docs/svelte/@render",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{@render ...}"},children:[]},{slug:"docs/svelte/@html",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{@html ...}",tags:"template-html"},children:[]},{slug:"docs/svelte/@attach",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{@attach ...}",tags:"attachments"},children:[]},{slug:"docs/svelte/@const",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{@const ...}"},children:[]},{slug:"docs/svelte/@debug",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{@debug ...}"},children:[]},{slug:"docs/svelte/declaration-tags",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{let/const ...}"},children:[]},{slug:"docs/svelte/bind",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"bind:"},children:[]},{slug:"docs/svelte/use",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"use:"},children:[]},{slug:"docs/svelte/transition",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"transition:",tags:"transitions"},children:[]},{slug:"docs/svelte/in-and-out",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"in: and out:",tags:"transitions"},children:[]},{slug:"docs/svelte/animate",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"animate:"},children:[]},{slug:"docs/svelte/style",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"style:",tags:"template-style"},children:[]},{slug:"docs/svelte/class",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"class",tags:"template-style"},children:[]},{slug:"docs/svelte/await-expressions",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"await"},children:[]}]},{slug:"docs/svelte/styling",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Styling"},children:[{slug:"docs/svelte/scoped-styles",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Scoped styles",tags:"styles-scoped"},children:[]},{slug:"docs/svelte/global-styles",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Global styles",tags:"styles-global"},children:[]},{slug:"docs/svelte/custom-properties",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Custom properties",tags:"styles-custom-properties"},children:[]},{slug:"docs/svelte/nested-style-elements",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Nested \u003Cstyle> elements"},children:[]}]},{slug:"docs/svelte/special-elements",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Special elements"},children:[{slug:"docs/svelte/svelte-boundary",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:boundary>"},children:[]},{slug:"docs/svelte/svelte-window",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:window>"},children:[]},{slug:"docs/svelte/svelte-document",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:document>"},children:[]},{slug:"docs/svelte/svelte-body",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:body>"},children:[]},{slug:"docs/svelte/svelte-head",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:head>"},children:[]},{slug:"docs/svelte/svelte-element",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:element>"},children:[]},{slug:"docs/svelte/svelte-options",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:options>"},children:[]}]},{slug:"docs/svelte/runtime",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Runtime"},children:[{slug:"docs/svelte/stores",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Stores"},children:[]},{slug:"docs/svelte/context",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Context"},children:[]},{slug:"docs/svelte/lifecycle-hooks",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Lifecycle hooks"},children:[]},{slug:"docs/svelte/imperative-component-api",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Imperative component API"},children:[]},{slug:"docs/svelte/hydratable",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Hydratable data"},children:[]}]},{slug:"docs/svelte/misc",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Misc"},children:[{slug:"docs/svelte/best-practices",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Best practices",skill:true,
170name:"svelte-core-bestpractices",description:"Guidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more."},children:[]},{slug:"docs/svelte/testing",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Testing"},children:[]},{slug:"docs/svelte/typescript",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"TypeScript"},children:[]},{slug:"docs/svelte/custom-elements",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Custom elements"},children:[]},{slug:"docs/svelte/browser-support",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Browser support"},children:[]},{slug:"docs/svelte/v4-migration-guide",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Svelte 4 migration guide"},children:[]},{slug:"docs/svelte/v5-migration-guide",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Svelte 5 migration guide"},children:[]},{slug:"docs/svelte/faq",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Frequently asked questions"},children:[]}]},{slug:"docs/svelte/reference",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Reference"},children:[{slug:"docs/svelte/svelte",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte"},children:[]},{slug:"docs/svelte/svelte-action",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/action"},children:[]},{slug:"docs/svelte/svelte-animate",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/animate"},children:[]},{slug:"docs/svelte/svelte-attachments",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/attachments",tags:"attachments"},children:[]},{slug:"docs/svelte/svelte-compiler",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/compiler"},children:[]},{slug:"docs/svelte/svelte-easing",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/easing"},children:[]},{slug:"docs/svelte/svelte-events",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/events"},children:[]},{slug:"docs/svelte/svelte-legacy",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/legacy"},children:[]},{slug:"docs/svelte/svelte-motion",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/motion"},children:[]},{slug:"docs/svelte/svelte-reactivity-window",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/reactivity/window"},children:[]},{slug:"docs/svelte/svelte-reactivity",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/reactivity"},children:[]},{slug:"docs/svelte/svelte-server",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/server"},children:[]},{slug:"docs/svelte/svelte-store",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/store"},children:[]},{slug:"docs/svelte/svelte-transition",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/transition",tags:"transitions"},children:[]},{slug:"docs/svelte/compiler-errors",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Compiler errors"},children:[]},{slug:"docs/svelte/compiler-warnings",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Compiler warnings"},children:[]},{slug:"docs/svelte/runtime-errors",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Runtime errors"},children:[]},{slug:"docs/svelte/runtime-warnings",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Runtime warnings"},children:[]}]},{slug:"docs/svelte/legacy",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Legacy APIs"},children:[{slug:"docs/svelte/legacy-overview",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Overview"},children:[]},{slug:"docs/svelte/legacy-let",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Reactive let/var declarations"},children:[]},{slug:"docs/svelte/legacy-reactive-assignments",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Reactive $: statements"},children:[]},{slug:"docs/svelte/legacy-export-let",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"export let"},children:[]},{slug:"docs/svelte/legacy-$$props-and-$$restProps",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$$props and $$restProps"},children:[]},{slug:"docs/svelte/legacy-on",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"on:"},children:[]},{slug:"docs/svelte/legacy-slots",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Cslot>"},children:[]},{slug:"docs/svelte/legacy-$$slots",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$$slots"},children:[]},{slug:"docs/svelte/legacy-svelte-fragment",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:fragment>"},children:[]},{slug:"docs/svelte/legacy-svelte-component",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:component>"},children:[]},{slug:"docs/svelte/legacy-svelte-self",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:self>"},children:[]},{slug:"docs/svelte/legacy-component-api",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Imperative component API"},children:[]}]}]},uses:{params:["topic"]}},{type:"data",data:{document:{slug:"docs/svelte/overview",file:"docs/svelte/01-introduction/01-overview.md",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Overview"},breadcrumbs:[{title:"Docs"},{title:"Svelte"},{title:"Introduction"}],body:"\u003Cp>Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript...\u003C/p>\n\u003Cdiv class=\"code-block\">\u003Cdiv class=\"controls\">\u003Cspan class=\"filename\" data-ext=\".svelte\">App\u003C/span>\u003Cinput class=\"ts-toggle raised\" checked title=\"Toggle language\" type=\"checkbox\" aria-label=\"Toggle JS/TS\">
170\u003Cbutton class=\"copy-to-clipboard raised\" title=\"Copy to clipboard\" aria-label=\"Copy to clipboard\">\u003C/button>\u003C/div>\u003Cpre data-js data-language=\"svelte\" class=\"twinkleplop\">\u003Ccode>\u003Cspan class=\"l\">\u003Cspan class=\"tok punctuation\"><\u003C/span>\u003Cspan class=\"tok tag_name\">script\u003C/span>\u003Cspan class=\"tok punctuation\">>\u003C/span>\u003C/span>\n\t\u003Cspan class=\"l\">\u003Cspan class=\"tok keyword\">function\u003C/span> \u003Cspan class=\"tok function\">greet\u003C/span>\u003Cspan class=\"tok punctuation\">()\u003C/span> \u003Cspan class=\"tok punctuation\">{\u003C/span>\u003C/span>\n\t\t\u003Cspan class=\"l\">\u003Cspan class=\"tok function\">alert\u003C/span>\u003Cspan class=\"tok punctuation\">(\u003C/span>\u003Cspan class=\"tok string\">'Welcome to Svelte!'\u003C/span>\u003Cspan class=\"tok punctuation\">);\u003C/span>\u003C/span>\n\t\u003Cspan class=\"l\">\u003Cspan class=\"tok punctuation\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"l\">\u003Cspan class=\"tok punctuation\"></\u003C/span>\u003Cspan class=\"tok tag_name\">script\u003C/span>\u003Cspan class=\"tok punctuation\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"l\">\u003C/span>\n\u003Cspan class=\"l\">\u003Cspan class=\"tok punctuation\"><\u003C/span>\u003Cspan class=\"tok tag_name\">button\u003C/span> \u003Cspan class=\"tok attr_name\">onclick\u003C/span>\u003Cspan class=\"tok operator\">=\u003C/span>\u003Cspan class=\"tok expression\">{\u003C/span>\u003Cspan class=\"tok identifier\">greet\u003C/span>\u003Cspan class=\"tok expression\">}\u003C/span>\u003Cspan class=\"tok punctuation\">>\u003C/span>click me\u003Cspan class=\"tok punctuation\"></\u003C/span>\u003Cspan class=\"tok tag_name\">button\u003C/span>\u003Cspan class=\"tok punctuation\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"l\">\u003C/span>\n\u003Cspan class=\"l\">\u003Cspan class=\"tok punctuation\"><\u003C/span>\u003Cspan class=\"tok tag_name\">style\u003C/span>\u003Cspan class=\"tok punctuation\">>\u003C/span>\u003C/span>\n\t\u003Cspan class=\"l\">\u003Cspan class=\"tok selector\">button\u003C/span> \u003Cspan class=\"tok punctuation\">{\u003C/span>\u003C/span>\n\t\t\u003Cspan class=\"l\">\u003Cspan class=\"tok property\">font-size\u003C/span>\u003Cspan class=\"tok punctuation\">:\u003C/span> \u003Cspan class=\"tok number\">2\u003C/span>\u003Cspan class=\"tok unit\">em\u003C/span>\u003Cspan class=\"tok punctuation\">;\u003C/span>\u003C/span>\n\t\u003Cspan class=\"l\">\u003Cspan class=\"tok punctuation\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"l\">\u003Cspan class=\"tok punctuation\"></\u003C/span>\u003Cspan class=\"tok tag_name\">style\u003C/span>\u003Cspan class=\"tok punctuation\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\u003Cpre data-ts data-language=\"svelte\" class=\"twinkleplop\">\u003Ccode>\u003Cspan class=\"l\">\u003Cspan class=\"tok punctuation\"><\u003C/span>\u003Cspan class=\"tok tag_name\">script\u003C/span> \u003Cspan class=\"tok attr_name\">lang\u003C/span>\u003Cspan class=\"tok operator\">=\u003C/span>\u003Cspan class=\"tok string\">"ts"\u003C/span>\u003Cspan class=\"tok punctuation\">>\u003C/span>\u003C/span>\n\t\u003Cspan class=\"l\">\u003Cspan class=\"tok keyword\">function\u003C/span> \u003Cspan class=\"tok function\">greet\u003C/span>\u003Cspan class=\"tok punctuation\">()\u003C/span> \u003Cspan class=\"tok punctuation\">{\u003C/span>\u003C/span>\n\t\t\u003Cspan class=\"l\">\u003Cspan class=\"tok function\">alert\u003C/span>\u003Cspan class=\"tok punctuation\">(\u003C/span>\u003Cspan class=\"tok string\">'Welcome to Svelte!'\u003C/span>\u003Cspan class=\"tok punctuation\">);\u003C/span>\u003C/span>\n\t\u003Cspan class=\"l\">\u003Cspan class=\"tok punctuation\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"l\">\u003Cspan class=\"tok punctuation\"></\u003C/span>\u003Cspan class=\"tok tag_name\">script\u003C/span>\u003Cspan class=\"tok punctuation\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"l\">\u003C/span>\n\u003Cspan class=\"l\">\u003Cspan class=\"tok punctuation\"><\u003C/span>\u003Cspan class=\"tok tag_name\">button\u003C/span> \u003Cspan class=\"tok attr_name\">onclick\u003C/span>\u003Cspan class=\"tok operator\">=\u003C/span>\u003Cspan class=\"tok expression\">{\u003C/span>\u003Cspan class=\"tok identifier\">greet\u003C/span>\u003Cspan class=\"tok expression\">}\u003C/span>\u003Cspan class=\"tok punctuation\">>
170\u003C/span>click me\u003Cspan class=\"tok punctuation\"></\u003C/span>\u003Cspan class=\"tok tag_name\">button\u003C/span>\u003Cspan class=\"tok punctuation\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"l\">\u003C/span>\n\u003Cspan class=\"l\">\u003Cspan class=\"tok punctuation\"><\u003C/span>\u003Cspan class=\"tok tag_name\">style\u003C/span>\u003Cspan class=\"tok punctuation\">>\u003C/span>\u003C/span>\n\t\u003Cspan class=\"l\">\u003Cspan class=\"tok selector\">button\u003C/span> \u003Cspan class=\"tok punctuation\">{\u003C/span>\u003C/span>\n\t\t\u003Cspan class=\"l\">\u003Cspan class=\"tok property\">font-size\u003C/span>\u003Cspan class=\"tok punctuation\">:\u003C/span> \u003Cspan class=\"tok number\">2\u003C/span>\u003Cspan class=\"tok unit\">em\u003C/span>\u003Cspan class=\"tok punctuation\">;\u003C/span>\u003C/span>\n\t\u003Cspan class=\"l\">\u003Cspan class=\"tok punctuation\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"l\">\u003Cspan class=\"tok punctuation\"></\u003C/span>\u003Cspan class=\"tok tag_name\">style\u003C/span>\u003Cspan class=\"tok punctuation\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\u003C/div>\u003Cp>...into lean, tightly optimized JavaScript.\u003C/p>\n\u003Cp>You can use it to build anything on the web, from standalone components to ambitious full stack apps (using Svelteâs companion application framework, \u003Ca href=\"../kit\">SvelteKit\u003C/a>) and everything in between.\u003C/p>\n\u003Cp>These pages serve as reference documentation. If youâre new to Svelte, we recommend starting with the \u003Ca href=\"/tutorial\">interactive tutorial\u003C/a> and coming back here when you have questions.\u003C/p>\n\u003Cp>You can also try Svelte online in the \u003Ca href=\"/playground\">playground\u003C/a> or, if you need a more fully-featured environment, on \u003Ca href=\"https://sveltekit.new\">StackBlitz\u003C/a>.\u003C/p>\n",sections:[],children:[],prev:null,next:{slug:"docs/svelte/getting-started",title:"Getting started"}},related:void 0},uses:{params:["topic","path"],url:1}}], 171 form: null, 172 error: null 173 }); 174 }); 175 } 176 </script>
176 177 </div> 178 179
179<script> 180 try { 181 if (localStorage.getItem('sv:show-legacy') === 'open') { 182 for (const node of document.querySelectorAll('details.legacy')) { 183 node.open = true; 184 } 185 } 186 187 if (localStorage.getItem('svelte:prefers-ts') === 'false') { 188 for (const node of document.querySelectorAll('.ts-toggle')) { 189 node.checked = false; 190 } 191 } 192 } catch { 193 // localStorage access disabled 194 } 195 </script>
195 196 </body> 197</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.